/* 共通全般 */
.send_true,
.send_false {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 20px 0;
    padding: 10px 0;
}

.send_true{
    background-color: #b41010;
}

.send_false {
    background-color: #1057b4;
}
      body {
        font-family: Arial, sans-serif;
        background-color: white;
      }

      h1 {
        text-align: center;
        color: black;
      }

      #wrap{
        width: 80%;
        margin: 0 auto;
      }
      
      .d-flex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

  /* モーダル共通 */    
      .modal-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: rgba(0, 0, 0, 50%);
        padding: 40px 20px;
        overflow: auto;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        box-sizing: border-box;
        z-index: 999999;
      }
      
      .modal-container.active {
        opacity: 1;
        visibility: visible;
      }
      
      .modal-body {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        max-width: 700px;
        width: 90%;
      }
  
      .modal-content {
        background: #fff;
        text-align: left;
        padding: 30px;
        overflow: auto;
        max-height: 700px;
    }

    /* フォーム共通 */
      .Form {
        margin-top: 30px;
        margin-inline: auto;
        max-width: 720px;
      }
       .form-table {
        table-layout: fixed;
        width: 100%;
      }

     .form-table tr:nth-child(odd) {
        background-color: #f7f7f7;
      }
      
      .form-table tr th,
      .form-table tr td {
        padding: 25px;
        vertical-align: middle;
      }

      .form-table tr th {
        width: 30%;
        text-align: left;
      }
  
      .form-table tr td {
        width: 70%;
      }
      
      .form-table tr th label {
        font-weight: bold;
      }
      .Form-Item {
        border-top: 1px solid #ddd;
        padding-top: 24px;
        padding-bottom: 24px;
        width: 100%;
      }
  
      .Form-Item:nth-child(5) {
        border-bottom: 1px solid #ddd;
      }

      .Form-Item-Label {
        width: 100%;
        letter-spacing: 0.05em;
        font-weight: bold;
        font-size: 18px;
      }

     .isMsg {
        margin-top: 8px;
        margin-bottom: auto;
    }

    .Form-Item-Input {
        border: 1px solid #ddd;
        border-radius: 6px;
        height: 48px;
        width: 100%;
        background: #eaedf2;
        font-size: 18px;
      }
      
      .Form-Item-Textarea {
        border: 1px solid #ddd;
        border-radius: 6px;
        height: 216px;
        width: 100%;
        background: #eaedf2;
        font-size: 18px;
        margin-top: 15px;
      }

      .Form-Btn,
      .s-Btn {
        display: block;
        background: #5bc8ac;
        color: #fff;
        border-radius: 6px;
        margin-inline: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.05em;
      }


      /* スマホ */
    @media screen and (max-width: 480px) {
      
      .Form{
        max-width: 100%;
      }   

      .Form-Btn {
        width: 140px;
        margin-bottom: 15px;
      }
  
      .s-Btn {
        width: 100px;
      }

    }
  
    @media screen and (min-width: 481px) and (max-width:1023px) {
  
      .moji {
        text-align: center;
      }
 
      .Form-Btn {
        margin-bottom: 20px;
      }
  
      .Form-Btn,
      .s-Btn {
        width: 280px;
      }
    }
  
  
    @media screen and (min-width: 1024px) {

      .form-table tr th,
      .form-table tr td {
        padding: 30px;
      }
  
      .moji {
        text-align: center;
      }
  
      .Form-Btn {
        margin-bottom: 50px;
        }
  
      .Form-Btn,
      .s-Btn {
        width: 280px;
      }
    }