@charset "UTF-8";

.haguruma_wrapp {
  display: flex;
  align-items: center;
  gap: 50px;
}

.haguruma_wrapp > img {
  width: 420px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  margin:50px;
}

.haguruma_txt {
  flex: 1;
}

.haguruma_txt p {
  line-height: 1.8;
  margin: 0;
}

.haguruma_con {
  position: relative; /* この中で重なり順を制御 */
  margin-bottom:100px;
}

.haguruma_con .bg {
  position: absolute;
  top: 0;
  left: -50vw;
  right:0;
  width:150vw;
  height: 100%;
  background: #f0f0f0; /* 装飾用の背景色やグラデーション */
  z-index: -1; /* 一番後ろに配置 */
}

.haguruma_con .haguruma_wrapp {
  position: relative;
  z-index: 1; /* 背景より手前に表示 */
}

.main_wrapp {
  display: flex;
  gap: 22px;          /* カラム間の余白 */
  max-width: 1400px;  /* セクションの最大幅 */
  margin: 0 auto;
}

.main_wrapp > div {
  flex: 1;
  height: 625px;
  display: flex;
  background-size: cover;
  background-position: center;
  color: #3C3F43;
  font-size: 1.5rem;
  font-weight: bold;
}

/* 背景画像をそれぞれ指定 */
.box_airplane {
  background-image: url("https://www.tamayakin.co.jp/wp/wp-content/themes/tamayakin/img/business/detail_airplane.png");
  justify-content: center;
  align-items: flex-start;
}

.box_cosmo {
  background-image: url("https://www.tamayakin.co.jp/wp/wp-content/themes/tamayakin/img/business/detail_rocket.png");
  justify-content: center;
  align-items: flex-start;
}

.box_boei {
  background-image: url("https://www.tamayakin.co.jp/wp/wp-content/themes/tamayakin/img/business/detail_ship.png");
  justify-content: center;
  align-items: flex-start;
}

/* span の余白調整 */
.main_wrapp span {
  padding: 20px 20px;
}

.ninsyou_df {
  position:relative;
}

#term3 .bg{
  position: absolute;          /* 背景や子要素のz-index制御用 */
  top:360px;
  left: -50vw;
  right:0;
  width: 150vw;                 /* 横幅いっぱいに */
  height:85%;
  background-color: #d3e8ea;    /* 任意の背景色 */
  z-index:-1;
}

#term4 {
  margin-top:-200px;
  margin-bottom:150px;
}

#term4 .link_btn {
  margin-left:520px;
}

@media (max-width: 768px) {
  .haguruma_wrapp {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .haguruma_wrapp > img {
    width: 100%;
    margin:20px 0px 0 0;
  }

  .main_wrapp {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0 auto;
  }

  .main_wrapp > div {
    color: #ffffff;
    min-height: 150px;          /* スマホ用に高さを短く */
    background-position: center middle;
  }

  .main_wrapp div span{
  }

  #term3 .bg{
    top:500px;
    height:150%;
  }

  #term4 {
    margin-top:0;
    margin-bottom:150px;
  }

  #term4 .link_btn {
    margin-left:0;
  }
}