@charset "utf-8";


/* ---------------------------------------------------------
 * search
** --------------------------------------------------------- */
div.conditions {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #ececec;
}
div.conditions ul {
  font-size: 14px;
}
div.conditions li {
}
.search_form {
  overflow: hidden;
  padding-bottom: 20px;
}
.search_item {
  background-color: #fff;
  box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.3);
}
.search_item:not(:first-of-type) {
  margin-top: 30px;
}
.search_item:nth-last-child(1 of .search_item) {
  background-color: transparent;
  box-shadow: none;
}
.search_item h4,
.search_item h5 {
  padding: 10px;
}
.search_item:nth-last-child(1 of .search_item) h4 {
  font-size: 18px;
  font-weight: bold;
}

.flex_ul {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #999;
}
.flex_ul > li {
  position: relative;
  width: 50%;
  height: 41px;
  border-bottom: 1px solid #999;
}
.flex_ul > li::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #999;
}
.flex_ul > li.fullwidth {
  width: 100%;
}
/* .fullwidthが先頭にある場合のみ */
.flex_ul > li:nth-child(2n+1 of :not(.fullwidth)) {
  border-right: 1px solid #999;
}
.flex_ul > li:nth-last-child(-n+2) {
  border-bottom: none;
}
.flex_ul > li:nth-last-child(2):nth-child(2n of :not(.fullwidth)) {
  border-bottom: 1px solid #999;
}

.search_select_wrapper {
  display: flex;
  align-items: center;
  padding: 0 10px 10px;
}
.search_select_wrapper .between {
  padding-inline: 5px;
}

.flex_ul input[type="checkbox"] {
  position: absolute;
  z-index: -1;
}
.flex_ul label {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  line-height: 40px;
}
.flex_ul input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  display: block;
  width: 10px;
  height: 15px;
  border-right: 3px solid var(--pri-color);
  border-bottom: 3px solid var(--pri-color);
  transform: rotate(45deg);
}

.all_commitment_btn_area {
  margin-top: 30px;
  text-align: center;
}
.all_commitment_btn_area .btn {
  position: relative;
  display: inline-block;
  padding: 10px 40px;
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-weight: bold;
}
.all_commitment_btn_area .btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3px;
  right: 20px;
  display: block;
  width: 7px;
  height: 7px;
  margin-top: auto;
  margin-bottom: auto;
  margin-block: auto;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
  transform: rotate(45deg);
}
.all_commitment_btn_area .btn.open::after {
  transform: rotate(-135deg);
  top: 3px;
  bottom: 0;
}

.popular_commitments,
.all_commitments {
}
.popular_commitments li,
.all_commitments li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #999;
}
.popular_commitments .label,
.all_commitments .label {
  line-height: 1.2;
}
.popular_commitments .label div,
.all_commitments .label div {
  color: #666;
}
.popular_commitments .value,
.all_commitments .value {
  flex-shrink: 0;
  position: relative;
  background-color: #fff;
}
.popular_commitments input[type="radio"],
.all_commitments input[type="radio"] {
  position: absolute;
  z-index: -1;
}
.popular_commitments label,
.all_commitments label {
  display: inline-block;
  width: 70px;
  padding: 10px 0;
  border: 1px solid;
  border-radius: 6px;
  color: #808080;
  text-align: center;
  font-size: 14px;
}
.popular_commitments input[type="radio"]:checked + label,
.all_commitments input[type="radio"]:checked + label {
  background-color: #F98271;
  border-color: #F98271;
  color: #fff;
}

.all_commitments_wrapper {
}
.all_commitments_wrapper > li {
  background-color: #fff;
  box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.3);
}
.all_commitments_wrapper > li:not(:first-child) {
  margin-top: 30px;
}


.submit_area {
  position: fixed;
  bottom: 0;
  z-index: 10;
  width: 375px;
  padding: 10px;
  background-color: #c9c9c9;
  text-align: center;
}
.submit_area + .submit_area {
  margin-top: 20px;
}
.submit_area input {
  width: 100%;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  color: var(--pri-color);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  transition: all ease 0.3s;
}
.submit_area input:disabled {
  background-color: #eee;
  color: #666;
}
@media (max-width: 519px) {
  .submit_area {
    width: 100%;
  }
}