@charset "UTF-8";

/* フロント用CSS */




/*------ carousel : 汎用カルーセル ------*/
/* 使い方: スライダーブロックの追加CSSクラスに "carousel" を指定
   推奨設定: スライド枚数/間隔 PC:3.3/24 / SP:1.3/16
   Gutenbergの「高さ」設定は不要 */

/* スライド：画像を全体表示・高さ自動・角丸 */
.carousel .ark-block-slider__inner,
.carousel .swiper-slide {
    height: auto !important;
}

/* 上下の影を表示するため垂直方向のみoverflow解除 */
.carousel .ark-block-slider__inner {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* 上下の影用スペース */
.carousel.ark-block-slider {
    padding-top: 8px;
}

.carousel .ark-block-slider__slide {
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* メディアコンテナの絶対配置・固定高さを解除 */
.carousel .ark-block-slider__media {
    position: static !important;
    height: auto !important;
}

/* ショートコードで出力される<a>をブロック表示にして画像を全幅に */
.carousel .ark-block-slider__media a {
    display: block;
}

/* object-fit: cover によるトリミングを解除 */
.carousel .ark-block-slider__img {
    object-fit: unset !important;
    height: auto !important;
    width: 100% !important;
    display: block;
}

/* 矢印をスライダー外側に配置 + ページネーション用余白 */
.carousel.ark-block-slider {
    padding: 0 48px 2.5rem;
}

/* ページネーション位置 */
.carousel .swiper-horizontal>.swiper-pagination-bullets {
    bottom: -2.5rem;
}

@media (max-width: 599px) {

    /* SP：矢印を非表示にしてスワイプで操作 */
    .carousel .ark-block-slider__nav {
        display: none;
    }

    .carousel.ark-block-slider {
        padding: 0 0 2.5rem;
        overflow-x: hidden;
    }

    /* SP：isCenter によるセンター表示のため内側の横クリップを解除 */
    .carousel .ark-block-slider__inner {
        overflow-x: visible !important;
    }
}

/* carousel内のpのフォントサイズを通常のpに合わせる */
.carousel .swiper p {
    font-size: 16px;
}

@media (max-width: 599px) {
    .carousel .swiper p {
        font-size: 14px;
    }
}

/* テキストを上寄せ */
.carousel .ark-block-slider__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.carousel .swiper .ark-block-slider__bodyInner {
    padding: 1.5rem 0.5rem;
}