@charset "UTF-8";


/* --------------- *\
 * contact
\* --------------- */
#contact {
  padding: 40px 0 80px 0;
  font-size: 14px;
  background-color: #fff;
}
#contact h3 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px;
  padding-bottom: 40px;
  text-align: center;
  border-bottom: 1px solid #666;
}
#contact .form_style {
  width: 500px;
  margin: 0 auto;
}
#contact p.lead_text {
  text-align: center;
}
#contact .select_form {
  display: flex;
  justify-content: space-between;
}
#contact .select_form input.button {
  width: 230px;
  height: 96px;
}
#contact .select_form.ja input.button {
  text-align: left;
}
#contact .form_style div.categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#contact .form_style div.categories.osakainfo.customer {
  display: block;
}
#contact .form_style div.categories.osakainfo.customer img.ico_link {
  width: 16px;
}
#contact .form_style div.categories.osakainfo.customer input[type="radio"] + label {
  margin-right: 6px;
}
/*
.categories.deep input[type="radio"][value="9"],
.categories.deep label[for="category-id-9"] {
  order: 1;
}
.categories.deep input[type="radio"][value="3"],
.categories.deep label[for="category-id-3"] {
  order: 2;
}
.categories.deep input[type="radio"][value="10"],
.categories.deep label[for="category-id-10"] {
  order: 3;
}
*/
#contact .submit_area {
  display: flex;
  padding: 30px 0 0;
}
#contact .submit_area > * {
  width: 40%;
  padding: 10px;
  font-weight: bold;
}
#contact .submit_area > .back {
  background-color: #ddd;
}
#contact ul.attention {}
#contact ul.attention li {
  color: #d70d0d;
  padding-left: 18px;
  text-indent:-18px;
}


/* radio */
input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  background-repeat: no-repeat;
  background-position: left top 2px;
  display: inline-block;
  padding: 0 0 4px 20px;
  line-height: 22px;
  cursor: pointer;
}
input[type="radio"] + label {
  background-image: url(../img/admin/form_m_radio_off.png);
  padding-left: 26px;
  margin-right:  26px;
}
input[type="radio"]:checked + label {
  background-image: url(../img/admin/form_m_radio_on.png);
}


@media (max-width: 767px) {
  #contact .form_style {
    width: 100%;
  }
  #contact .form_style .col2 > *:not(:first-child) {
    margin-top: 10px;
  }
}

