@charset "utf-8";

/*///////////////////// font-face 読み込み ///////////////////////////*/
/* Zen Maru Gothic 700 */
@font-face {
    font-family: 'Zen Maru Gothic';
    src: url(/fonts/ZenMaruGothic-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}
/*///////////////////// font-face 読み込み ///////////////////////////*/

.l-detail {
    padding-top: 14px;
}
    .detail-header * {
        color: #000000;
    }
    .detail-header {
        margin-bottom: 47px;
    }
        .detail-header__name {
            font-size: 26px;
            padding-top: 2px;
        }
        .detail-header__cost {
            display: flex;
            align-items: baseline;
            gap: 19px;
            margin: 0 0 10px;
        }
            .detail-header__price {
                font-size: 18px;
                font-weight: 700;
                color: #F26900;
                display: flex;
                align-items: baseline;
                gap: 2px;
            }
                .detail-header__price .price {
                    font-size: 26px;
                    color: #F26900;
                }
            .detail-header__cost-kanri {
                font-size: 18px;
            }

        .pc-view.detail-header__feature-slider-option {
            display: block;
        }
        .sp-view.detail-header__feature-slider-option {
            display: none;
        }
        .detail-header__feature-slider {
            width: 1140px;
            padding-bottom: 35px !important;
        }
            .detail-header__feature-slider-img {
                width: 540px;
                height: 280px;
                flex-shrink: 0;
            }
                .detail-header__feature-slider-img img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    vertical-align: bottom;
                    background: #eceff1;
                }
            .detail-header__feature-slider-txt-box {
                width: 580px;
                padding-top: 1px;
            }

            /* Swiperのカスタムスタイル */
            .detail-header__feature-slider {
                position: relative;
                overflow: hidden;
            }

            .detail-header__feature-slider .swiper-wrapper {
                position: relative;
                width: 1140px;
                height: auto;
                min-height: 280px;
            }

            .detail-header__feature-slider .swiper-slide {
                position: absolute !important;
                top: 0;
                left: 0;
                display: flex;
                align-items: flex-start;
                width: 1140px;
                gap: 25px;
                pointer-events: all;
                z-index: 1;
                opacity: 0 !important;
            }

            .detail-header__feature-slider .swiper-slide-active {
                opacity: 1 !important;
            }
            .detail-header__feature-slider.no-slide .swiper-slide {
                opacity: 1 !important;
            }

            /* ナビゲーションボタンのスタイル */
            .detail-header__feature-slider .swiper-button-prev,
            .detail-header__feature-slider .swiper-button-next {
                color: #000000;
                width: fit-content;
                height: fit-content;
                z-index: 10;
                pointer-events: auto;
                cursor: pointer;
                bottom: 0;
                margin: auto;
            }
            
            .detail-header__feature-slider .swiper-button-prev {
                left: 10px;
            }
            
            .detail-header__feature-slider .swiper-button-next {
                right: -340px;
            }

            .detail-header__feature-slider .swiper-button-prev svg,
            .detail-header__feature-slider .swiper-button-next svg {
                width: 25px;
                height: 25px;
            }
            .swiper-button-next:after,
            .swiper-button-prev:after {
                display: none;
            }

            /* ページネーションのスタイル */
            .detail-header__feature-slider .swiper-pagination {
                width: fit-content !important;
                top: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0;
                margin: auto;
            }

            .detail-header__feature-slider .swiper-pagination-bullet {
                background: #A6A6A6;
                opacity: 1;
                width: 10px;
                height: 10px;
                margin: 0 5px !important;
            }

            .detail-header__feature-slider .swiper-pagination-bullet-active {
                background: #000000;
                opacity: 1;
            }

            .detail-header__feature-slider-ttl {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 7px;
            }
                .detail-header__feature-slider-ttl--black {
                    font-size: 13px;
                    font-weight: 700;
                    display: flex;
                    align-items: center;
                    gap: 21px;
                    padding-right: 13px;
                }
                    .detail-header__feature-slider-ttl--black::after {
                        content: '';
                        background-color: #000000;
                        display: block;
                        width: 1px;
                        height: 40px;
                        transform: rotate(39deg);
                    }
                .detail-header__feature-slider-ttl--orange {
                    font-family: 'Zen Maru Gothic', sans-serif;
                    font-size: 20px;
                    font-weight: 700;
                    color: #F26900;
                    display: flex;
                    gap: 6px;
                    position: relative;
                    z-index: 2;
                }
                .detail-header__feature-slider-ttl-num {
                    font-family: 'Zen Maru Gothic', sans-serif;
                    font-size: 20px;
                    font-weight: 700;
                    color: #F29500;
                    position: relative;
                    z-index: -1;
                }
                    .detail-header__feature-slider-ttl-num::before {
                        content: '';
                        background-color: #F7FBC0;
                        display: block;
                        width: 39px;
                        height: 39px;
                        border-radius: 50%;
                        position: absolute;
                        top: -4px;
                        bottom: 0;
                        left: -10px;
                        right: 0;
                        z-index: -1;
                    }
            .detail-header__feature-slider-txt {
                font-size: 16px;
                line-height: 1.81;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 7;
            }
            .detail-header__feature-slider-txt a {
                font-size: 16px;
                line-height: 1.81;
                color: #07519A;
                text-decoration: underline;
            }
            .detail-header__feature-slider-option {
                width: 195px;
                margin: 0 auto;
                position: absolute;
                bottom: 175px;
                display: flex;
            }
            .detail-header__feature-slider.no-slide .detail-header__feature-slider-option {
                display: none
            }