/* History Section Styles */

.journey-section .container {
    margin: 0 calc(50% - 50vw);
	width: 100vw;
    max-width: 100%;
  }

.third-section.journey-section .container {
    padding: 0;
  }

.third-section.journey-section {
    padding-top: 6.25rem;
  }

  /* 記事のレイアウト余白感の調整 */
.history-section.first {
    padding:0 6.25rem ;
  }

  .history-section.second {
    padding:0 3rem ;
  }

  .history-section.third {
    padding-left: 6.25rem;
  }

  .history-section.forth {
    padding:0  6.25rem;
  }
  
  .history-heading {
    text-align: center;
    font-family: "Zen Old Mincho", serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 3.3125rem; /* 165.625% */
    letter-spacing: 0.08rem;
    padding: 0 2.2rem;
  }

  .history-heading span {
    display: block;
  }
  
  .history-content {
    margin-top: 10rem;
    display: flex;
    gap: 6rem;
    align-items: flex-start;
  }

  .history-image-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: .6rem;
    width: 100%;
    aspect-ratio: 6 / 4;
  }


  
  .history-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.2);
    opacity: .55;
  }
  .history-image.active {
    animation: photo-anime 2s forwards;
  }


  @keyframes photo-anime {
    0% {
        transform: scale(1.2);
        opacity: .55;
    }
    100% {

        transform: scale(1.0);
        opacity: 1;
    }
    
  }


  .history-image-content {
    position: relative;
  }
  .history-image-content::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }


  /* 創業　記事 */
  .history-image-content.sougyo::after {
    top: -10%;
    left: -7%;
    width: 100%;
    height: 100%;
    background: rgba(0, 84, 125, 0.20);
  }

  .history-content.sougyo .history-image-content {
    width: 40%;
  }


  /*　産廃業界参入 記事 */

  .history-image-content.development::after {
    bottom: -15%;
    right: -8%;
    width: 40%;
    height: 70%;
    background: rgba(0, 84, 125, 0.50);
  }

  .history-content.development .history-image-content {
    width: 40%;
  }


  /* お断りしていた相談　記事 */

  .history-image-content.consultation:after {
    bottom: -40%;
    left: -15%;
    width: 40%;
    height: 130%;
    background: rgba(0, 84, 125, 0.85);
  }

  .history-content.consultation .history-image-content {
    width: 25%;
  }

  .history-content.consultation  .history-image-wrapper {
    height: 30rem;
    width: 100%;
  }



  /* ビルの画像 */

  .history-content.consultation .history-image-wrapper.building  {
    height: 23rem;
    margin-top: 6.25rem;
  }


    /* 環境コンサルティングとして始動　記事 */

    .history-image-content.start:after {
        bottom: -40%;
        right: 0%;
        width: 30%;
        height: 120%;
        background: #196489;
        z-index: 2;
      }
    
      .history-content.start .history-image-content {
        width: 20%;
      }
    
      .shape-content {
        background: rgba(0, 84, 125, 0.15);
        width: 100%;
        height: 33rem;
        position: relative;
      }


      /* 社長後ろ姿 */

      .history-content.signature .history-image-content {
        width:70%;
      }

      .history-content.signature .history-image-wrapper  {
        height: 20rem;
      }
      .history-content.signature .history-image-wrapper img {
        object-position: 50% 40%;
      }

      .history-content.signature .name-content {
        width: 30%;
      }


      .name-content .name span {
        display: block;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5625rem; /* 138.889% */
        letter-spacing: 0.045rem;
      }

      .name-content .name span:last-child {
        margin-top: 1rem;
        font-size: 1.5625rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5625rem;
        letter-spacing: 0.0625rem;
      }

  
  .history-text {
    flex: 1;
  }

  .history-text .flex:nth-child(2) {
    padding-top: 10rem;
  }
  
  .history-title {
    color: #00547D;
    margin-bottom: 1.25rem;
    position: relative;
    padding-left: 1.3rem;
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5rem; /* 160% */
    letter-spacing: 0.0625rem;
  } 

  .history-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18%;
    width: .3rem;
    height: 1.8rem;
    background-color: #00547D;
  }

  .history-title-2lines::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8%;
    width: .3rem;
    height: 4.3rem;
    background-color: #00547D;
  }
  
  .history-text p {
    margin-bottom: 2rem;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 166.667% */
    letter-spacing: 0.045rem;
  }

  /* スマホでレイアウト変わるため非表示 */
  .history-text.sp {
    display: none;
  }
  

  @media (max-width: 1024px) {

      /* 記事のレイアウト余白感の調整 */
      .third-section.journey-section .container {
        margin:  0 auto;
      }

  .history-heading {
    font-size: 1.5rem;
    line-height: 1.8;
  }

  .history-content {
    gap: 2rem;
    align-items: center;
  }

  .history-title-2lines::before {
    height: 100%;
    top: 3%;
  }

  .history-content {
    flex-direction: column;
    gap: 2rem;
    margin-top: 0;
  }

  .history-section.first,
  .history-section.second ,
  .history-section.forth 
   {
      padding:7.25rem 2rem  0;
    }

    .history-section.first {
      padding: 10rem 2rem 0;
    }
  .history-section.third {
    padding:0 2rem  ;

  }

  .history-image-wrapper {
    width: 100%;
    /* aspect-ratio: 16/9; */
  }
  .history-text {
    padding-top: 3.7rem;
}

/* 創業セクション */
.history-content.sougyo .history-image-content {
  width: 94%;
  margin-left: auto;
}

/* お客様が困っているのは */
.history-content.development {
  flex-direction: column-reverse;
}
.history-content.development .history-image-content  {
  width:94%;
  margin-right: auto; 
}
/* .history-content.development .history-image-content .history-image-wrapper {
  margin-top: 7.5rem;
} */

.history-image-content.development::after {
  right: -6%;
  bottom: -10%;
  height: 45%;
}

/* お断りしていた相談 */
.history-content.consultation .history-image-content {
  width: 95%;
  margin-left: auto;
}

.history-image-content.consultation:after {
  height: 100%;
  bottom: -10%;
  left: -15%;
  width: 35%;
}

.history-content.consultation .history-image-wrapper {
  height: 25rem;
}
.history-image-content.start.pc {
  display: none;
}



  /* スマホでレイアウト変わるため非表示 */
  .history-text.sp {
    display: block;
  }

.history-content.signature .history-text {
  padding-top: 10rem;
}

/* ビルの画像 */

.history-content.consultation .history-image-wrapper.building  {
height: 15rem;
}


  .history-text .flex:nth-child(2) {
    display: none;
}


  /* 社長の署名 */
  .history-content.signature .history-image-content {
    margin: calc(50% - 50vw) ;
	width: 100vw;
  }

.history-image-content.signature:after {
  height: 100%;
  bottom: -30%;
  right: 0;
  width: 65%;
  background: rgba(0, 84, 125, 0.15);
}

.history-image-content.signature:before {
  position: absolute;
  content: '';
  height: 100%;
  bottom: -20%;
  right: 0;
  width: 30%;
  background: rgba(0, 84, 125, 0.9);
}

.history-content.signature .name-content {
  order: 3;
  padding: 3rem 0 1.2rem;
  margin-left: 1rem;
  width: 100%;
}

.history-content.signature .history-image-wrapper {
  height: 15rem;
  border-radius: 0;
}

  }



  @media (max-width: 768px) {
    

      /* 記事のレイアウト余白感の調整 */

  .history-section.third {
    padding:0 1.37rem  ;

  }

  .history-section.first,
.history-section.second ,
.history-section.forth 
 {
    padding:7.25rem 1.37rem  0;
  }


  .history-heading {
    font-size: 1.5rem;
    font-style: normal;
    line-height: 2rem; /* 166.667% */
    letter-spacing: 0.06rem;
    text-align: left;
  }

    .history-section {
      padding: 2rem 1rem;
    }
    .history-heading span {
        display: block;
        margin-bottom: 1rem;
      }
    
  
    .history-title {
      font-size: 1.3rem;
      padding-left: 1rem;
      line-height: 1.8rem;
    }



    .history-text p {
        margin: 0 1rem 2rem;
    }
    .history-text p:last-of-type {
        margin-bottom: 0;
    }
  
    .history-title::before {
      height: 1.3rem;
    }
  
    .history-title-2lines::before {
      height: 4.9rem;
      top: 5%;
    }
    .history-title-sp::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7%;
      width: .3rem;
      height: 3.2rem;
      background-color: #00547D;
    }




  }