@charset "UTF-8";
@import url(/css/root.css);
#container #contents {
  /* mail.php用確認画面 */
  /* ラクアポ用確認画面 */
  /* &.confirm {
    form{
      dl{
        border: 1px solid var(--mainCol);
        .form_row{
          margin-bottom: 0;
          padding: var(--s8_16);
          &:not(:last-of-type){
            border-bottom: 1px dashed var(--mainCol);
          }
        }
      }
      .button_flex{
        .button{
          width: 60%;
          margin: 0;
        }
        .back{
          width: calc(40% - 1rem);
          max-width: 200px;
          background-color: var(--gray02);
          padding: .5rem 1rem;
          text-align: center;
          color: #fff;
          transition: all .5s;
          border-radius: 10px;
        }
      }
    }
  } */
}
#container #contents form {
  width: 100%;
}
#container #contents form .top_text {
  margin-bottom: var(--m60);
}
#container #contents form .top_text .br {
  text-align: center;
  font-size: var(--fs14_20);
}
#container #contents form .form_area {
  margin-bottom: var(--m70);
}
#container #contents form .form_area .form_title {
  padding-bottom: var(--m20);
  margin-bottom: var(--m70);
  font-size: var(--fs18_30);
  color: var(--gray05);
  font-weight: 600;
  border-bottom: 3px dashed var(--green03);
  line-height: 1;
}
#container #contents form dl:not(.praivacy_list) {
  position: relative;
  width: 100%;
  margin-bottom: var(--m120);
}
#container #contents form dl:not(.praivacy_list) .form_row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
#container #contents form dl:not(.praivacy_list) .form_row:not(:last-of-type) {
  margin-bottom: var(--m60);
}
#container #contents form dl:not(.praivacy_list) .form_row dt {
  width: 23.66%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  grid-gap: 5px 10px;
  position: relative;
}
#container #contents form dl:not(.praivacy_list) .form_row dt span {
  color: var(--maincol);
  font-weight: bold;
  font-size: var(--fs16_22);
}
#container #contents form dl:not(.praivacy_list) .form_row dt .req {
  color: #fff;
  background-color: var(--orange01);
  display: block;
  line-height: 1;
  font-size: 14px;
  padding: 0.25em 0.7em 0.5em;
  border-radius: 5px;
  font-weight: normal;
}
#container #contents form dl:not(.praivacy_list) .form_row dd {
  width: 74.41%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-gap: 10px var(--m20);
}
#container #contents form dl:not(.praivacy_list) .form_row dd .br, #container #contents form dl:not(.praivacy_list) .form_row dd small {
  width: 100%;
  line-height: 1.3;
  font-size: var(--fs14_16);
}
#container #contents form dl:not(.praivacy_list) .form_row dd select, #container #contents form dl:not(.praivacy_list) .form_row dd input, #container #contents form dl:not(.praivacy_list) .form_row dd textarea {
  padding: 10px var(--m20);
  border-radius: 5px;
  background-color: #fff;
  border: var(--gray04) 2px solid;
  font-size: var(--s16_18);
  width: 100%;
}
#container #contents form dl:not(.praivacy_list) .form_row dd input:not([type=radio], [type=checkbox]), #container #contents form dl:not(.praivacy_list) .form_row dd select {
  width: 100%;
  min-width: 200px;
}
#container #contents form dl:not(.praivacy_list) .form_row dd input:not([type=radio], [type=checkbox]).w50, #container #contents form dl:not(.praivacy_list) .form_row dd select.w50 {
  width: 50%;
}
#container #contents form dl:not(.praivacy_list) .form_row dd input:not([type=radio], [type=checkbox]).w10, #container #contents form dl:not(.praivacy_list) .form_row dd select.w10 {
  width: 30%;
}
#container #contents form dl:not(.praivacy_list) .form_row dd input:not([type=radio], [type=checkbox]).w5, #container #contents form dl:not(.praivacy_list) .form_row dd select.w5 {
  width: 10%;
  min-width: 100px;
}
#container #contents form .inp_rdo, #container #contents form .inp_chk, #container #contents form .rdo_inp_round {
  display: none;
}
#container #contents form .inp_rdo:checked + .rdo::after, #container #contents form .inp_rdo:checked + .chk::after, #container #contents form .inp_rdo:checked + .rdo_round::after, #container #contents form .inp_chk:checked + .rdo::after, #container #contents form .inp_chk:checked + .chk::after, #container #contents form .inp_chk:checked + .rdo_round::after, #container #contents form .rdo_inp_round:checked + .rdo::after, #container #contents form .rdo_inp_round:checked + .chk::after, #container #contents form .rdo_inp_round:checked + .rdo_round::after {
  opacity: 1;
}
#container #contents form label:has(.rdo, .chk) {
  display: flex;
  grid-gap: 0.5rem;
  align-items: center;
  position: relative;
  padding: var(--m16) var(--m30);
  padding-left: 10px;
  border-radius: 5px;
  background-color: var(--gray06);
  transition: background-color 0.5s;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
#container #contents form label:has(.rdo, .chk) .txt {
  font-size: var(--fs16_17);
  white-space: nowrap;
}
#container #contents form label:has(.rdo, .chk) .rdo, #container #contents form label:has(.rdo, .chk) .chk {
  display: inline-block;
  width: var(--fs20_24);
  height: var(--fs20_24);
  border: 2px solid var(--gray07);
  border-radius: 5px;
  position: relative;
}
#container #contents form label:has(.rdo, .chk) .rdo::after, #container #contents form label:has(.rdo, .chk) .chk::after {
  content: "";
  display: inline-block;
  width: var(--m8_12);
  aspect-ratio: 1/1;
  border-radius: 100%;
  background-color: var(--maincol);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  opacity: 0;
}
#container #contents form label:has(.rdo, .chk) .chk::before {
  border-radius: 5px;
}
#container #contents form ::-moz-placeholder {
  color: #ccc;
}
#container #contents form ::placeholder {
  color: #ccc;
}
#container #contents form .pptext {
  margin-bottom: var(--m30);
  font-size: var(--fs14_20);
  text-align: center;
}
#container #contents form .praivacy {
  width: 100%;
  max-height: 350px;
  border: var(--maincol) 3px solid;
  padding: var(--m40) var(--m16_50);
  overflow: scroll;
}
#container #contents form .praivacy .title {
  font-size: var(--fs16_22);
  font-weight: bold;
  color: #fff;
  background-color: var(--maincol);
  margin-bottom: 1em;
  line-height: 1;
  padding: 0.5em 1em;
}
#container #contents form .praivacy .praivacy_toptext {
  font-size: var(--fs14_18);
  margin-bottom: var(--m30);
}
#container #contents form .praivacy .privacy_row:not(:last-of-type) {
  margin-bottom: var(--m30);
}
#container #contents form .praivacy .privacy_row dt {
  border-bottom: 1px solid var(--maincol);
  margin-bottom: 0.5rem;
  font-size: var(--fs14_18);
  font-weight: 400;
}
#container #contents form .praivacy .privacy_row dd {
  font-size: var(--fs14_18);
}
#container #contents form .check_area {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: var(--m30);
  margin-right: auto;
  margin-left: auto;
}
#container #contents form .button_flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-gap: var(--m16) 1rem;
}
#container #contents form .button {
  text-align: center;
  width: 80%;
  max-width: 300px;
  font-size: var(--fs14_18);
}
#container #contents form .button.inp_bt {
  width: 100%;
  max-width: 400px;
}
#container #contents form .button.inp_bt input {
  width: 100%;
  background-color: var(--orange01);
  max-width: unset;
  padding: 1rem;
  text-align: center;
  color: #fff;
  transition: all 0.5s;
  margin: 0 auto;
  font-size: var(--fs16_20);
  border-radius: 5px;
}
#container #contents form .button.only {
  margin: 0 auto;
}
#container #contents form .error_messe {
  color: red;
  display: block;
}
#container #contents.confirm {
  min-height: 100vh;
}
#container #contents.confirm #form h3,
#container #contents.confirm #form h4 {
  font-size: clamp(1.125rem, 0.992rem + 0.57vw, 1.375rem);
  text-align: center;
  margin-bottom: 1em;
}
#container #contents.confirm #form form {
  margin: 2rem auto;
}
#container #contents.confirm #form form table {
  border-collapse: collapse;
  background-color: #fff;
  margin-bottom: 1.5rem;
  width: 100%;
}
#container #contents.confirm #form form table th,
#container #contents.confirm #form form table td {
  border: #000 1px solid;
  padding: 0.5rem 1rem;
}
#container #contents.confirm #form form table th {
  background-color: #f0f0f0;
  width: 16rem;
}
#container #contents.confirm #form form table td {
  width: calc(100% - 16rem);
}
#container #contents.confirm #form form input[type=button] {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.25rem 1rem;
  border: 1px solid #000;
  background-color: #f0f0f0;
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  display: block;
  border-radius: 5px;
}
#container #contents.confirm #form .error_messe {
  text-align: center;
  color: red;
}
#container #contents.confirm #form #submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  grid-gap: 1rem;
}
#container #contents.confirm #form #submit input[type=submit] {
  width: 100%;
  max-width: 500px;
  background-color: var(--orange01);
  padding: 1rem;
  text-align: center;
  color: #fff;
  transition: all 0.5s;
  font-size: var(--fs16_20);
  border-radius: 5px;
}

@media all and (min-width: 768px) {
  #container #contents form label:has(.rdo, .chk):hover {
    background-color: var(--green05);
  }
  #container #contents form .button.inp_bt:hover input {
    background-color: var(--maincol);
  }
  #container #contents.confirm #form #submit input[type=submit]:hover {
    background-color: var(--maincol);
  }
}
@media all and (max-width: 890px) {
  #container #contents form dl:not(.praivacy_list) .form_row {
    grid-gap: 1rem;
  }
  #container #contents form dl:not(.praivacy_list) .form_row dt {
    width: 100%;
  }
  #container #contents form dl:not(.praivacy_list) .form_row dd {
    width: 100%;
  }
}
@media all and (max-width: 768px) {
  #container #contents form dl .form_row {
    flex-wrap: wrap;
  }
  #container #contents form dl .form_row > dt {
    width: 100%;
  }
  #container #contents form dl .form_row dd {
    width: 100%;
  }
  #container #contents form dl .form_row dd input:not([type=radio], [type=checkbox]) {
    width: 100%;
  }
  #container #contents form dl .form_row dd select {
    width: 100%;
  }
  #container #contents form dl .form_row dd .full {
    width: 100%;
  }
  #container #contents form dl .form_row dd textarea {
    width: 100%;
  }
  #container #contents form dl .form_row dd.harf label {
    width: 100%;
  }
}
@media all and (max-width: 520px) {
  #container #contents.asessment .top_area .flow > div {
    width: 100%;
  }
  #container #contents.asessment .top_area .flow > div.flow01 {
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 53% 100%, 0 90%);
  }
  #container #contents.asessment .top_area .bottom_text .br {
    text-align: center;
    font-size: var(--s14_16);
  }
  #container #contents form dl .form_row dd.flex_box .checkbox {
    width: 100%;
  }
  #container #contents form dl .form_row dd .hope > div label {
    flex-wrap: wrap;
  }
  #container #contents form dl .form_row dd .hope > div label .txt {
    width: 100%;
  }
  #container #contents form dl .form_row dd .hope > div label select {
    width: 100%;
  }
  #container #contents form .property_area .property_row dd {
    width: calc(50% - var(--s12_14) * 3);
  }
  #container #contents form .property_area .property_row dt:nth-of-type(-n+2),
  #container #contents form .property_area .property_row dd:nth-of-type(-n+2) {
    border-bottom: 1px dashed var(--mainCol);
  }
  #container #contents form .neighborhood_flex .neighborhood_box {
    width: 100%;
  }
  #container #contents.confirm #form form table th, #container #contents.confirm #form form table td {
    display: block;
    width: 100%;
  }
}