@charset "UTF-8";
.recommend-service, .fixed-reserve-area {
  background-color: #fff;
}
.recommend-service .button-list, .fixed-reserve-area .button-list {
  display: grid;
  justify-content: center;
  margin-top: 0;
}
.recommend-service .button-item, .fixed-reserve-area .button-item {
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.recommend-service .button-link, .fixed-reserve-area .button-link {
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: #014694;
  border: 2px solid #014694;
  border-radius: 8px;
  box-sizing: border-box;
  text-align: center;
  color: #FFFFFF;
  font-weight: 700;
}
.recommend-service .button-link::after, .fixed-reserve-area .button-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 0px;
  border-top: solid 2px #FFFFFF;
  border-right: solid 2px #FFFFFF;
  transform: rotate(45deg);
}

.recommend-service-inner {
  background-color: #FFFFFF;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  text-align: center;
  border-radius: 8px;
}

.recommend-service-headline {
  line-height: 1.4;
  font-weight: 700;
  color: #333333;
}

.fixed-reserve-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s, visibility 0.2s;
}

.fixed-banner {
  position: fixed;
  z-index: 100;
  transition: opacity 0.2s, visibility 0.2s;
}
.fixed-banner img {
  display: block;
}

.close-fixed-banner-button {
  position: absolute;
  border-radius: 50%;
  background-color: #014694;
  font-weight: 700;
}

.js-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.js-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media print, screen and (min-width: 768px) {
  .sp-only-br {
    display: none;
  }
  .recommend-service .button-list, .fixed-reserve-area .button-list {
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem;
  }
  .recommend-service .button-link, .fixed-reserve-area .button-link {
    padding: 1.9rem 2.9rem 1.9rem 1.6rem;
    max-width: 37.8rem;
    font-size: 1.6rem;
  }
  .recommend-service .button-link::after, .fixed-reserve-area .button-link::after {
    right: 2.4rem;
  }
  .recommend-service .button-link:hover, .fixed-reserve-area .button-link:hover {
    background-color: #FFFFFF;
    color: #014694;
  }
  .recommend-service .button-link:hover::after, .fixed-reserve-area .button-link:hover::after {
    border-top: solid 2px #014694;
    border-right: solid 2px #014694;
  }
  .recommend-service {
    margin-top: 5.6rem;
    margin-bottom: 1.6rem;
  }
  .recommend-service-headline {
    position: relative;
    display: inline-flex;
    margin-bottom: 3.2rem;
    font-size: 2.2rem;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
  .recommend-service-headline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.4rem;
    width: 0.17rem;
    height: 2.2rem;
    background-color: #000000;
    transform: translateY(-50%) rotate(-20.24deg);
  }
  .recommend-service-headline::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.4rem;
    width: 0.17rem;
    height: 2.2rem;
    background-color: #000000;
    transform: translateY(-50%) rotate(20.24deg);
  }
  .recommend-service-inner {
    padding: 3.2rem 2.4rem;
  }
  .fixed-reserve-area {
    padding: 2.4rem;
  }
  .fixed-banner {
    right: 3rem;
    bottom: 13.4rem;
  }
  .fixed-banner img {
    width: 33.6rem;
  }
  .fixed-banner-link:hover {
    opacity: 0.7;
  }
  #page_top {
    bottom: 36.4rem;
  }
  .close-fixed-banner-button {
    top: -12px;
    right: -12px;
    width: 3.2rem;
    height: 3.2rem;
    background-color: #014694;
    color: #FFFFFF;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
  }
}
@media print, screen and (max-width: 375px) {
  .recommend-service .button-list, .fixed-reserve-area .button-list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .recommend-service .button-link, .fixed-reserve-area .button-link {
    padding: 1.9rem 2.6rem 1.9rem 1.6rem;
    width: 100%;
    font-size: 1.6rem;
  }
  .recommend-service .button-link::after, .fixed-reserve-area .button-link::after {
    right: 1.6rem;
  }
  .recommend-service {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
  .recommend-service-headline {
    margin-bottom: 2.4rem;
    font-size: 1.8rem;
  }
  .recommend-service-inner {
    padding: 2.4rem 1.6rem;
  }
  .fixed-reserve-area {
    padding: 1.6rem;
  }
  .fixed-banner {
    right: 2rem;
    bottom: 10.9rem;
  }
  .fixed-banner img {
    width: 26.5rem;
  }
  #page_top {
    bottom: 32.4rem;
  }
  .close-fixed-banner-button {
    top: -12px;
    right: -12px;
    width: 2.4rem;
    height: 2.4rem;
    background-color: #014694;
    color: #FFFFFF;
    border: none;
    font-size: 1.2rem;
  }
}
@media print, screen and (min-width: 375px) and (max-width: 767px) {
  .recommend-service .button-list, .fixed-reserve-area .button-list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .recommend-service .button-link, .fixed-reserve-area .button-link {
    padding: 1.9rem 2.6rem 1.9rem 1.6rem;
    width: 100%;
    font-size: 1.6rem;
  }
  .recommend-service .button-link::after, .fixed-reserve-area .button-link::after {
    right: 1.6rem;
  }
  .recommend-service {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
  .recommend-service-headline {
    margin-bottom: 2.4rem;
    font-size: 1.8rem;
  }
  .recommend-service-inner {
    padding: 2.4rem 1.6rem;
  }
  .fixed-reserve-area {
    padding: 1.6rem;
  }
  .fixed-banner {
    right: 2rem;
    bottom: 10.9rem;
  }
  .fixed-banner img {
    width: 26.5rem;
  }
  #page_top {
    bottom: 32.4rem;
  }
  .close-fixed-banner-button {
    top: -12px;
    right: -12px;
    width: 2.4rem;
    height: 2.4rem;
    background-color: #014694;
    color: #FFFFFF;
    border: none;
    font-size: 1.2rem;
  }
}