/* ===== HTML版準拠：bg-slideup（背景はJSで動かす。固定はしない） ===== */
.bg-slideup {
    background-image: url("../images/6.jpg");
    /* 必要なら差し替え */
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 50vh;
    /* デモでは半分の高さ */
    border-radius: 0 15vw 0 15vw;
    /* 角丸もHTML版準拠 */
}

/* ===== HTML版準拠：SVG（Vivus対象）を背面で流す ===== */
#kazari1 {
    position: absolute;
    z-index: -1;
    /* 背面へ（固定ではない＝追従する） */
    left: 0;
    top: 0;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke: #fff;
    /* 注記：線色はsvg本体で管理というテンプレ文言 */
    stroke-width: 30;
    /* なぞり線の太さ */
    width: 100%;
}

/* SVG用ラッパ（ページ全体だがフッター分だけ短くする） */
.svg-flow-wrap {
    position: absolute;
    /* body直下で使う想定 */
    left: 0;
    top: 0;
    right: 0;
    /* 下端をフッター高さぶん持ち上げる */
    bottom: var(--footer-h, 0);
    z-index: -1;
    /* 背面 */
    pointer-events: none;
    overflow: hidden;
    /* 下端をはみ出させない */
}

/* 既存 #kazari1 をラッパ内で全域フィット */
.svg-flow-wrap>#kazari1 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

/* 既存の #kazari1 に直接つけていた position/z-index があるならこちらに寄せる */
/* ギャラリーのカルーセル化用の最小スタイル */
.swiper {
    width: 100%;
}

.swiper-slide figure {
    margin: 0;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像の縦横がバラつく時は比率をそろえる（任意） */
.swiper-slide img {
    object-fit: cover;
    aspect-ratio: 4/3;
}

/* ナビがはみ出す時の保険 */
.swiper-button-prev,
.swiper-button-next {
    color: #999;
}

.swiper-pagination-bullet {
    opacity: .5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}