.sentence_2025{
    width: 80%;
    margin: 2% auto;
}
.styled-hr {
    border: none; /* デフォルトの境界線を削除 */
    height: 3px; /* 水平線の高さを指定 */
    background-color: white; /* 水平線の色を白に指定 */
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.3); /* 水平線の下に影をつける */
    margin: 40px 0; /* 水平線の上下の余白を指定 */
  }

.container_2025 {
    display: flex; /* Flexboxを有効にする */
    width: 100%; /* 親要素に合わせて幅を調整 */
    flex-wrap: wrap; /* 要素が収まらない場合に折り返す */
}

.container_2025 > .image1 { /* 直接の子要素として指定 */
    width: 15%;
    margin-right: 2%; /* .textとの間隔をパーセンテージに変更 */
}

.container_2025 > .image1 img {
    width: 100%;
    height: auto;
}

.container_2025 > .text { /* 直接の子要素として指定 */
    width: 40%;
    margin-right: 4%; /* .image-gridとの間隔をパーセンテージに変更 */
    overflow-wrap: break-word; /* テキストがはみ出さないように単語の途中でも改行する */
}

.container_2025 > .image-grid { /* 直接の子要素として指定 */
    display: flex;
    flex-direction: column;
    width: 39%; /* 100 - 15 - 2 - 40 - 4 = 39 */
    height: auto;
}

.image-row1, .image-row2 {
    display: flex;  /*Flexboxを有効にする */
    gap: 10px;
    margin-bottom: 10px; /* 行間のマージン */
  }
  
  .image2, .image3, .image4, .image5 {
    width: 50%; /* 各画像の幅を50%に設定 */
  }
  
  .image-row3 {
    display: flex;
    gap: 10px;
    margin-bottom: 10px; /* 行間のマージン */
  }

.image6, .image7, .image8{
    width: 33.33%;
}

/* image-grid内の全画像コンテナにアスペクト比を設定 */
.image2, .image3, .image4, .image5, .image6, .image7, .image8 {
    aspect-ratio: 4 / 3;
    overflow: hidden; /* はみ出した画像を隠す */
}

/* image-grid内の全img要素にobject-fitを設定 */
.image2 img, .image3 img, .image4 img, .image5 img, .image6 img, .image7 img, .image8 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を保ちつつコンテナを埋める */
}


.img-caption{
    font-size: small;
    text-align: center;
    margin-top: 5px;
}

.caption{
    color: #70addc;
    margin-top: 0;
    font-size: 1.3em;
}

.notation{
    margin-top: -8px;
    font-size: 1.1em;
    font-weight: 700;
}

@media screen and (max-width: 970px) {
    .container_2025 {
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center; /* 中央寄せ */
    }

    .container_2025 > .image1,
    .container_2025 > .text,
    .container_2025 > .image-grid {
        width: 90%; /* 幅を90%に設定 */
        margin-right: 0; /* マージンをリセット */
        margin-bottom: 20px; /* 各要素の下にマージンを追加 */
    }

    .container_2025 > .image1 {
        margin-bottom: 0; /* 画像の下のマージンはリセット */
    }

    .container_2025 > .text {
        margin-bottom: 0; /* テキストの下のマージンはリセット */
    }

    .image-row1, .image-row2, .image-row3 {
        flex-direction: column; /* 画像の行も縦に並べる */
    }

    .image2, .image3, .image4, .image5, .image6, .image7, .image8 {
        width: 100%; /* 画像の幅を100%に */
        margin-bottom: 10px; /* 画像間のマージン */
    }
    .image2:last-child, .image3:last-child, .image4:last-child, .image5:last-child, .image6:last-child, .image7:last-child, .image8:last-child {
        margin-bottom: 0; /* 最後の画像の下マージンは不要 */
    }
}