@charset "UTF-8";
.contact-main .common-kv05 span{
  font-size: var(--font-size-16);
}
@media (min-width: 768px) {
  .contact-main .common-kv05 span{
    font-size: var(--font-size-24);
  }
}
.contact-progress {
  display: flex;
  justify-content: center;
  padding: 48px 16px;
}
@media (min-width: 768px) {
  .contact-progress {
    padding: 40px 16px 48px;
  }
}

.contact-privacy {
  padding: 0 16px;
}
.contact-privacy .text {
  margin-top: 32px;
  line-height: 1.8;
}
.contact-privacy .link {
  margin-top: 8px;
}
.contact-privacy .note {
  margin-top: 20px;
  line-height: 1.8;
}
.contact-privacy .note > span {
  display: block;
  text-indent: -1em;
  margin-left: 1em;
}
.contact-privacy .note span:not(:first-child) {
  margin-top: 0px;
}
.contact-privacy .red{
  color: #ff0000;
}

.contact-privacy_contents {
  padding: 32px 16px;
  max-width: 916px;
  margin: 0 auto;
  font-size: var(--font-size-14);
  line-height: 1.8;
  border: 1px solid var(--color-gray03);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .contact-privacy_contents {
    padding: 48px 58px 48px 70px;
  }
}
.contact-privacy_contentssub{
  padding: 0;
  max-width: 916px;
  margin: 0 auto;
}

.contact-form {
  max-width: 916px;
  margin: 0 auto;
}

.contact-form_contents {
  background-color: var(--color-gray09);
  margin-top: 32px;
  padding: 48px 16px;
}
@media (min-width: 768px) {
  .contact-form_contents {
    padding: 64px;
    border-radius: 4px;
  }
}
.contact-contents .contact-form .common-button_text{
  padding: 8px 0px 8px 50px;
}

.contact-form_list {
  margin-top: 32px;
}

.contact-form_item:not(:first-child) {
  margin-top: 32px;
}
@media (min-width: 1024px) {
  .contact-form_item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.contact-form_category {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 12px;
}
@media (min-width: 1024px) {
  .contact-form_category {
    top: 15px;
    width: 258px;
  }
}
.contact-form_category.-top-0 {
  top: 0;
}
@media (min-width: 1024px) {
  .form_group_head.contact-form_category label{
    width: 180px;
  }
}
.contact-form_category::before {
  content: "任意";
  line-height: 1;
  font-size: var(--font-size-12);
  color: var(--color-gray04);
  width: 50px;
  padding: 6px 0px;
  text-align: center;
  border: 1px solid var(--color-gray04);
  border-radius: 2px;
}
.contact-form_item.-required .contact-form_category::before {
  content: "必須";
  color: var(--color-red);
  border: 1px solid var(--color-red);
}

.contact-form_item.-required_en .contact-form_category::before {
  content: "*";
  color: var(--color-red);
  border: 0px ;
}
.contact-form_item.-not_required_en .contact-form_category::before {
  content: "";
  border: 0px ;
}

.contact-form_input {
  margin-top: 16px;
  line-height: 1.8;
}
@media (min-width: 1024px) {
  .contact-form_input {
    margin: 0;
    width: 100%;
    max-width: 520px;
  }
}
.contact-form_input input[type=text],
.contact-form_input input[type=tel],
.contact-form_input input[type=email] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 1px;
  border: 1px solid var(--color-gray10);
}
.contact-form_item.is-error .contact-form_input input[type=text],
.contact-form_item.is-error .contact-form_input input[type=tel],
.contact-form_item.is-error .contact-form_input input[type=email] {
  border-color: var(--color-red);
}
.contact-form_input select {
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid var(--color-gray10);
  width: 100%;
  background-color: var(--color-white);
}
.contact-form_item.is-error .contact-form_input select {
  border-color: var(--color-red);
}
.contact-form_input textarea {
  width: 100%;
  padding: 20px 16px;
  border-radius: 4px;
  border: 1px solid var(--color-gray03);
}
.contact-form_item.is-error .contact-form_input textarea {
  border-color: var(--color-red);
}
.contact-form_input .radio {
  font-weight: bold;
}
.contact-form_input .radio input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}
.contact-form_input .radio input:checked + .circle::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: 50%;
}
.contact-form_input .radio input:focus {
  outline: none;
}
.contact-form_input .radio label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sex .contact-form_input div:not([class]) ,
.visa_how .contact-form_input div:not([class]) ,
.hiyou .contact-form_input div:not([class]) ,
.shubetsu .contact-form_input div:not([class]) ,
.pack .contact-form_input div:not([class]) ,
.confirm .contact-form_input div:not([class]) div:not([class]) ,
.home .contact-form_input div:not([class]) ,
.animal_cage1 .contact-form_input div:not([class]) ,
.animal_cage2 .contact-form_input div:not([class]) ,
.animal_cage3 .contact-form_input div:not([class]) ,
.ride_together .contact-form_input div:not([class]) ,
.yuso_purpose .contact-form_input div:not([class]) ,
.payment .contact-form_input div:not([class]) ,
.send .contact-form_input div:not([class]) ,
.visa_state .contact-form_input div:not([class]) ,
.box_destination .contact-form_input div:not([class]) ,
.jp_destination .contact-form_input div:not([class]),
.first_choice_hour .contact-form_input div:not([class]) ,
.second_choice_hour .contact-form_input div:not([class]) ,
.third_choice_hour .contact-form_input div:not([class]) ,
.title .contact-form_input div:not([class]) ,
.assign_num .contact-form_input div:not([class]) ,
.request_contents .contact-form_input div:not([class]) ,
.children_attend .contact-form_input div:not([class]) ,
.travel_kibou .contact-form_input div:not([class]) ,
.hikkoshi_kibou .contact-form_input div:not([class]) {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 769px) {
.pack .contact-form_input div:not([class]),
.confirm .contact-form_input div:not([class]) div:not([class]){
  align-items: normal;
}
}
.sex .contact-form_input div input ,
.visa_how .contact-form_input div input ,
.hiyou .contact-form_input div input ,
.shubetsu .contact-form_input div input ,
.pack .contact-form_input div input ,
.confirm .contact-form_input div input ,
.home .contact-form_input div input ,
.animal_cage1 .contact-form_input div input ,
.animal_cage2 .contact-form_input div input ,
.animal_cage3 .contact-form_input div input ,
.ride_together .contact-form_input div input ,
.yuso_purpose .contact-form_input div input ,
.payment .contact-form_input div input ,
.send .contact-form_input div input ,
.visa_state .contact-form_input div input ,
.box_destination .contact-form_input div input ,
.jp_destination .contact-form_input div input ,
.first_choice_hour .contact-form_input div input ,
.second_choice_hour .contact-form_input div input ,
.third_choice_hour .contact-form_input div input ,
.title .contact-form_input div input ,
.assign_num .contact-form_input div input ,
.request_contents .contact-form_input div input ,
.children_attend .contact-form_input div input ,
.travel_kibou .contact-form_input div input ,
.hikkoshi_kibou .contact-form_input div input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-gray10);
  background-color: var(--color-white);
}
.contact-form_input .radio .circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--color-gray10);
  background-color: var(--color-white);
}
.contact-form_input .radio:not(:first-child) {
  margin-top: 16px;
}
.contact-form_input p {
  margin-top: 10px;
}
.contact-form_input p:not(:first-of-type) {
  margin-top: 6px;
}
.contact-form_input .note {
  font-size: var(--font-size-14);
}
.contact-form_input .error {
  color: var(--color-red);
  font-size: var(--font-size-14);
  font-weight: bold;
}

.contact-form_name {
  display: flex;
  gap: 20px;
}
.contact-form_name .box {
  display: flex;
  gap: 12px;
  align-items: center;
  width: calc((100% - 20px) / 2);
}
@media (max-width: 769px) {
  .contact-form_date .item,
  .contact-form_name .box{
    margin-bottom: 10px;
  }
}
.contact-form_name .box span {
  font-weight: bold;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .contact-form_name.sp_block{
    display: block;
  }
}

@media (min-width: 768px) {
  .contact-form_date {
    display: flex;
    gap: 12px;
    align-items: center;
  }
}
.contact-form_date .select {
  position: relative;
  display: block;
  width: 100%;
}
.contact-form_date .select::before {
  display: block;
  pointer-events: none;
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  background-image: url("/relocation/images/common/ico_chevron.svg");
}
.contact-form_date .box {
  display: flex;
  gap: 16px;
}
@media (min-width: 768px) {
  .contact-form_date .box:first-child {
    width: 47.6923076923%;
  }
}
.contact-form_date .box:last-child {
  margin-top: 16px;
}
@media (min-width: 768px) {
  .contact-form_date .box:last-child {
    margin: 0;
    width: 50%;
  }
}
.contact-form_date .item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(50% - 16px);
}
@media (min-width: 768px) {
  .contact-form_date .item {
    width: 100%;
    gap: 12px;
  }
}
/*.contact-form_date .item span {
  font-weight: bold;
}*/
@media (min-width: 768px) {
  .contact-form_date .year {
    width: 51.6129032258%;
  }
}
@media (min-width: 768px) {
  .contact-form_date .month {
    width: 43.5483870968%;
  }
}
@media (min-width: 768px) {
  .contact-form_date .day {
    width: 41.5384615385%;
  }
}
@media (min-width: 768px) {
  .contact-form_date .time {
    width: 53.8461538462%;
  }
}

.contact-form_select {
  position: relative;
  width: 280px;
}
.contact-form_select::before {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
  width: 24px;
  height: 24px;
  top: 50%;
  right: 16px;
  transform: translateY(-50%) rotate(90deg);
  background-image: url("/relocation/images/common/ico_chevron.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.contact-form_postal {
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-form_postal input {
  max-width: 160px;
}
.contact-form_postal span {
  width: 16px;
  height: 2px;
  flex-shrink: 0;
  background-color: var(--color-black);
}

.contact-form_button {
  padding: 48px 16px 80px;
  text-align: center;
}
@media (min-width: 768px) {
  .contact-form_button {
    padding: 64px 16px 120px;
  }
}
.contact-form_button .note {
  font-size: var(--font-size-14);
  margin-top: 20px;
}

.contact-confirm {
  max-width: 916px;
  margin: 0 auto;
}

.contact-confirm_list {
  margin-top: 32px;
}

.contact-confirm_item {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-gray03);
}
.contact-confirm_item:first-child {
  border-top: 1px solid var(--color-gray03);
}
@media (min-width: 768px) {
  .contact-confirm_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 24px 0;
  }
}

.contact-confirm_contents {
  background-color: var(--color-gray09);
  padding: 48px 16px;
}
@media (min-width: 768px) {
  .contact-confirm_contents {
    border-radius: 4px;
    padding: 64px;
  }
}
.contact-confirm_contents:not(:first-child) {
  margin-top: 32px;
}

.contact-confirm_category {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 12px;
  flex-shrink: 0;
  min-width: 206px;
}
@media (min-width: 1024px) {
  .contact-confirm_category {
    width: 206px;
  }
}
.contact-confirm_category::before {
  content: "任意";
  width: 52px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-size: var(--font-size-12);
  color: var(--color-gray04);
  padding: 6px 12px;
  border: 1px solid var(--color-gray04);
  border-radius: 2px;
}
.contact-confirm_item.-required .contact-confirm_category::before {
  content: "必須";
  color: var(--color-red);
  border: 1px solid var(--color-red);
}
.contact-confirm_item.-required_en .contact-confirm_category::before {
  content: "*";
  color: var(--color-red);
  border: 0px;
}
.contact-confirm_item.-not_required_en .contact-confirm_category::before {
  content: "";
  border: 0px;
}

.contact-confirm_detail {
  margin-top: 20px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .contact-confirm_detail {
    margin: 0;
    width: 100%;
    max-width: 552px;
  }
}

.contact-confirm_box {
  padding: 48px 16px 80px;
}
@media (min-width: 768px) {
  .contact-confirm_box {
    padding: 64px 16px 120px;
  }
}
.contact-confirm_box .description {
  line-height: 1.8;
  text-align: center;
  margin-top: 28px;
}

.contact-auth {
  max-width: 343px;
  margin: 0 auto;
}

.contact-buttonGroup {
  margin-top: 44px;
}
@media (min-width: 768px) {
  .contact-buttonGroup {
    margin-top: 60px;
  }
}
.contact-buttonGroup .note {
  text-align: center;
  font-size: var(--font-size-14);
  margin-top: 24px;
}

.contact-buttonGroup_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .contact-buttonGroup_inner {
    justify-content: center;
    gap: 32px;
  }
}
.contact-buttonGroup_inner #backBtn {
  order: 2;
}

.contact-complete {
  background-color: var(--color-gray09);
  max-width: 916px;
  margin: 0 auto;
  padding: 64px 16px;
}
@media (min-width: 768px) {
  .contact-complete {
    padding: 80px 16px;
    border-radius: 4px;
  }
}

.contact-complete_heading {
  text-align: center;
  font-size: var(--font-size-24);
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .contact-complete_heading {
    font-size: var(--font-size-28);
  }
}

.contact-complete_description {
  margin-top: 32px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .contact-complete_description {
    text-align: center;
    margin-top: 48px;
  }
}

.contact-complete_note {
  margin-top: 24px;
  font-size: var(--font-size-14);
  line-height: 1.8;
}
@media (min-width: 768px) {
  .contact-complete_note {
    text-align: center;
    margin-top: 32px;
  }
}

.contact_complete_button {
  margin-top: 48px;
  text-align: center;
}

.contact-complete_wrapper {
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .contact-complete_wrapper {
    padding-bottom: 120px;
  }
}

@media (max-width: 769px) {
  .contact-form_name .box{

  }
  .animal_cage_size1 .contact-form_name,
  .animal_cage_size2 .contact-form_name,
  .animal_cage_size3 .contact-form_name{
      display: block;
  }
  .animal_cage_size1 .contact-form_name .box,
  .animal_cage_size2 .contact-form_name .box,
  .animal_cage_size3 .contact-form_name .box{
    width: 100%;
  }
  .animal_cage_size1 .contact-form_name .box #animal_cage_size1_1,
  .animal_cage_size1 .contact-form_name .box #animal_cage_size1_2,
  .animal_cage_size2 .contact-form_name .box #animal_cage_size2_1,
  .animal_cage_size2 .contact-form_name .box #animal_cage_size2_2,
  .animal_cage_size3 .contact-form_name .box #animal_cage_size3_1,
  .animal_cage_size3 .contact-form_name .box #animal_cage_size3_2{
    margin-left: 16px;
  }
}

.error_input{
  border-style:solid !important;
  border-color:var(--color-red) !important;
  border-width:1px !important;
}
@media (min-width: 768px) {
  .error_input{
    border-width:2px !important;
  }
}
.error_msg{
  font-size: 15px;
  margin: 10px 0px 0px 0px;
  color: var(--color-red);
}
@media (min-width: 768px) {
  .error_msg{
    font-size: 17px;
    margin: 10px 0px 0px 15px;
  }
}
/*notform*/