@charset "utf-8";
/* CSS Document */
/*==========================================
八木建設のご案内
===========================================*/
/*=== 多用するスタイル ===*/
.introduction .green_text {
   font-size: 2.4rem;
   font-weight: normal;
   color: #fff;
   line-height: 40px;
   letter-spacing: 0.4em;
   margin: 0 0 25px 0;
   padding: 0 15px;
   display: inline-block;
   background-color: #007754;
}
.introduction .green_text.tb {
   display: none;
}
.introduction .white_text {
   font-weight: normal;
   color: #007754;
   letter-spacing: 0.2em;
   display: inline-block;
   background-color: #fff;
   padding: 0 5px;
}
.introduction .text_block {
   margin-bottom: 30px;
   text-align: center;
}
.introduction .ttl_txt {
   text-shadow: 0px 0px 5px #000000;
   color: #fff;
   font-size: 2.4rem;
   background-color: inherit;
   padding: 0;
}
.introduction .text {
   font-size: 20px;
   line-height: 2;
}
.introduction .first {
   margin-bottom: 30px;
}
@media (max-width: 960px) {
   .introduction .text {
      font-size: 16px;
   }
}
@media (max-width: 768px) {
   .introduction .text_block {
      margin: 35px auto 40px;
      padding: 0 2.5%;
      text-align: left;
   }
   .introduction .ttl_txt {
      text-shadow: none;
      color: #007754;
      font-size: 2.4rem;
      background-color: inherit;
      padding: 0;
   }
}
/*=== 共通部分　===*/
body {
   font-family: "Noto Sans JP", 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif;
}
.fb {
   font-weight: bold;
}
.content {
   margin: 0 auto 60px;
}
.content_inner {
   max-width: 1190px;
   margin: 0 auto;
   padding: 0 25px;
}
.head-3 {
   font-size: 30px;
   line-height: 1.3;
   font-weight: bold;
   text-align: center;
   color: #fff;
   background-color: #007754;
   display: flex;
   justify-content: center;
   align-items: center;
}
.head-3 .num {
   font-size: 100px;
   margin-right: 2%;
}
.head-3 .title {
   display: flex;
   flex-wrap: wrap;
}
.textBox {
   width: 100%;
   padding: 40px;
}
.media {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 10px;
}
.media_textBox {
   width: 45%;
}
.media_imgBox {
   width: 53%;
}
.media_imgBox img {
   width: 100%;
}
.imgBox {
   display: flex;
}
.imgBox_img {
   width: 50%;
}
.imgBox_img img {
   width: 100%;
}
.imgBox_img p {
   line-height: 1;
   text-align: right;
}
@media (max-width: 960px) {
   .textBox {
      padding: 20px;
   }
   .media {
      align-items: flex-start;
   }
}
@media (max-width: 768px) {
   .content_inner {
      padding: 0 2.5%;
   }
   .head-3 {
      font-size: 24px;
      padding: 10px;
   }
   .head-3 .num {
      font-size: 60px;
   }
   .imgBox_img p {
      font-size: 14px;
   }
}
@media (max-width: 576px) {
   .content {
      padding: 0 2.5%;
   }
   .content_inner {
      padding: 0;
   }
   .head-3 {
      font-size: 20px;
   }
   .head-3 .num {
      font-size: 50px;
   }
   .textBox {
      background-color: rgba(255, 255, 255, 0.9);
      margin-bottom: 10px;
   }
   .media {
      padding-top: 0;
      flex-direction: column;
   }
   .media_textBox {
      width: 100%;
      margin-bottom: 10px;
      /*背景の白無くす場合padding: 0 10px;*/
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.9);
      order: -1;
   }
   .media_imgBox {
      width: 100%;
      /* margin-bottom: 10px;*/
   }
   .imgBox {
      display: block;
   }
   .imgBox_img {
      width: 100%;
   }
   .imgBox_img p {
      margin-bottom: 20px;
   }
}
/*=== introduction ===*/

/*iframe*/
iframe{
   max-width:1140px;
   width:100%;
   height:auto;
   aspect-ratio: 16 / 9;
   margin:auto;
}


@media (max-width: 768px) {
   .introduction .ttl_area {
      padding: 10px 0 80px;
   }
}
/*=== ブロック_01 ===*/
.introduction .section01 {
   position: relative;
   margin: 0 0 50px 0;
}
.introduction .section01 .text_box_wrap {
   position: absolute;
   top: 5%;
   right: 5%;
}
@media screen and (max-width: 1080px) {
   .introduction .section01 .text_box_wrap {
      top: 3%;
      right: 2%;
   }
   .introduction .ttl_txt {
      margin-bottom: 10px;
   }
}
@media screen and (max-width: 930px) {
   .introduction .ttl_txt {
      font-size: 1.8rem;
   }
}
@media screen and (max-width: 768px) {
   .introduction .ttl_txt {
      font-size: 2.4rem;
   }
}
.introduction .section01 .text_box {
   z-index: 2;
   width: 100%;
   max-width: 900px;
   margin: 0 0 0 auto;
   padding: 0 15px 0 0;
   text-align: right;
}
.introduction .section01 .text_box .white_text {
   font-size: 3.6rem;
   line-height: 45px;
   margin: 0 0 20px 0;
}
.introduction .section01 .img_box {
   position: relative;
   width: 100%;
   text-align: center;
}
@media screen and (max-width: 930px) {
   .introduction .section01 .text_box {
      max-width: 60%;
   }
   .introduction .section01 .text_box .white_text {
      font-size: 2.4rem;
      line-height: 36px;
      margin: 0 0 10px 0;
   }
}
@media screen and (max-width: 768px) {
   .introduction .section01 .text_box_wrap {
      position: inherit;
      top: 0;
      right: 0;
   }
   .introduction .green_text.pc {
      display: none;
   }
   .introduction .green_text.tb {
      display: inline-block;
      width: 100%;
      text-align: center;
   }
   .introduction .section01 .text_box {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: none;
      margin: 3% 0 0;
      padding: 0;
   }
   .introduction .section01 .img_box {
      position: relative;
      width: 100%;
   }
   .introduction .section01 .img_box img {
      vertical-align: bottom;
   }
   .introduction .section01 .text_box .white_text {
      font-size: 2.4rem;
      display: block;
      text-align: center;
   }
}
@media screen and (max-width: 480px) {
   .introduction .green_text.tb {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 1.6rem;
      line-height: 20px;
      margin: 0 0 10px 0;
   }
   .introduction .section01 .text_box .white_text {
      font-size: 2rem;
      line-height: 25px;
      margin: 0 0 10px 0;
   }
}
/*=== ブロック_02 ===*/
/*.introduction .section02 .boxWrap {
  position: relative;
  padding-top: 30px;
}
.introduction .section02 .textBox_area {
  position: relative;
  z-index: 2;
  width: 630px;
}
.introduction .section02 .img_box {
  position: absolute;
  top: 0;
  right: 0;
  width: 580px;
}
@media screen and (max-width: 768px) {
  .introduction .section02 .textBox_area {
    width: 100%;
    margin-bottom: 30px;
  }
  .introduction .section02 .img_box {
    position: relative;
    width: 100%;
  }
}*/
.introduction .section02 .btn01 {
   width: 100%;
   max-width: 310px;
   margin-bottom: 40px;
   margin-left: auto;
}

/*=== ブロック_03 ===*/
.introduction .section03 .flexBox {
   display: flex;
   justify-content: space-between;
   padding: 40px;
   background-color: #fff;
}
.introduction .section03 .flexBox_item01 {
   width: 68%;
}
.introduction .section03 .flexBox_item02 {
   width: 30%;
   min-width: 280px;
   padding-left: 2%;
}
.introduction .section03 .flexBox_img {
   width: 60%;
   margin: 0 auto 10px;
}
.introduction .section03 .link_wrap01 {
   width: 100%;
   max-width: 310px;
   margin: 20px 25px 0 auto;
}
.introduction .section03 .link_wrap02 {
   width: 100%;
   max-width: 310px;
   margin: 30px 25px 0 auto;
}
@media (max-width: 768px) {
   .introduction .section03 .flexBox_item01 {
      width: 100%;
   }
   .introduction .section03 .flexBox_img {
      width: 50%;
      min-width: 260px;
      margin: 0 auto 20px;
   }
   .introduction .section03 .link_wrap01 {
      width: 95%;
      max-width: none;
      margin: 20px auto 0 auto;
   }
   .introduction .section03 .link_wrap02 {
      width: 95%;
      max-width: none;
      margin: 30px auto 0 auto;
   }
}
@media (max-width: 768px) {
   .introduction .section03 .flexBox {
      padding: 20px;
   }
}
/*=== mark ===*/
.introduction .mark {
   width: 100%;
   max-width: 990px;
   padding: 0 25px;
   margin: 0 auto 100px;
}
.introduction .mark .row {
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}
.introduction .mark .row .img_box {
   width: 191px;
}
.introduction .mark .row p {
   max-width: 650px;
   width: calc(100% - 200px);
}
@media screen and (max-width: 480px) {
   .introduction .mark {
      margin: 0 auto 70px;
   }
   .introduction .mark .row .img_box {
      width: 100%;
      text-align: center;
   }
   .introduction .mark .row p {
      width: 100%;
      margin: 0 0 40px 0;
   }
}
/*=== ブロック_04 ===*/
/*.introduction .section04 .imgBox {
    position: relative;
    padding-top: 20px;
}
.introduction .section04 .imgBox_img-01 {
    position: relative;
    z-index: 10;
}
.introduction .section04 .imgBox_img-02 {
    width: 55%;
    position: absolute;
    top: 0;
    right: 0;
}*/
.introduction .section04 .btn01 {
   width: 100%;
   max-width: 310px;
   margin-bottom: 40px;
   margin-left: auto;
}
@media (max-width: 576px) {
   .introduction .section04 .imgBox {
      padding-top: 0;
   }
   .introduction .section04 .imgBox_img-02 {
      width: 100%;
      position: relative;
   }
}
/*=== ブロック_05 ===*/
.introduction .section05 .link_wrap {
   width: 310px;
   margin: 0 auto;
   padding-top: 20px;
}
.introduction .section05 .btn01 {
   width: 100%;
}
@media screen and (max-width: 768px) {
   .introduction .section05 .link_wrap {
      width: 95%;
   }
}
/*=== ブロック_06 ===*/