html {
    scroll-padding-top: 10rem; /* 固定ヘッダーの高さに合わせる */
}



.mogi_flow{
      display:flex;
      justify-content:center;
  flex-wrap:wrap;
  row-gap: 6.4rem; /* 縦方向の間隔 */
  padding-top:3.25rem;
  margin:0 auto;
  max-width:96rem;
  
    }
    .mogi_flow_shadow{
        filter: drop-shadow(3px 3px 11px rgba(96, 108, 137, 0.13)); /* 枠に影を付ける */
      position:relative;
    }
    .clipped-box {
      width: 100%;
      height: 24rem;
       object-fit: contain;
      clip-path: polygon(0% 0%, 81% 0%, 100% 50%, 81% 100%, 0% 100%);
      background-color: #fff; /* 枠の色 */
      position: relative;
      overflow: visible; /* 内部の画像が枠からはみ出さないようにする */
      z-index:2;
    }
    
    .mogi_flow_circle {
      width: 6.5rem;
      height: 6.5rem;
      background-color: #436FB0; /* 内側の白色 */
      border: 1px solid #436FB0; /* 外側ボーダー */
      color: #fff; /* テキスト色 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 50%; /* 円形 */
      text-align: center;
      box-sizing: border-box; /* ボーダーもサイズに含む */
      position:absolute;
  top: 0; /* ここで親要素からの位置を調整 */
  left: 0; /* 左から50%の位置に配置 */
  transform: translate(-50%,-50%); 
      z-index:10;
      
    }
    
    .mogi_flow_circle_wrapper{
      display:flex;
      flex-direction:column;
      width:4.5rem;
    }
    
    
    .mogi_flow_small-text {
      font-size: 1.4rem;
      font-weight: 600;
      line-height: 1.6;
      margin: 0;
      white-space: nowrap;
    }
    
    .mogi_flow_large-text {
      font-family:Lexend, sans-serif;
      font-size: 1.9rem;
      font-weight: 600;
      line-height: 1.6;
      margin: 0;
          position: relative;
        top: -6px;
    
      
    }
    
    
    .inner-image {
      width: 90%;
      height: 90%;
      object-fit: contain; /* 画像が枠いっぱいに表示されるように調整 */
      top: 50%;  /* 親要素の高さの50%の位置 */
      left: 50%;  /* 親要素の幅の50%の位置 */
    }

.mogi_flow_content{
  display:flex;
  flex-direction:column;
  gap:2rem;
  width:32rem;
  align-items:center;
}

.mogi_flow_txt{
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}

.mogi_flow_txt_blue{
  color:#012866;
  font-size:2rem;
  font-weight:bold;
  line-height:1.6;
  text-align:center;
}

.mogi_flow_content_2 .mogi_flow_txt_blue {
  padding: 0 4rem;
}

.mogi_flow_txt_small{
  font-size:1.4rem;
  font-weight:500;
  line-height:1.6;
  padding: 0 2rem;
}
    
.mogi_flow_content_2{
  display:flex;
  flex-direction:column;
  gap:2rem;
  max-width:34rem;
  transform: translateX(-2rem); /* 要素を左に移動 */
  margin-left: -3rem;
}

.mogi_flow_content_2:nth-child(3) {
  flex-basis: 100%; /* 3つ目で改行 */
}

.mogi_flow_content_2:nth-child(n+2){
  transform: none;
}


.clipped-box_2{
        width: 34rem;
      height: 24rem;
       object-fit: contain;
      clip-path: polygon(81% 0, 100% 50%, 81% 100%, 0% 100%, 19% 50%, 0% 0%);
      background-color: #fff; /* 枠の色 */
      position: relative;
      overflow: visible; /* 内部の画像が枠からはみ出さないようにする */
      z-index:2;
    }

    .inner-image_2 {
      width: 73%;
      height: 90%;
      object-fit: contain; /* 画像が枠いっぱいに表示されるように調整 */
      position: absolute;
      top: 50%;  /* 親要素の高さの50%の位置 */
      left: 55%;  /* 親要素の幅の50%の位置 */
      transform: translate(-50%, -50%);  /* 子要素の中心を親要素の中心に合わせる */
    }


@media screen and (max-width: 768px) {
  
      .mogi_flow{
        
        row-gap:0;
        padding-left:14%;
        padding-right:6%;
  }
  
  .mogi_flow_txt{
    gap:0.8rem;
  }
  
      .mogi_flow_txt_blue{
   white-space:
  }
  .mogi_flow_txt_blue br {
    display: none;
  }
  
    .mogi_flow_txt_small{
   padding:0;
  }
    .mogi_flow_content {
    flex-direction: row; /* 横並びにする */
    justify-content:center;
    max-width:none;
    width:100%;
  }
  .clipped-box{
    width:13rem;
    height:21rem;
    clip-path: polygon(0% 0%, 100% 0, 100% 82%, 50% 100%, 0 82%);
  }
  
    .clipped-box_2{
    width:13rem;
    height:21rem;
      clip-path: polygon(100% 0%, 100% 82%, 50% 100%, 0 82%, 0 0, 50% 18%)
  }
  
  .mogi_flow_txt{
    width: 24rem;
  }
  
  .mogi_flow_content_2 {
    flex-direction: row; /* 横並びにする */
    width:100%;
    justify-content:center;
    max-width:none;
    gap:1.2rem;
    margin-top:-1rem;
    margin-left:0;
  }
  
    .mogi_flow_content {
    gap:1.2rem;
  }
  
.mogi_flow_shadow:nth-child(n+2) {
    margin-top: -10rem;
}
  
  .inner-image_2{
    width:90%;
    height:90%;
  }
  
.mogi_flow_circle {
  bottom:0;
  top:none;
}
  
.mogi_flow_txt_blue {
    font-size: 1.6rem;
  
  
}
@media screen and (max-width: 500px) {
.mogi_flow_content_2 .mogi_flow_txt_blue {
    padding: 0;
}
  }