/* =======================================================
* sub_main
* ======================================================= */
#sub_main {
  background: url(../images/main.jpg) no-repeat center/cover;
  height: 50vh;
  display: flex;
}

#sub_main div {
  margin: auto;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 35px;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}

/* =======================================================
* features
* ======================================================= */
#features h2 img {
  max-width: 270px;
  margin: 0 auto 60px;
}

@media screen and (max-width:768px) {
  #features h2 img {
    width: 200px;
    margin: 0 auto 30px;
  }

  #features .hotpepper_btn {
    margin-bottom: 60px;
  }
}


/* =======================================================
* question
* ======================================================= */
#question dl {
  width: 45%;
  margin: 50px auto 0;
  position: relative;
}

#question dl dt {
  position: relative;
  border-bottom: 1px dotted #a9988d;
  margin-bottom: 20px;
  margin-top: 30px;
  padding: 0 40px 5px 0;
  font-weight: normal;
}

#question dl dt::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-weight: 900;
  top: 5px;
  right: 20px;
  color: #a9988d;
  font-size: 13px;
}

#question dl dt span {
  font-family: "Montserrat", Arial, sans-serif;
  padding-right: 5px;
}

#question dl dd {
  display: none;
  position: relative;
  padding: 20px 30px 20px 40px;
  margin-bottom: 40px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

#question dl dd::before {
  position: absolute;
  content: "A.";
  top: 20px;
  left: 16px;
  font-family: "Montserrat", Arial, sans-serif;
}

@media only screen and (max-width: 768px) {
  #question dl {
    width: 100%;
  }

  #question dl dt {
    padding: 5px 30px 5px 10px;
    margin: 5px 0 15px 0;
    font-size: 13px;
  }

  #question dl dt::after {
    font-size: 11px;
    top: 12px;
    right: 10px;
  }

  #question dl dd {
    padding: 10px 20px 10px 30px;
    margin-bottom: 20px;
    font-size: 12px;
  }

  #question dl dd::before {
    left: 10px;
    top: 10px;
  }
}


/* =======================================================
* gallery
* ======================================================= */
#gallery ul {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-left: 0;
}

#gallery ul li {
  list-style: none;
}

@media screen and (max-width:768px) {
  #gallery ul {
    gap: 7px;
    grid-template-columns: 1fr 1fr;
  }
}