/* トップページ 動画セクション（「ご利用ガイドを見る」ボタン直下・見出しなし） */
#movie {
    margin-top: 0;
    margin-bottom: 70px;  /* 次セクション(#feature)との間隔 */
}
/* テーマの#plan下余白150pxを、直後が動画のときだけ詰める */
#plan:has(+ #movie) {
    margin-bottom: 20px;
}
#movie .movie-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 960px;
    margin: 0 auto;
    /* 固定paddingにする（%だと広い親要素基準で膨張し、狭い実効幅で折り返す不具合が出る） */
    padding: 0 16px;
    box-sizing: border-box;
    /* 横型動画の表示高さ */
    --movie-h: 320px;
}
#movie .movie-item {
    margin: 0;
}
#movie .movie-item iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
    background: #000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
#movie .movie-landscape {
    height: var(--movie-h);
    aspect-ratio: 16 / 9;   /* 高さ固定→幅は自動（16:9） */
    max-width: 100%;
}
#movie .movie-caption {
    margin-top: 8px;
    text-align: center;
    font-size: 0.8rem;
    color: #666;
}

/* 中間幅: 高さを少し抑える */
@media (max-width: 820px) {
    #movie .movie-grid { --movie-h: 270px; gap: 14px; }
}

/* スマホ・小型タブレット: 横型はフル幅で中央に */
@media (max-width: 700px) {
    #movie { margin-top: 0; margin-bottom: 50px; }
    #movie .movie-grid {
        align-items: center;
        --movie-h: auto;
    }
    #movie .movie-landscape {
        height: auto;
        width: 100%;
        max-width: 480px;
    }
}