@charset "utf-8";

#pagePath {
  margin-bottom: 15px;
}

#main h2 {
  margin-bottom: 70px;
  padding: 18px 0;
  font-size: 2.4rem;
  text-align: center;
  font-weight: bold;
  font-family: "Hiragino Kaku Gothic ProN";
  background-color: #f4efeb;
}

#main h2 img {
  max-width: 100%;
  width: 34px;
  height: auto;
  margin: -2px 15px 0 0;
  vertical-align: middle;
}

.catalog-body {
  text-align: center;
}

.catalog-body__lead {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 100px;
}

.catalog-display__thumb {
  width: 400px;
  margin: 0 auto 40px;
}

.catalog-display__name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 32px;
}

.btn-digital {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #ffffff !important;
  font-size: 18px;
  border-radius: 3px;
  width: 320px;
  height: 63px;
  margin: 0 auto;
  font-weight: bold;
  transition: 0.3s;
  background-color: #01a63c;
  position: relative;
}

.btn-digital:hover {
  opacity: 0.8;
}

.btn-digital:after {
  content: "";
  width: 14px;
  height: 14px;
  border: 0;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 32px;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 767px) {
  br.br-pc {
    display: none !important;
  }

  #main h2 {
    font-size: 4vw;
  }

  .catalog-body__lead {
    font-size: 3.8vw;
    margin-bottom: 15vw;
  }

  .catalog-display__thumb {
    width: 80%;
    margin: 0 auto 40px;
  }

  .catalog-display__name {
    font-size: 5vw;
  }

  .btn-digital {
    font-size: 18px;
    border-radius: 3px;
    width: 320px;
    height: 63px;
    margin: 0 auto;
    font-weight: bold;
    transition: 0.3s;
    background-color: #01a63c;
    position: relative;
  }

  .btn-digital {
    width: 90%;
    height: 15vw;
    font-size: 4.5vw;
  }

  .btn-digital:after {
    width: 4vw;
    height: 4vw;
  }
} /* max-width: 767px END */

@media screen and (min-width: 768px) {
  br.br-sp {
    display: none !important;
  }
} /* min-width: 768px END */