@charset "utf-8";
body {
    margin: 0;
    background-color: #fff;
	overflow-x: hidden; 
}
* {
  box-sizing: border-box;
}
.containertop {
    display: flex;
    flex-direction: column;
    width: 100%;

}

.left-section,
.right-section {
    width: 100%;
}

.left-section {
    background-color: #fff;
}

.video-container {
    position: relative;
    width: 100%;
    /* スマホ版: 4:5のアスペクト比を維持 */
    padding-top: calc(100% / 4 * 5);
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-section {
    background-color: #fff;
    display: flex;
}

.swiper-container {
    width: 100%;
    height: auto;
    min-height: 200px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background-color: #fff;
    padding: 0px 0px;
    box-sizing: border-box;
}

/* PC向けスタイル */
@media (min-width: 751px) {
    .containertop {
        flex-direction: row;
        overflow: hidden;
    }

    .left-section {
        width: 39.97%;
        /* 高さを画面いっぱいに固定 */

        display: flex;
 height: auto;
    }

    .right-section {
        width: 60.03%;
        /* 高さを画面いっぱいに固定 */ height: auto;
    }
    
    /* PC版: 動画のアスペクト比を維持しつつ、隙間なく表示 */
    .video-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .video {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* スライド部分も画面いっぱいの高さに */
    .swiper-container {
        width: 100%;
        height: 100%;
        min-height: initial;
		padding: 0px 0px;
    }
}