/* =========================================
   Member Detail
   ======================================= */
body {
 opacity: 1;
}
.member-detail {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.section-title-member-detail {
 margin-inline: 60px;
 margin-bottom: 60px;
}
.member-detail .detail-main {
 max-width: 440px;
 margin-inline: auto;
 text-align: left;
}
.member-detail .detail-main .detail-image {
 display: block;
 width: 100%;
}
.detail-title {
 font-size: 24px;
 margin-top: 2rem;
 font-weight: 700;
 text-align: left;
}

/* Purpose block */
.purpose-block {
 margin-top: 1rem;
 text-align: left;
}
.purpose-label {
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.02em;
 color: #333;
 margin-bottom: 0.5rem;
 display: inline-block;
 border: 1px solid #333333;
 padding: 0.3em 0.8em;
}

.purpose-text {
 margin: 0;
 font-size: 1rem;
 color: #555;
 line-height: 1.8;
 white-space: pre-wrap;
}

/* responsive */
@media (max-width: 768px) {
 .section-title-member-detail {
  margin-inline: 30px;
  margin-bottom: 30px;
 }

 .member-detail .container {
  margin-inline: 30px;
 }
}

.member-detail .container {
 max-width: unset;
 padding-inline: unset;
 margin-inline: 60px;
 width: auto;
}

@media (max-width: 768px) {
 .member-detail .container {
  margin-inline: 30px;
 }
}

@media (max-width: 600px) {
 .member-detail {
  padding-block: 30px 0;
 }
 .section-title-member-detail {
  margin-inline: 20px;
  margin-bottom: 30px;
 }
 .member-detail .container {
  margin-inline: 20px;
 }
 .detail-title {
  font-size: 22px;
 }
 .purpose-block {
  margin-top: 1.5rem;
 }
 .purpose-label {
  font-size: 13px;
 }
}