/*-------------------------------
---.contact_intro
-------------------------------*/

.contact_intro {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.contact_intro .greeting {
  font-size: var(--font-size-xxxl);
  font-weight: 500;
  text-align: center;
  margin-bottom: 6rem;
}

.contact_intro .contact_list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-gap: 1rem 3.5rem;
  justify-content: center;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 6rem;
}

.contact_intro .contact_list dt,
.contact_intro .contact_list dd {
  display: inline-block;
  vertical-align: middle;
}

.contact_intro .contact_list dt {
  font-size: var(--font-size-xxl);
  font-weight: 500;
  color: var(--main-color);
  margin-right: 1rem;
}

.contact_intro .contact_list dt::before {
  content: '\f095';
  font-weight: bold;
  margin-right: 0.5rem;
}

.contact_intro .contact_list dd a {
  font-size: var(--font-size-xxxl);
  font-weight: 500;
  color: var(--main-color);
  text-decoration: none;

}

.contact_intro .cautions_wrap dt {
  margin-bottom: 1.5rem;
}

.contact_intro .cautions_wrap .cautions::before {
  content: '\0ff0a';
  color: #FF0000;
  margin-right: 1rem;
}


/*-------------------------------
---.document_info
-------------------------------*/

.document_info {
  padding: 6rem;
}

.document_info .document_list {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: center;
  grid-gap: 3rem 6rem;
  margin-top: 6rem;
}

.document_info .document_list .item {
  display: grid;
  grid-auto-rows: calc(300px * 1.414) auto;
  grid-gap: 1rem;
}

.document_info .document_list .item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 1px #a9a9a9);
}

.document_info .document_list .item .document_name {
  text-align: center;
  line-height: 1.4;
}



/*-------------------------------
---.form_contents
-------------------------------*/

.form_contents {
  display: grid;
  grid-auto-rows: auto;
  margin-bottom: 12rem;
}

.form_contents #contact_switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 2px solid var(--main-color);
}

.form_contents #contact_switch li {
  font-size: var(--font-size-xxl);
  font-weight: 500;
  color: #AFAFAF;
  letter-spacing: 0.05em;
  text-align: center;
  border: 1px solid #AFAFAF;
  padding: 1.5rem;
}

.form_contents #contact_switch li.current {
  color: #fff;
  border-color: var(--main-color);
  background-color: var(--main-color);
}

.form_contents .tab_contents {
  display: none;
}

.form_contents .tab_contents.show {
  display: block;
}

.form_contents #request_contents .input_area {
  display: initial;
}

.form_contents #request_contents .input_area .layout_group {
  display: grid;
  grid-template-columns: auto minmax(45%, 1fr);
  grid-gap: .2rem 0;
  margin-bottom: 0.2rem;
}

.form_contents #request_contents .input_area .key.send_dm {
  padding: 0 6rem;
}

.form_contents #request_contents .input_area #building_age {
  margin-right: 1em;
}

.form_contents #request_contents .input_area #building_age input {
  width: 4em;
  margin: 0 .5rem;
}

.form_contents #request_contents .input_area .remarks {
  display: grid;
  grid-template-columns: 1fr;
}

.form_contents #request_contents .input_area .remarks .input_wrap {
  padding: 0 6rem 2.5rem 6rem;
}

.form_contents .tab_contents .message {
  margin-top: 3rem;
}

.form_contents #inquiry_contents .message {
  text-align: center;
}