.mogi_about{
  max-width:101.8rem;
  margin:0 auto;
  display:flex;
  gap:10.5rem;
  justify-content:center;
  align-items: flex-start;
}

.mogi_about_container{
  
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  justify-content:center;
  max-width:50rem;
  min-width: 35.8rem;
}

.mogi_about_txt_container{
  display:flex;
  gap:1.6rem;
  justify-content: center;
}


.mogi_about_circle {
  width: 6.5rem;
  height: 6.5rem;
  background-color: #ffffff; /* 内側の白色 */
  border: 1px solid #012866; /* 外側ボーダー */
  color: #012866; /* テキスト色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 円形 */
  text-align: center;
  box-sizing: border-box; /* ボーダーもサイズに含む */
}

.mogi_about_circle_wrapper{
  display:flex;
  flex-direction:column;
  width:4.5rem;
}


.mogi_about_small-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
  white-space: nowrap;
}

.mogi_about_large-text {
  font-family:Lexend, sans-serif;
  font-size: 2.7rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0;
      position: relative;
    top: -6px;

  
}

.mogi_about_title_container{
  display:flex;
  flex-direction:column;
}

.mogi_about_title_container h3{
font-weight:bold;
  font-size:2.4rem;
  line-height:1.6;
  text-align:left;
  margin:0;
  color: #012866;
}

.mogi_about_title_container p{
　font-weight:550;
  font-size:1.6rem;
  line-height:1.8;
  text-align:left;
  margin:0;
}

.mogi_about_img_txt{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  justify-content:left;
}

.mogi_about_img_txt p{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  justify-content:left;
  margin:0;
  color:#012866;
}

.mogi_about_img_container{
  max-width:44rem;
  padding: 25px 40px;
  box-sizing: border-box; /* パディングを幅に含める */
 box-shadow: 3px 3px 11px rgba(96, 108, 137, 0.13);
  border-radius: 5px;
  background-color:white;


}

.mogi_about_img_container img{
  width: 100%; /* コンテナ内の残りの幅全体に広がる */
  height: auto; /* アスペクト比を保持 */
  display: block; /* 画像の余白を除去 */
  max-width: 100%; /* 親コンテナの幅を超えないようにする */
    max-height:18.5rem;
  object-fit: contain;
}

@media (max-width: 480px) {
  .mogi_about_image-container {
    width: 100%; /* 画面幅が狭くなったときはコンテナを100%に */
    padding: 20px; /* 必要に応じて調整 */
  }
}

/* レスポンシブ対応のメディアクエリ追加 */
@media (max-width: 768px) {
  .mogi_about {
    flex-direction: column;  /* 親要素を縦並びに */
    gap: 2.4rem;  /* アイテムの間隔を調整 */
    align-items: center;
  }

  .mogi_about_container {
    gap: 2rem;  /* アイテム間隔を調整 */
    margin-left:5%;
    margin-right:5%;
    align-items: center;
    min-width: unset;
  }

  .mogi_about_txt_container {
    align-items: center;  /* 中央揃え */
  }

  .mogi_about_img_container {
    width: 100%;  /* 画像コンテナの幅を100%に */
    padding: 15px;  /* パディング調整 */

  }
  
    .mogi_about_img_container img {
     max-height:none;
  }
}

@media (max-width: 480px) {
  .mogi_about_img_container {
    width: 100%;
    padding: 10px;f
  }

  .mogi_about_title_container h3 {
    font-size: 1.8rem;  /* フォントサイズ調整 */
  }

  .mogi_about_title_container p {
    font-size: 1.4rem;  /* フォントサイズ調整 */
  }
}