html,
  body {
    margin: 0;
    padding: 0;
  }  
  
  section.mailform {
    background-image: url(./image/mail.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 300px 0 80px;

  @media (max-width: 800px) {                                                                                           
        
    background-image: url(./image/mail-sp.webp);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: 100% auto; /* 横幅100%、縦は自動 */  
  }  

  > div { 
    > div {

      /* ===== STEP ===== */
      > div.step {
        max-width: 85%;
        margin-inline: auto;
        margin-bottom: 20px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);


        > div {
          font-size: min(0.8rem, 4.5vw);
          line-height: 1;
          padding-block: 8px;
          text-align: center;

          &.on {
            background-color: #ff8eac;
            color: #773838;
          }
        }

        #formStep1 {
          background-color: #ff6991;
          color: #ffffff;
          clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
        }

        #formStep2 {
          color: #fff;
          background-color: #ff9fb8;
          clip-path: polygon(
            0 0,
            95% 0,
            100% 50%,
            95% 100%,
            0 100%,
            5% 50%
          );
        }

        #formStep3 {
          color: #222;
          clip-path: polygon(
            0 0,
            100% 0,
            100% 100%,
            0 100%,
            5% 50%
          );
        }

        @media (max-width: 400px) {
          max-width: 75%;         
          margin-top: 0;
          margin-bottom: 30px;
        }
      }

      /* ===== FORM ===== */
      > form { 
        > div.input {
          max-width: 600px;
          margin-inline: auto;
          display: flex;
          flex-direction: column;
          row-gap: 10px;

          > dl {
            display: grid;
            grid-template-columns: 200px 1fr;
            column-gap: 8px;

            @media (max-width: 810px) {
              grid-template-columns: 1fr;
            }

            &.wide {
              display: block;
            }

            > dt {
              padding: 10px 15px;
              background-color: rgb(255, 249, 202);
              border-radius: 10px;
              display: flex;
              justify-content: space-between;
            }


            @media (max-width: 810px) {
              > dt {
                width: 85%;
                margin: auto;
                padding: 5px 10px;
                font-size: 10px;
              }
            }

            @media (max-width: 400px) {
              > dt {
                width: 85%;
                margin: auto;
                padding: 5px 10px;
                font-size: 10px;
              }
            }

            .require {
              font-size: 0.9em;
              color: #ff0000;
            }

            > dd {
              ::placeholder {
                color: #472c07;
                font-size: 16px;
                text-align: right;
              }

              > div.control {
                display: block;
                gap: 5px;

                input,
                select,
                textarea {
                  width: 100%;
                  height: 30px;
                  border: 2px solid #ffd45f;
                  border-radius: 5px;
                  margin-top: 7px;
                }

                @media (max-width: 810px) {
                  input,
                  select,
                  textarea {
                    width: 80%;
                    height: 35px;
                    margin: 7px auto;
                    display: block;
                  } 
                }

                @media (max-width: 400px) {
                  input,
                  select,
                  textarea {
                    width: 75%;
                    height: 35px;
                    margin: 7px auto;
                    display: block;
                  }
                }
              }

              .age-input-wrapper {
                position: relative;
                display: inline-block;
                width: 40%;
              }

              .age-input-wrapper span {
                margin-left: 10px;
              }

              input[name="age"] {
                width: 100%;
              }

            @media (max-width: 400px) {
             .age-input-wrapper {
                display: inline-flex;
                align-items: center;
                margin-left: 40px;
              }

              .age-input-wrapper input {
                width: 4em;          /* 数字2〜3桁分 */
                height: 35px;
                padding: 6px;
                box-sizing: border-box;
              }

              .age-input-wrapper span {
                position: static;    /* absolute をやめる */
                transform: none;
                white-space: nowrap;
              }
            }

              .age-label {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                pointer-events: none;
                color: #898989;
                font-weight: 300;
              }

              .checkbox {
                display: flex;
                width: 50%;
                align-items: center;
                margin-left: 30px;
              }

              @media (max-width: 400px) {
                 .checkbox {
                display: flex;
                width: 40%;
                align-items: center;
              }

              }
            }
          }
             /* ===== CONFIRM ===== */
            #confirmArea.confirm-area {
              max-width: 600px;
              margin: 30px auto 0;
              padding: 30px 20px;
              background-color: #fff;
              border-radius: 16px;
              box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            }

            /* タイトル */
            .confirm-title {
              text-align: center;
              font-size: 1.4rem;
              margin-bottom: 25px;
              color: #5a3d2b;
            }

            /* 内容リスト */
            .confirm-list {
              display: flex;
              flex-direction: column;
              gap: 12px;
            }

            .confirm-list > div {
              display: grid;
              grid-template-columns: 180px 1fr;
              align-items: center;
              padding: 12px 16px;
              background-color: rgb(255, 249, 202); /* 入力画面dtと統一 */
              border-radius: 12px;
            }

            /* 項目名 */
            .confirm-list dt {
              font-weight: bold;
              color: #773838;
            }

            /* 値 */
            .confirm-list dd {
              margin: 0;
              color: #222;
            }

            /* ボタン */
            .confirm-buttons {
              display: flex;
              gap: 8px;
              margin-top: 30px;
            }

            .confirm-buttons button {
              width: 50%;
              height: 3.5rem;
              border-radius: 8px;
              border: none;
              font-size: 1rem;
              cursor: pointer;
            }

            /* 戻る */
            #backBtn {
              background-color: #eee;
              color: #666;
            }

            /* 送信 */
            .confirm-buttons button[type="submit"] {
              background-color: #f39800;
              color: #fff;
            }

            /* ===== SP ===== */
            @media (max-width: 400px) {
              #confirmArea.confirm-area {
                max-width: 75%;
                padding: 20px 15px;
              }

              .confirm-list > div {
                grid-template-columns: 1fr;
                gap: 6px;
                font-size: 0.85rem;
              }

              .confirm-buttons {
                flex-direction: column;
              }

              .confirm-buttons button {
                width: 100%;
              }
            }


          /* ===== VALIDATE ===== */
          > div[data-validate-mark] {
            position: absolute;
            top: 5px;
            right: 9px;

            &[data-mark="ok"] {
              background-image: url(./common/image/form_validate_ok.svg);
            }

            &[data-mark="ng"] {
              background-image: url(./common/image/form_validate_ng.svg);
            }

            &[disabled] {
              visibility: hidden;
            }
          }
        }

        /* ===== PRIVACY ===== */
        div.privacy {
          margin-top: 15px;
          background-color: #fff;
          max-width: 580px;
          margin-inline: auto;
        }

        p {
          margin-top: 30px;
          font-size: 0.9rem;
          color: #333;
        }

         @media (max-width: 810px) {
          div.privacy {
            max-width: 75%;
          }

          p {
            font-size: 0.55rem;
            margin: 25px 0 20px;
          }
        }

        @media (max-width: 400px) {
          div.privacy {
            max-width: 75%;
          }

          p {
            font-size: 0.55rem;
            margin: 25px 0 20px;
          }
        }

        /* ===== LINK ===== */
        a {
          color: var(--color-accent);
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        /* ===== CONSENT & SUBMIT ===== */
        > div.consent {
          text-align: center;
          margin-top: 10px;

          > label {
            cursor: pointer;
            font-size: 0.9em;

            > input {
              accent-color: var(--color-accent);
            }
          }
        }

        #submitBtn:disabled {
          background: #ccc;
          color: #888;
          cursor: not-allowed;
          opacity: 0.6;
        }

        > div.submit {
          margin: 50px auto 0;
          width: 80%;
          display: flex;
          gap: 5px;

          > button {
            width: 50%;
            height: 2.5rem;
            border-radius: 8px;
          }
        }

        @media (max-width: 400px) {
          > div.consent,
          > div.submit {
            width: 75%;
            margin-inline: auto;
          }

          > div.submit {
            margin-top: 30px;
          }
        }

        /* ===== RESULT ===== */
        .thanks {
          max-width: 640px;
          margin: 80px auto;
          padding: 48px 32px;
          background: #ffffff;
          border-radius: 16px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.08);
          text-align: center;
        }

        .thanks h2 {
          font-size: 24px;
          margin-bottom: 16px;
          color: #333;
        }

        .thanks p {
          font-size: 16px;
          line-height: 1.8;
          color: #555;
        }

        @media (max-width: 768px) {
          .thanks {
            margin: 48px 16px;
            padding: 32px 20px;
          }

          .thanks h2 {
            font-size: 20px;
          }
        }
      }
    }
  }
}

/* =========================
   CONFIRM AREA
========================= */
#confirmArea.confirm-area {
  max-width: 500px;
  margin: 20px auto 0;
  padding: 13px 25px 30px 25px;
  background-color: #ffffff;
  border-radius: 20px;
}

/* タイトル */
.confirm-title {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 25px;
  color: #5a3d2b;
}

/* リスト全体 */
.confirm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

/* 各行 */
.confirm-list > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  padding: 12px 16px;
  background-color: rgb(255, 249, 202);
  border-radius: 12px;
}

/* 項目名 */
.confirm-list dt {
  font-weight: bold;
  color: #773838;
}

/* 値 */
.confirm-list dd {
  margin: 0;
  color: #222;
}

/* ボタンエリア */
.confirm-buttons {
  display: flex;
  gap: 8px;
  margin-top: 30px;
}

/* 共通ボタン */
.confirm-buttons button {
  width: 50%;
  height: 3.5rem;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

/* 戻る */
#backBtn {
  background-color: #eeeeee;
  color: #666666;
}

/* 送信 */
.confirm-buttons button[type="submit"] {
  background-color: #f39800;
  color: #ffffff;
}

/* =========================
   SP対応
========================= */

@media (max-width: 400px) {

    section.mailform {
    padding-top: 200px;
  }

  #confirmArea.confirm-area {
    max-width: 80%;
    padding: 20px 15px;
  }

  .confirm-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 0.85rem;
  }

  .confirm-buttons {
    flex-direction: column;
  }

  .confirm-buttons button {
    width: 100%;
  }
}


/* 必須エラーメッセージ（共通） */
[data-validate-error],         
.error-text {      
  color: #d32f2f;      /* 赤 */
  font-size: 10px;     /* 少し小さめ */
  margin-top: 6px;
  line-height: 1.4;
  text-align: center;
}

/* プライバシーポリシー専用（微調整したい場合） */
#consentError {
  margin-left: 4px;
  text-align: center;
} 

.complete-text {
	text-align: center;
	color: #333;
	font-size: 16px;
}