@charset "UTF-8";

:root {
  --sp2-primary-color: #AB8E51;
}

#sp2 .primary-color {
  color: var(--sp2-primary-color);
}

#sp2 .index {
  max-width: 580px;
  border-bottom-color: var(--sp2-primary-color);
}

#sp2 .index>p::before,
#sp2 .index>p::after {
  background-color: var(--sp2-primary-color);
}

#sp2 .sub-fv .cat {
  width: 335px;
}

#sp2 .sub-sec img {
  border-radius: 10px;
}

.sp2-box01 {
  margin-top: 40px;
  border-radius: 8px;
}

.sp2-box01 h4 {
  text-align: center;
  color: #fff;
  padding: 14px;
  background-color: var(--sp2-primary-color);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.sp2-box01 .text-area {
  padding: 25px;
  border: 1px solid var(--sp2-primary-color);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#sp2 .sec03 {
  margin-top: 40px;
  padding: 40px 0;
  background-color: rgba(155, 131, 81, 0.15);
}

#sp2 .sec03 h3 {
  color: #fff;
  padding: 16px;
  background-color: #1B1B1B;
  border-radius: 8px;
}

#sp2 .member-only h4 + p {
  text-decoration: underline;
}

#sp2 .member-only h4 {
  margin-bottom: 10px;
}

#sp2 .member-only__btn {
  margin-top: 24px;
}

#sp2 .member-only .bottom-logo.reform {
  width: min(335px, 100%);
}


/* -------------------------------------
  responsive
------------------------------------- */

@media (width < 768px) {
  #sp2 .flex>* {
    margin-bottom: 0;
  }
}