@charset "UTF-8";

/* ---------------------------------------max all------------------------------------------------ */


#contact{
    max-width: 1100px;
    padding: 0 4%;
    margin: 0 auto;
}
.line-btn{
    width: 400px;
    background-color: #06C152;
    color: #ffffff;
    text-align: center;
    margin: -60px auto 60px auto;
    padding: 30px 0;
}
.line-btn:hover {
    opacity: 0.7;
}

.form-container{
    max-width: 800px;
    margin: 60px auto;
    padding: 0 4%;
}

form div{
    margin-bottom: 14px;
}

label{
    display: block;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 1.9rem;
    
}

.textform{
    width: 100%;
    padding: 1% 1%;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
}

textarea{
    width: 100%;
    height: 200px;
    padding: 1% 1%;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
}

.required{
background-color: #111111;
color: #ffffff;
padding: 0px 5px;
margin: 0 10px 0px 0px
}

.any{
background-color: #ffffff;
color: #111111;
border: 1px solid #111111;
padding: 0px 5px;
margin: 0 10px 0px 0px
}

.contact-item{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 120px;
}

.contact-btn{
    width: 400px;
    padding: 20px 0;
    background-color: #ffffff;
    font-weight: bold;
    border: 1px solid #111111;
    font-size: 1.9rem;
}

.contact-btn:hover {
    opacity: 0.7;
}

.form-container div br {
    display: none;
}

input[type="text"],input[type="email"]{
    width: 100%;
    padding: 1% 1%;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
}

.wpcf7-list-item {
    display: block !important;
    margin: 0 !important;
}

.wpcf7-list-item label{
    display: block;
    padding-bottom: 0;
    font-weight: normal;
    font-size: 1.6rem;
}

.wpcf7-list-item.first {
    margin: 0;
  }
  .wpcf7-list-item-label {
    cursor: pointer;
    display: flex;
  }
  /* デフォルトのボタン */
  /* // デフォルトのボタンを非表示 */
  input[type="radio"] {
    opacity: 0; 
    position: absolute;
  }
  /* チェック前のボタン */
  /* // ラジオボタンっぽく丸くする */
  /* // 色をじんわり変化させる */
  .wpcf7-list-item-label::before {
    background: #fff;
    border: 1px solid #333;
    border-radius: 100%; 
    content: "";
    height: 1.0em;
    margin-bottom: auto;
    margin-right: .5em;
    margin-top: auto;
    transition: background-color .5s;
    width: 1.0em;
  }
  /* チェック後のボタン */
  /* // チェック後の中心の色 */
  /* // 中心の色のスタイル */
  input[type="radio"]:checked + .wpcf7-list-item-label::before {
    background-color: #EB6F6F; 
    box-shadow: inset 0 0 0 3px #fff; 
  }

  input.contact-btn{
    width: 400px;
    padding: 20px 0;
    background-color: #ffffff;
    font-weight: bold;
    border: 1px solid #111111;
    font-size: 1.9rem;
}
.wpcf7-spinner{
    display: none !important;
}

/* ---------------------------------------/max all------------------------------------------------ */

/* ---------------------------------------max 800px------------------------------------------------ */


@media screen and (max-width: 800px) {


    #contact{
        max-width: 1100px;
        padding: 0 4%;
        margin: 0 auto;
    }
    .line-btn{
        width: 320px;
        background-color: #06C152;
        color: #ffffff;
        text-align: center;
        margin: 0px auto 60px auto;
        padding: 30px 0;
    }
    .line-btn:hover {
        opacity: 0.7;
    }
    
    .form-container{
        max-width: 800px;
        margin: 60px auto;
        padding: 0 4%;
    }
    
    form div{
        margin-bottom: 14px;
    }
    
    label{
        display: block;
        padding-bottom: 15px;
        font-weight: bold;
        font-size: 1.8rem;
        
    }
    
    .textform{
        width: 100%;
        padding: 1% 1%;
        border: 1px solid #c6c6c6;
        border-radius: 3px;
        -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    }
    
    textarea{
        width: 100%;
        height: 200px;
        padding: 2% 1%;
        border: 1px solid #c6c6c6;
        border-radius: 3px;
        -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    }
    
    .required{
    background-color: #111111;
    color: #ffffff;
    padding: 0px 5px;
    margin: 0 10px 0px 0px
    }
    
    .any{
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #111111;
    padding: 0px 5px;
    margin: 0 10px 0px 0px
    }
    
    .contact-item{
        text-align: center;
        margin-top: 30px;
        margin-bottom: 120px;
    }
    
    .contact-btn{
        width: 300px;
        padding: 20px 0;
        background-color: #ffffff;
        font-weight: bold;
        border: 1px solid #111111;
        font-size: 1.8rem;
    }
    .contact-btn:hover {
        opacity: 0.7;
    }

    .form-container div br {
        display: none;
    }
    input[type="text"],input[type="email"]{
        width: 100%;
        padding: 1% 1%;
        border: 1px solid #c6c6c6;
        border-radius: 3px;
        -webkit-box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 5%) inset;
    }
    
    .wpcf7-list-item {
        display: block !important;
        margin: 0 !important;
    }
    .wpcf7-list-item label{
        display: block;
        padding-bottom: 0;
        font-weight: normal;
        font-size: 1.6rem;
    }
    
    .wpcf7-list-item.first {
        margin: 0;
      }
      .wpcf7-list-item-label {
        cursor: pointer;
        display: flex;
      }
      /* デフォルトのボタン */
      /* // デフォルトのボタンを非表示 */
      input[type="radio"] {
        opacity: 0; 
        position: absolute;
      }
      /* チェック前のボタン */
      /* // ラジオボタンっぽく丸くする */
      /* // 色をじんわり変化させる */
      .wpcf7-list-item-label::before {
        background: #fff;
        border: 1px solid #333;
        border-radius: 100%; 
        content: "";
        height: 1.0em;
        margin-bottom: auto;
        margin-right: .5em;
        margin-top: auto;
        transition: background-color .5s;
        width: 1.0em;
      }
      /* チェック後のボタン */
      /* // チェック後の中心の色 */
      /* // 中心の色のスタイル */
      input[type="radio"]:checked + .wpcf7-list-item-label::before {
        background-color: #EB6F6F; 
        box-shadow: inset 0 0 0 3px #fff; 
      }
    
      input.contact-btn{
        width: 100%;
		  color: black;
        padding: 20px 0;
        background-color: #ffffff;
        font-weight: bold;
        border: 1px solid #111111;
        font-size: 1.9rem;
    }
    .wpcf7-spinner{
        display: none!important;
    }
}