@charset "UTF-8";
/*
 * 17-contact.css … お問い合わせの案内
 * css/ のファイルは番号の順に全ページで読み込む（functions.php）。後のファイルが優先されるので、番号（順番）を変えないこと
 */

/* ---------------------------------------
    お問い合わせ部分
--------------------------------------- */
section.contact {
  padding: 2.5em 0 4.5em;
}
section.contact h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
section.contact h2 span {
  color: #6ED434;
}
section.contact .row {
  align-items: stretch;
}
section.contact .row div {
  width: 33.3%;
  padding: 20px;
  border-right: 1px dashed #ccc;
  text-align: center;
}
section.contact .row div:first-child {
  border-left: 1px dashed #ccc;
}
section.contact .row div h3 {
  font-size: 22px;
  color: #6BC512;
}
section.contact .row div h4 {
  font-size: 20px;
  margin-bottom: 1em;
  color: #999;
}
section.contact .row div h4:before {
  font-family: "fontello";
  margin-right: 0.5em;
  font-weight: normal;
}
section.contact .row div:nth-of-type(1) h4:before {
  content: "\e835";
}
section.contact .row div:nth-of-type(2) h4:before {
  content: "\e808";
}
section.contact .row div:nth-of-type(3) h4:before {
  content: "\e841";
}
section.contact .row div p {
  font-size: 15px;
}
section.contact .row div p.tel {
  font-size: 30px;
  font-family: var(--font);
  font-weight: 600;
  margin-top: 28px;
  color: #6ED434;
}
section.contact .row div p.bt {
  margin-top: 20px;
  font-size: 18px;
}
@media screen and (max-width: 800px) {
  section.contact .row div {
    width: auto;
    border: none;
    padding: 0;
    margin: 35px 0;
  }
  section.contact .row div:first-child {
    border-left: none;
  }
/* 左右に線が伸びる */
  section.contact .row div h4 {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    margin: 50px 0 0.6em 0;
    font-weight: normal;
  }
  section.contact .row div h4:after, section.contact .row div h4:before {
    border-top: 1px solid;
    border-color: #999;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
    content: "" !important;
  }
  section.contact .row div h4:before {
    margin-right: 0.5em;
  }
  section.contact .row div h4:after {
    margin-left: 0.5em;
    flex-grow: 1; /* ここで線の長さの比率を変えている */
  }
}