/**********************************************************************/
/* レイアウト
/**********************************************************************/

section.contact .wrapper{
  gap: 10vw;
}
section.contact .wrapper .bodying{
  flex: 1;
}
section.contact .wrapper .bodying .description{
  margin-bottom: 1em;
}
section.contact .wrapper .bodying table{
  width: 100%;
}
@media screen and (max-width: 1280px){
  section.contact .wrapper{
    flex-direction: column;
    align-items: stretch;
    gap: 2em;
  }
}
@media screen and (max-width: 520px){
  section.contact .wrapper .heading .title{
    font-size: 7vw;
  }
}

/**********************************************************************/
/* スタイリング
/**********************************************************************/

section.contact .form th .label{
  padding: 1em 0;
}
section.contact .form table{
  border-collapse: separate;
  border-spacing: 0 2.75em;
}
section.contact .form th{
  width: 20em;
}
section.contact .form td{

}
section.contact .form th .label .hint{
  color: #808080;
  padding-right: 1.5em;
  border-right: 1px solid var(--c_border);
  margin-right: 1.5em;
}
section.contact .form th .label .hint.required{
  color: #AF5C5C;
}
@media screen and (max-width: 860px){
  section.contact .form table{
    border-collapse: separate;
    border-spacing: 0 1em;
  }
  section.contact .form th,
  section.contact .form td{
    display: block;
  }
  section.contact .form th{
    width: 100%;
    box-sizing: border-box;
  }
  section.contact .form th .label{
    padding: 1em 0 .5em 0;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
  }
  section.contact .form th .label .hint{
    color: #808080;
    padding-right: 0;
    border-right: 0;
    margin-right: 0;
    padding-left: 1em;
    transform: scale(.9);
  }
}
@media screen and (max-width: 520px){
  section.contact .form table{
    border-spacing: 0 .5em;
  }
}

/*--------------------------------------------------------------------*/
/* privacy */

section.contact .actions .privacy .comment{
  margin-top: 1em;
}
section.contact .actions .privacy .comment a{
  text-decoration: underline;
}
@media screen and (max-width: 860px){
  section.contact .actions .privacy{
    margin-top: 2em;
  }
}

/*--------------------------------------------------------------------*/
/* action */

section.contact .actions .action{
  margin: 3em 0 2em 0;
}
section.contact .actions .action input[type="submit"]{
  background-color: #262A19;
  border-radius: 10em;
  color: #fff;
  font-weight: 500;
  width: 355px;
  max-width: 100%;
  box-sizing: border-box;
}

/*--------------------------------------------------------------------*/
/* annotation */

section.contact .actions .annotation{
  color: #BBBBBB;
}

/**********************************************************************/
/* フォームコントロール
/**********************************************************************/

section.contact input[type="text"],
section.contact input[type="email"],
section.contact input[type="tel"],
section.contact select,
section.contact textarea{
  width: 100%;
}

/**********************************************************************/
/* 完了ページ
/**********************************************************************/

section.complete{
  --p_spacer: calc(var(--p_spacer_base) * 4 / 6);
}
section.complete .heading{
  padding-bottom: 3em;
}
section.complete .heading .icon img{
  max-width: 15vw;
  height: auto;
}
section.complete .heading .title{
  margin-block: .75em 0;
}
section.complete .heading .date{
  color: #BBBBBB;
}
section.complete .bodying .description{
  max-width: 33em;
  padding-top: 2em;
  border-top: 1px solid var(--c_border);
}
section.complete .bodying .action{
  margin-top: 3.5em;
}
section.complete .bodying .action a{
  display: inline-block;
  padding-inline: 1.5em 1em;
  background-color: #EEEEEE;
  border-radius: 10em;
}
section.complete .bodying .action a .button.common.arrow .icon{
  transform: translate(0, 10%);
  background-color: #262A19;
}
@media screen and (max-width: 860px){
  section.complete .heading{
    padding-top: 8vw;
  }
}