/* ========================================
   規約・ポリシー共通
======================================== */

.legal-page {
  width:
    min(
      900px,
      calc(100% - 28px)
    );

  margin:
    30px auto 80px;
}


/* ========================================
   HEADER CARD
======================================== */

.legal-header {
  margin-bottom:
    16px;

  padding:
    30px 32px;

  background:
    #ffffff;

  border:
    1px solid #e1e7e3;

  border-radius:
    16px;

  box-shadow:
    0 10px 30px
    rgba(20, 50, 30, 0.06);
}


.legal-eyebrow {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #08733d;

  font-size:
    10px;

  font-weight:
    950;

  letter-spacing:
    0.18em;
}


.legal-header h1 {
  margin:
    0;

  color:
    #172019;

  font-size:
    31px;

  line-height:
    1.35;

  letter-spacing:
    -0.04em;
}


.legal-header p {
  margin:
    10px 0 0;

  color:
    #707c74;

  font-size:
    12px;

  line-height:
    1.8;
}


.policy-date {
  margin-top:
    14px;

  color:
    #89938d;

  font-size:
    10px;

  font-weight:
    700;
}



/* ========================================
   CONTENT
======================================== */

.legal-card {
  padding:
    32px;

  background:
    #ffffff;

  border:
    1px solid #e1e7e3;

  border-radius:
    16px;

  box-shadow:
    0 10px 30px
    rgba(20, 50, 30, 0.05);
}


.legal-section {
  padding:
    26px 0;

  border-bottom:
    1px solid #edf1ee;
}


.legal-section:first-child {
  padding-top:
    0;
}


.legal-section:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}


.legal-section h2 {
  margin:
    0 0 12px;

  color:
    #183524;

  font-size:
    18px;

  line-height:
    1.5;
}


.legal-section h3 {
  margin:
    20px 0 8px;

  color:
    #284334;

  font-size:
    14px;
}


.legal-section p {
  margin:
    8px 0;

  color:
    #4f5e54;

  font-size:
    13px;

  line-height:
    1.9;
}


.legal-section ul,
.legal-section ol {
  margin:
    10px 0;

  padding-left:
    24px;

  color:
    #4f5e54;

  font-size:
    13px;

  line-height:
    1.9;
}


.legal-note {
  margin-top:
    18px;

  padding:
    15px 17px;

  color:
    #5e6b62;

  background:
    #f5f9f6;

  border:
    1px solid
    #e0ebe3;

  border-radius:
    10px;

  font-size:
    12px;

  line-height:
    1.8;
}



/* ========================================
   CONTACT
======================================== */

.contact-form {
  margin-top:
    5px;
}


.contact-group {
  margin-bottom:
    23px;
}


.contact-group label {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #24382b;

  font-size:
    13px;

  font-weight:
    900;
}


.required {
  margin-left:
    5px;

  padding:
    2px 5px;

  color:
    #ffffff;

  background:
    #18bd59;

  border-radius:
    4px;

  font-size:
    8px;
}


.optional {
  margin-left:
    5px;

  color:
    #89938d;

  font-size:
    9px;
}


.contact-group input,
.contact-group select,
.contact-group textarea {
  width:
    100%;

  padding:
    12px 13px;

  color:
    #172019;

  background:
    #ffffff;

  border:
    1px solid
    #d9e3dc;

  border-radius:
    10px;

  outline:
    none;

  font-size:
    14px;
}


.contact-group select {
  min-height:
    48px;
}


.contact-group textarea {
  min-height:
    190px;

  resize:
    vertical;

  line-height:
    1.7;
}


.contact-group input:focus,
.contact-group select:focus,
.contact-group textarea:focus {
  border-color:
    #18c964;

  box-shadow:
    0 0 0 3px
    rgba(24, 201, 100, 0.08);
}


.contact-help {
  display:
    block;

  margin-top:
    6px;

  color:
    #8b958e;

  font-size:
    10px;

  line-height:
    1.6;
}


.contact-count {
  margin-top:
    6px;

  text-align:
    right;

  color:
    #89938d;

  font-size:
    10px;
}


.contact-submit {
  width:
    100%;

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #1bd169,
      #0eac51
    );

  border:
    0;

  border-radius:
    12px;

  font-size:
    13px;

  font-weight:
    900;

  cursor:
    pointer;
}


.contact-submit:disabled {
  opacity:
    0.55;

  cursor:
    default;
}


.contact-message {
  margin-bottom:
    20px;

  padding:
    13px 15px;

  border-radius:
    10px;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.7;
}


.contact-message.error {
  color:
    #a13e3e;

  background:
    #fff2f2;
}


.contact-message.success {
  color:
    #08733d;

  background:
    #effaf3;
}



/* ========================================
   MOBILE
======================================== */

@media (max-width: 640px) {

  .legal-page {
    width:
      calc(100% - 20px);

    margin:
      18px auto 60px;
  }


  .legal-header {
    padding:
      23px 20px;
  }


  .legal-header h1 {
    font-size:
      25px;
  }


  .legal-card {
    padding:
      24px 20px;
  }


  .legal-section {
    padding:
      23px 0;
  }


  .legal-section h2 {
    font-size:
      17px;
  }


  .legal-section p,
  .legal-section ul,
  .legal-section ol {
    font-size:
      12px;
  }

}