/* KV全体の背景（赤） */
.about-kv {
    background-color: #b03a2e; 
    padding: 60px 0;
}

.about-kv-container {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: stretch;
}

/* 左側のスライダー設定 */
.kv-slider-block {
    flex: 2.2; /* 右側より広く設定 */
    min-width: 0;
}

.about-kv-swiper {
    overflow: hidden;
}

.about-kv-swiper .swiper-slide {
    aspect-ratio: 16 / 7; /* スクリーンショットに近い横長比率 */
    border-radius: 40px;  /* 深めの角丸 */
    overflow: hidden;
}

.about-kv-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠いっぱいに切り抜き */
}

/* 右側のロゴカード設定 */
.kv-logo-block {
    flex: 1;
    display: flex;
}

.logo-card {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* 正方形に固定 */
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.logo-card img {
    width: 100%;
    height: auto;
    object-fit: contain; /* ロゴの形を崩さず枠内に収める */
}

/* パジネーション（白い丸）のデザイン */
.about-kv .swiper-pagination {
    position: relative !important;
    text-align: right !important;
    bottom: 0 !important;
    margin-top: 20px;
    padding-right: 20px;
}

.about-kv .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: transparent !important;
    border: 1px solid #fff !important; /* 白い枠線 */
    opacity: 1 !important;
    margin: 0 6px !important;
}

.about-kv .swiper-pagination-bullet-active {
    background: #fff !important; /* 現在の画像は白塗りに */
}

/* レスポンシブ：スマホでは縦に並べる */
@media (max-width: 768px) {
    .about-kv-container {
        flex-direction: column;
    }
    .kv-logo-block {
        width: 70%;
        order: -1; /* ロゴを上にする場合 */
        margin-bottom: 20px;
    }
}