/* HTML SETTING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
}

img {
  display: block;
  width: 100%;
}

.inner {
  /* background: #ccc; */
}

.container {
  width: 100%;
  max-width: 960px;
  margin: auto;
}

.sp-only {
  display: none;
}

/* HTML SETTING */

/* CUSTOM SETTING */

a {
  color: #7caa2d;
  line-height: 1.5;
}

a:hover {
  cursor: pointer;
  color: #39a347;
  opacity: 0.7;
}

#logo {
  display: block;
  width: 120px;
  padding: 20px 0;
}
.top {
  margin-top: 16px;
}

#lead {
  padding-top: 42px;
  text-align: center;
}

#fee {
  padding-top: 20px;
}

h3 {
  text-align: center;
}

table {
  width: max-content;
  text-wrap: nowrap;
  border-collapse: collapse;
  text-align: center;
}

th {
  background: #edd;
}

th, td{
  border: 1px solid #ccc;
  padding: 10px;
}

.noborder, .last-row {
  border: 1px solid #ccc;
}

.noborder td {
  border: none;
}

.noborder .last-col {
  border-left: 1px dashed #ccc;
}

.noborder .set td:nth-child(odd) {
  width: 8%;
}
.noborder .set td:nth-child(even) {
  width: 20%;
}

.bg {
  padding: 5px 10px;
  color: #fff;
}

.bg1 {
  background: #7caa2d;
}
.bg2 {
  background: #eec821;
}
.bg3 {
  background: #39a347;
}
.bg4 {
  background: #ec863d;
}

.fee-table{
  width: 100%;
}

.fee-table:first-of-type{
  margin: 20px 0 40px;
}

.fee-table .set td:nth-child(even) {
  width: 15%;
}

.fee-table .set td:nth-child(odd) {
  width: 25%;
}

.fee-table .set td:nth-child(1) {
  width: 20%;
}

#guide {
  padding-top: 20px;
}

h4 {
  font-weight: 400;
  font-size: 1.5rem;
  text-align: center;
  margin: 40px 0;
}

h5 {
  font-size: 1rem;
  margin: 8px 0;
}

.col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
  margin-top: 20px;
}

.col3-cont {
  margin-top: 8px;
}

#info {
  padding-top: 40px;
}

.info-item {
  margin-top: 20px;
}

ol {
  list-style: none; /* Xóa kiểu danh sách mặc định */
  counter-reset: my-counter; /* Khởi tạo bộ đếm */
  padding-left: 0;
  margin-left: 20px;
}

ol > li {
  counter-increment: my-counter; /* Tăng bộ đếm cho mỗi li */
  display: flex; /* Sử dụng flex để căn chỉnh */
  align-items: flex-start;
  margin: 4px 0;
}

ol > li::before {
  content: counter(my-counter); /* Hiển thị số đếm */
  flex: 0 0 auto;
  display: inline-flex;
  width: 16px; /* Kích thước vòng tròn */
  height: 16px;
  font-size: 0.8rem;
  background-color: #fff; /* Màu nền vòng tròn */
  border: 0.5px solid #000; /* Viền vòng tròn */
  border-radius: 50%; /* Tạo hình tròn */
  justify-content: center;
  align-items: center;
  margin-right: 4px; /* Khoảng cách với nội dung */
}

.ulist {
  margin-left: 20px;
  list-style-type: disc;
}

.ulist-asterisk {
  list-style: none;
}

.ulist-asterisk > li {
  display: flex;
  align-items: flex-start;
  margin: 4px 0;
}

.ulist-asterisk > li::before {
  content: "※";
  margin-right: 4px; /* Khoảng cách với nội dung */
}

#rewards {
  padding-top: 40px;
}

.rewards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

#reservation {
padding-top: 80px;
}

.reservation {
  background: #D3E2CB;
  padding: 1rem 1rem 1.75rem;
  text-align: center;
}
.reservation hr {
  margin: 16px 0;
  border: none;
  border-top: 0.5px solid #000;
}

.ulist-none {
  list-style: none;
  text-align: left;
}

footer {
  padding-top: 20px;
}

.footer-nav {
  text-align: center;
}
.footer-nav a {
  text-decoration: none;
}

.copyright {
  margin: 80px 0;
  text-align: center;
}

.ontop {
  width: 40px;
  height: 40px;
  background: #7caa2d;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ontop::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(-45deg);
  margin-top: 4px;
}

/* CUSTOM SETTING */


/* MARK: RESPONSIVE
*/

@media (max-width: 768px) {

  #logo {
    margin: 0 20px;
  }
  
  main, footer {
    padding: 0 16px;
  }

  table {
    text-wrap: wrap;
    width: auto;
  }

  .pc-only {
    display: none;
  }

  .container {
    width: 100%;
    max-width: 100%;
  }

  .col3 {
    gap: 8px;
  }

  .mb-col2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-nav a {
    display: block;
  }

  .reservation {
    padding: 1rem 20px 1.75rem;
  }

  .sp-only {
    display: block;
  }

}