@charset "UTF-8";

:root {
    --white: #ffffff;
    --black: #1d1d1d;
    --gray: #f5f5f5;
    --blue: #2d7de6;
}

/* 打ち消し */
.single_case .article a {
    background-size: 0;
}

.single_case .slick-slider .slick-track,
.slick-slider .slick-list {
    position: static;
    overflow: hidden;
}

/* コンテンツ */
.single_case .hedding {
    background-color: #D6E9FB;
    padding: 16px 24px;
    border-radius: 10px;
    margin-bottom: 48px;
}

.single_case .tags {
    margin-bottom: 16px;
}

.single_case .tags span {
    display: inline-block;
    text-align: center;
    width: 100px;
    background-color: #EFEFEF;
    border-radius: 5px;
    padding: 5px;
    font-size: 10px;
}

.single_case .title {
    font-size: 20px;
}

.single_case .content {
    margin-bottom: 220px;
}

.single_case .case-slider-single {
    margin-bottom: 24px;
}

.single_case .case-slider-single .slick-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5 / 1;
    object-fit: contain;
}

.single_case .case-slider-single .slick-prev,
.single_case .case-slider-single .slick-next {
    background-color: #6CA4EE;
    border-radius: 10px;
    aspect-ratio: 1/1;
    width: 50px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.single_case .case-slider-single .slick-prev {
    left: -20px !important;
}

.single_case .case-slider-single .slick-next {
    right: -20px !important;
}

.single_case .case-slider-single .slick-prev::before,
.single_case .case-slider-single .slick-next::before {
    width: 16px;
}

.single_case .case-slider-single .slick-prev::before {
    content: url("/wp-content/themes/a1data_2022/asset/img/case/arrow-prev.svg");
}

.single_case .case-slider-single .slick-next::before {
    content: url("/wp-content/themes/a1data_2022/asset/img/case/arrow-next.svg");
}

.single_case .case-slider-single .slick-arrow {
    z-index: 2 !important;
}

.single_case .case-slider-single__thumbnail {
    margin-bottom: 80px;
}

.single_case .case-slider-single__thumbnail .slick-slide {
    margin-right: 20px;
    width: 160px;
    position: relative;
    cursor: pointer;
}

.single_case .case-slider-single__thumbnail .slick-slide:not(.slick-current)::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(217, 217, 217, .8);
    content: '';
}

.single_case .case-slider-single__thumbnail .slick-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
}

.single_case .content-title {
    font-size: 24px;
    /* padding-bottom: 10px; */
    border-bottom: 6px solid var(--blue);
    margin-bottom: 20px;
}

.single_case .h3 {
    margin-bottom: 24px;
}

.single_case .list {
    list-style: none;
    margin: 0 24px 100px;
}

.list-title {
    border-bottom: 1px solid #AFADAD;
    padding: 24px 22.5px;
    font-size: 16px;
}

.single_case .text {
    margin: 20px 0 100px 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #AFADAD;
}

.single_case .text p {
    font-size: 16px;
}

.single_case .box--gray {
    background-color: var(--gray);
    border-radius: 10px;
    padding: 40px 24px;
    margin-bottom: 100px;
}

.single_case .box--blue {
    background-color: var(--blue);
    border-radius: 10px;
    padding: 40px 24px;
}

.single_case .box--blue p {
    font-size: 16px;
    color: var(--white);
}

.single_case .overview-wrap {
    margin-bottom: 64px;
}

.single_case .overview-wrap .content-title {
    border-bottom: 0;
    margin-bottom: 40px;
}

.single_case .overview-wrap .h3 {
    padding: 0;
    background-size: 0;
    margin-bottom: 40px;
}

.single_case .overview {
    padding: 10.5px 10px 21.5px;
    border-bottom: 1px solid #AFADAD;
}

.single_case .overview:first-of-type {
    border-top: 1px solid #AFADAD;
}

.single_case .overview-title {
    font-weight: bold;
}

.single_case .overview-content {
    margin: 0 1em;
}

.single_case .overview-result {
    margin-top: 24px;
}

@media screen and (max-width: 768px) {
    .single_case .hedding {
        padding: 8px 16px;
        margin-bottom: 24px;
    }

    .single_case .tags {
        margin-bottom: 8px;
    }

    .single_case .tags span {
        width: 80px;
        padding: 2px;
    }

    .single_case .title {
        font-size: 20px;
    }

    .single_case .content {
        margin-bottom: 160px;
    }

    .single_case .case-slider-single {
        margin-bottom: 16px;
    }

    .single_case .case-slider-single .slick-prev,
    .single_case .case-slider-single .slick-next {
        border-radius: 5px;
        width: 40px;
    }

    .single_case .case-slider-single .slick-prev {
        left: -6px !important;
    }

    .single_case .case-slider-single .slick-next {
        right: -6px !important;
    }

    .single_case .case-slider-single .slick-prev::before,
    .single_case .case-slider-single .slick-next::before {
        width: 14px;
    }

    .single_case .case-slider-single__thumbnail {
        margin-bottom: 40px;
    }

    .single_case .case-slider-single__thumbnail .slick-slide {
        margin-right: 20px;
        width: 160px;
    }

    .case-slider-single__thumbnail .slick-slide {
        margin-right: 8px;
        width: 88px;
    }

    .single_case .content-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .single_case .content-sub-title {
        margin-bottom: 16px;
    }

    .single_case .list {
        margin: 0 8px 80px;
    }

    .list-title {
        padding: 16px 8px;
        font-size: 14px;
    }

    .single_case .text {
        margin: 0 0 80px 16px;
        padding-bottom: 16px;
    }

    .single_case .text p {
        font-size: 14px;
    }

    .single_case .box--gray {
        padding: 24px 16px;
        margin-bottom: 80px;
    }

    .single_case .box--blue {
        padding: 24px 16px;
    }

    .single_case .box--blue p {
        font-size: 14px;
    }

    .single_case .overview-wrap {
        margin-bottom: 32px;
    }

    .single_case .overview-wrap .content-title {
        margin-bottom: 24px;
    }

    .single_case .overview-wrap .content-sub-title {
        margin-bottom: 24px;
    }

    .single_case .overview {
        padding: 8px 0;
    }
}

/* ページネーション */
.single_case .pagenation {
    display: flex;
    gap: 56px;
    justify-content: center;
    align-items: center;
    margin: 0 auto 220px;
}

.single_case .pagenation a {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4px;
}

.single_case .pagenation a.prev::before {
    content: "";
    background-image: url("/wp-content/themes/a1data_2022/asset/img/case/prev.svg");
    display: block;
    width: 8px;
    height: 8px;
}

.single_case .pagenation a.next::after {
    content: "";
    background-image: url("/wp-content/themes/a1data_2022/asset/img/case/next.svg");
    display: block;
    width: 8px;
    height: 8px;
}

.single_case .pagenation .page {
    display: flex;
    gap: 20px;
    list-style-type: none;
}

.single_case .pagenation .page .active {
    color: #fff;
}

.single_case .pagenation .page li a {
    display: block;
    background-color: #fff;
    border: solid 2px var(--blue);
    color: var(--blue);
    font-weight: bold;
}

.single_case .button {
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    padding: 0.45em 1em;
    background-color: var(--blue);
}

.single_case .back {
    color: var(--blue) !important;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .single_case .pagenation {
        gap: 24px;
        margin: 0 auto 160px;
    }

    .single_case .pagenation a {
        font-size: 14px;
    }

    .single_case .button {
        padding: 0.45em 1em;
    }

}