.top_autoplay{
width:1400px;
margin:0 auto;
}
.top_autoplay img{
width:100%;
margin:0 auto;
}
.only_800{ display:none;}
@media (max-width: 1500px) {
.top_autoplay{
width: 94%;
margin:0 auto;
}
}

        :root {
            --accent-color: #000;
            --bg-color: #f8f8f8;
        }


        /* 1. メインスライダー設定 */
        .main-section { width: 1400px; margin:0 auto; }
        
        .main-slider {
            width: 100%;
            height: auto;
        }

        .main-slider .swiper-slide {
            width: 100%;
            /* PC: 1500x526 の比率を維持 */
            aspect-ratio: 1500 / 526;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 画像をスライドいっぱいに表示するための設定 */
        .main-slider .swiper-slide img {
            width: 100% !important;
            height: 100% !important;
        }
		
		@media (max-width: 1500px) {
		.main-section { width: 100%; margin:0 auto; }
		}

        /* 800px以下で 1:1 (正方形) に切り替え */
        @media (max-width: 800px) {
            .main-slider .swiper-slide {
                aspect-ratio: 1 / 1;
            }
			.only_1500{ display:none;}
			.only_800{ display:block;}
        }

        /* 2. 下部カードスライダーの設定 */

.card-section {
    padding: 50px 0;
    max-width: 1400px;
    margin: auto;
}

.card-slider .swiper-slide {
    background: transparent; /* 背景を透明に */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 縦に並べる */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    height: auto; /* 高さは中身（画像）に合わせる */
}

.card-slider .swiper-slide img {
    width: 100%; /* 幅はカードいっぱいに */
    height: auto; /* 高さは画像の比率を維持 */
    display: block; /* 下部の隙間を消す */
}

        /* 共通：ナビゲーションボタンを見えやすく */
        .swiper-button-next, .swiper-button-prev {
            color: #fff !important; /* メイン用 */
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        .card-slider ~ .swiper-button-next { color: var(--accent-color); }
/* 下部スライダーのボタンの色を変更（青系など） */
.card-button-prev,
.card-button-next {
    color: var(--accent-color:) !important;
    /* ボタンのサイズを少し小さくしたい場合は以下を調整 */
    transform: scale(0.8);
}

/* スマホ等でボタンが邪魔な場合は、画面端に寄せるか非表示にする設定も可能です */
@media (max-width: 768px) {
    .card-button-prev, .card-button-next {
        display: none;
		
    }
}
/* 1. スライダーの下側にバレットが動くためのスペースを作る */
.card-slider {
    padding-bottom: 40px !important; /* 数値を大きくするほど下に隙間が空きます */
}

/* 2. バレット自体の位置を微調整 */
.card-slider .swiper-pagination {
    bottom: 10px !important; /* 下端からの位置。0pxに近づけるほど下に下がります */
}
/* 全スライダー共通のアクティブ色 */
.swiper-pagination-bullet-active {
    background: #000 !important; /* お好みの色に変更してください */
    opacity: 1; /* 透明度をなくしてハッキリさせる */
}
.t_note{ padding:10px 10px 0 10px;}