/* ==========================================================
   写真右横の回り込み維持 ＆ テキスト内部を縦並びにするスタイル
   ========================================================== */

/* 親要素：デスクトップ時は横並び（写真とテキストブロックを並べる） */
.news-content-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* 写真エリア */
.news-content-wrap #scene-photo {
    flex-shrink: 0;
    width: 250px;
    margin: 0 !important;
    padding: 0 !important;
}

.news-content-wrap #scene-photo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ★ テキストエリア：ここを「縦方向のFlexbox」にすることで、内部のdivやpが縦に並びます */
.news-content-wrap .news-text-block {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* 内部の要素を縦（上下）に積む */
    align-items: flex-start; /* 左寄せ */
    gap: 0.8rem; /* テキスト要素同士の縦の間隔（必要に応じて調整してください） */
}

/* テキスト最初の要素の余白リセット（高さを揃えるため） */
.news-content-wrap .news-text-block > *:first-child {
    margin-top: 1.0rem !important;
    padding-top: 0 !important;
}

/* スマートフォン表示（画面幅768px以下：縦並び ＆ 写真中央配置） */
@media screen and (max-width: 768px) {
    .news-content-wrap {
        flex-direction: column; /* SP時は写真とテキストブロック全体が縦並び */
        align-items: center;    /* SP時は全体を中央揃えにして写真を中央に */
    }

    .news-content-wrap #scene-photo {
        width: 100%;
        max-width: 250px;
        margin-bottom: 1rem !important;
        text-align: center;
    }

    .news-content-wrap .news-text-block {
        width: 100%;
        text-align: left; /* SP時のテキストは左揃え */
    }
}