@charset 'UTF-8';

/* 下層ページメインビジュアル */
.page_mv {
  background-image: url(../../image/flow_mv.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 施工流れ */
.flow {
  margin-right: auto;
  margin-left: auto;
  max-width: 1240px;
  width: 75%;
  border: 1px solid #414141;
  border-radius: 20px;
}

.flow_container {
  margin-right: auto;
  margin-left: auto;
  padding-top: min(11.11vw, 120px);
  padding-bottom: min(11.11vw, 120px);
  max-width: 920px;
  width: 85%;
}

.flow_contents {
  margin-top: min(11.11vw, 120px);
}

.flow_contents:first-child {
  margin-top: 0;
}

.flow_imageicon {
  margin-bottom: min(-.55vw, -6px);
  width: 45%;
}

.flow_mainbox {
  padding-top: min(2.77vw, 30px);
  padding-right: min(11.11vw, 120px);
  padding-bottom: min(6.01vw, 65px);
  padding-left: min(11.11vw, 120px);
  max-width: 920px;
  width: 100%;
  background-color: #f49132;
  color: #fff;
}

.flow_title {
  text-align: center;
  text-decoration: underline 1px solid #fff;
  text-underline-offset: .5em;
  font-weight: 700;
  font-size: min(2.96vw, 32px);
}

.flow_maintext {
  margin-top: min(2.77vw, 120px);
  font-size: min(1.48vw, 16px);
}

.flow_subbox {
  margin-top: min(7.40vw, 70px);
  padding-top: min(2.77vw, 30px);
  padding-right: min(4.16vw, 45px);
  padding-bottom: min(2.77vw, 30px);
  padding-left: min(4.16vw, 45px);
  max-width: 76%;
  width: 100%;
  border: 3px solid #f49132;
  border-radius: 5px;
  background-color: #fff;
}

.flow_subtitle {
  color: #f49132;
  font-weight: 700;
  font-size: min(1.85vw, 20px);
}

.flow_subtext {
  margin-top: min(1.38vw, 15px);
  font-weight: 500;
  font-size: min(1.48vw, 16px);
}

.flow_maru {
  width: min(12.87vw, 139px);
  border-radius: 50%;
  background-color: #f49132;
  color: #fff;
  text-align: center;
  font-size: min(4.81vw, 52px);
  font-family: itim;
  line-height: min(12.03vw, 130px);
}

.flow_group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow_box {
  margin-top: min(8.33vw, 90px);
  margin-right: auto;
  margin-left: auto;
  width: 76%;
  color: #f49132;
}

.flow_lasttext {
  font-weight: 500;
  font-size: min(1.85vw, 20px);
}

/* スマホ対応(施工流れ) */
@media (max-width: 768px) {
  .flow {
    width: 90%;
    border: none;
  }

  .flow_container {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
  }

  .flow_imageicon {
    margin-bottom: -.5vw;
  }

  .flow_mainbox {
    padding-right: 5%;
    padding-left: 5%;
  }

  .flow_subbox {
    margin-top: 1.33vw;
  }

  .flow_group {
    flex-direction: column;
    margin-top: 4vw;
  }

  .flow_title {
    /* 13px */
    font-size: 3.46vw;
  }

  .flow_maintext {
    /* 10px */
    font-size: 2.66vw;
  }

  .flow_subtitle {
    /* 12px */
    font-size: 3.2vw;
  }

  .flow_subtext {
    /* 10px */
    font-size: 2.66vw;
  }

  .flow_lasttext {
    /* 12px */
    font-size: 3.2vw;
  }
}