@charset "UTF-8";
img, svg {
  max-width: 100%;
}

.hojokin {
  color: #333;
  position: relative;
  font-size: 1rem;
  line-height: 1.75;
}

@media (max-width: 1000px) {
  .hojokin {
    font-size: 0.8125rem;
  }
}

@media (max-width: 600px) {
  .hojokin {
    font-size: 0.8125rem;
  }
}

.hojokin * {
  box-sizing: border-box;
}

.hojokin img {
  vertical-align: bottom;
}

.hojokin_content {
  box-sizing: border-box;
}

@media all and (min-width: 1600px) {
  .hojokin_content {
    padding: 0 133px !important;
  }
}

@media all and (min-width: 1000px) {
  .hojokin_content {
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 8.3%;
  }
}

@media (min-width: 600px) and (max-width: 999px) {
  .hojokin_content {
    padding: 0 6%;
  }
}

@media (min-width: 414px) and (max-width: 599px) {
  .hojokin_content {
    padding: 0 6%;
  }
}

.hojokin_title {
  background-color: #68c2d3;
}

.hojokin_title h1 {
  padding: 0.2em 0 0.1em;
  background-color: #1f4e79;
  color: #fff;
}

.hojokin_title h1 span {
  display: inline-block;
}

.hojokin_title .hojokin_title_content {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

@media (max-width: 640px) {
  .hojokin_title .hojokin_title_content {
    flex-direction: column-reverse;
  }
}

.hojokin_title .hojokin_title_text {
  padding: 2vw 1vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (max-width: 640px) {
  .hojokin_title .hojokin_title_text {
    width: 100%;
    padding-bottom: 4vw;
  }
}

.hojokin_title .hojokin_title_info {
  background-color: #38abc2;
  color: #fff;
  padding: 1em 1em 0;
  margin-bottom: 0.8vw;
}

@media (max-width: 640px) {
  .hojokin_title .hojokin_title_info {
    margin-bottom: 3vw;
  }
}

.hojokin_title .hojokin_title_info p {
  margin-bottom: 0.8em;
  line-height: 1.4;
}

.hojokin_title .hojokin_title_info p.hojokin_title_info_tel {
  margin-left: 3em;
  text-indent: -3em;
}

.hojokin_title .hojokin_title_info p.hojokin_title_info_mail {
  margin-left: 4em;
  text-indent: -4em;
  word-break: break-all;
}

.hojokin_title .hojokin_title_info p.hojokin_title_info_mail span {
  white-space: nowrap;
}

.hojokin_title .hofokin_title_note {
  padding: 0 1em;
  color: #f00;
}

@media (max-width: 640px) {
  .hojokin_title .hofokin_title_note {
    margin-bottom: 3vw;
  }
}

.hojokin_title .hofokin_title_note p {
  position: relative;
  margin-bottom: 0.8vw;
  padding-left: 1.2em;
}

.hojokin_title .hofokin_title_note p::before {
  content: "★";
  width: 1.2em;
  height: 1em;
  position: absolute;
  left: 0;
}

@media (max-width: 640px) {
  .hojokin_title .hofokin_title_btn {
    text-align: center;
  }
}

.hojokin_title .hojokin_title_img {
  max-width: 50%;
}

@media (max-width: 640px) {
  .hojokin_title .hojokin_title_img {
    width: 100%;
    max-width: unset;
  }
}

.hojokin_content h2 {
  position: relative;
}

.hojokin_content h2 span {
  display: inline-block;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding-right: 1em;
}

.hojokin_content h2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  left: 0;
  top: 50%;
}

.hojokin_content .column_flex {
  display: flex;
}

.hojokin_content .column_flex .column20 {
  width: 20%;
}

.hojokin_content .column_flex .column30 {
  width: 30%;
}

.hojokin_content .column_flex .column40 {
  width: 40%;
}

.hojokin_content .column_flex .column60 {
  width: 60%;
}

.hojokin_content .column_flex .column70 {
  width: 70%;
}

.hojokin_content .column_flex .column80 {
  width: 80%;
}

.hojokin_content .tel {
  position: relative;
  color: #ff5050;
  line-height: 2;
  padding-left: 2em;
}

.hojokin_content .tel::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  background: url(/hojokin-soudan/assets/img/icon_tel.jpg) no-repeat 0 0;
  background-size: cover;
}

.hojokin_content .tel span {
  display: inline-block;
  line-height: 1.4;
}

.hojokin_content .mail {
  position: relative;
  color: #ff5050;
  line-height: 2;
  padding-left: 2em;
}

.hojokin_content .mail::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  background: url(/hojokin-soudan/assets/img/icon_mail.jpg);
  background-size: cover;
}

.hojokin_content .mail span {
  display: inline-block;
  line-height: 1.4;
}

.hojokin_content .hojokin_content01 {
  align-items: center;
}

.hojokin_content .hojokin_content01 p span {
  display: inline-block;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_content01 {
    display: block !important;
  }
  .hojokin_content .hojokin_content01 > div {
    margin: auto;
  }
  .hojokin_content .hojokin_content01 > div:last-child {
    width: 100% !important;
  }
}

.hojokin_content .hojokin_content02 > div {
  padding-left: 10%;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_content02 > div {
    padding-left: 4%;
  }
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_content03 {
    display: block !important;
  }
}

.hojokin_content .hojokin_content03 > div {
  padding-left: 10%;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_content03 > div:last-child {
    width: 100% !important;
    padding-left: 0;
    text-align: center;
  }
}

.hojokin_content .hojokin_balloon {
  position: relative;
  padding: 1em;
  background-color: #f5f9fd;
  border-radius: 1em;
}

.hojokin_content .hojokin_balloon::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: 4.5em;
  left: -2em;
  border: 12px solid transparent;
  border-right: 2em solid #f5f9fd;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}

.hojokin_content .hojokin_cta {
  width: 80%;
  max-width: 900px;
  margin: auto;
}

@media (max-width: 1000px) {
  .hojokin_content .hojokin_cta {
    width: 100%;
  }
}

.hojokin_content .hojokin_cta h3 {
  background-color: #1f4e79;
  color: #fff;
  line-height: 2;
  padding: 5px 10px;
}

.hojokin_content .hojokin_cta h3 > span {
  position: relative;
  display: inline-block;
  padding-left: 2em;
  line-height: 1.4;
}

.hojokin_content .hojokin_cta h3 > span::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.2em;
  position: absolute;
  top: 50%;
  left: 0;
  background: url(/hojokin-soudan/assets/img/icon_download.png) no-repeat center center;
  background-size: 100% auto;
  transform: translateY(-50%);
}

.hojokin_content .hojokin_cta .hojokin_cta_content {
  padding: 4vw 2vw;
  align-items: center;
  background-color: #b4e1ea;
}

@media (min-width: 1201px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content {
    padding: 2vw;
  }
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content {
    display: block;
  }
  .hojokin_content .hojokin_cta .hojokin_cta_content > div {
    width: 100%;
    box-sizing: border-box;
  }
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img {
  position: relative;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img {
    text-align: center;
  }
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img img {
  width: 80%;
  margin-left: 10%;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img img {
    width: 50%;
    max-width: 50vw;
    margin: 0;
  }
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img .hojokin_cta_icon {
  position: absolute;
  right: 0;
  bottom: -1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 6em;
  height: 6em;
  border-radius: 50%;
  background-color: #fc6804;
  color: #fff;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img .hojokin_cta_icon {
    right: 6vw;
  }
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_img .hojokin_cta_icon > span {
  display: inline-block;
  line-height: 1.2;
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_text {
  padding: 0 4vw;
}

@media (max-width: 640px) {
  .hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_text {
    padding-top: 6vw;
  }
}

.hojokin_content .hojokin_cta .hojokin_cta_content .hojokin_cta_text h4 {
  color: #1f4e79;
}

.hofokin_btn a {
  padding: 0.72em 2em 0.7em;
  color: #fc6804;
  background-color: #ffc000;
  border: 2px solid #ffc000;
  border-radius: 1.8em;
  font-size: 100%;
}

.hofokin_btn a:hover {
  background-color: #fff;
  color: #fc6804;
}