/* ==========================================================================
    症状改善事例
============================================================================= */

.case-title .ttl {
    width: 100%;
}

.case-service {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.case-service a {
    display: inline-flex;
    padding: 5px 16px;
    font-size: 20px;
    line-height: calc( 29 / 20 );
    color: #4D9EDE;
    border: solid 1px #4D9EDE;
    border-radius: 100px;
}

.case-container {
    margin-top: 72px;
}

.case-list {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
}

.case-item {
    position: relative;
}

.case-item__thumb {
    aspect-ratio: 345/200;
    width: 100%;
    display: block;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.case-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-item__detail {
    padding: 13px 10px 33px;
}

.case-item__detail > *:first-child {
    margin-top: 0;
}

.case-item__tag {
    display: block;
    padding: 3px 10px;
    border-top: solid 1px #BEDDF2;
    border-bottom: solid 1px #BEDDF2;
    font-size: 16px;
    line-height: calc( 17 / 12 );
    color: #4D9EDE;
}

.case-item__ttl {
    margin-top: 10px;
    font-size: 1em;
    line-height: calc( 27 / 16 );
    color: #25435A;
}

.case-item-categories {
    display: flex;
    flex-wrap: wrap;
    gap: min( 10px, 0.588vw ); 
    position: absolute;
    top: 0;
    left: auto;
    right: min( 9px, calc( 9/17 * 1vw ) );
    z-index: 1;
    transform: translateY(-50%);
}

.case-item-category {
    display: inline-flex;
    padding: 3px 10px;
    background: #fff;
    font-size: min( 1em, calc( (100vw / 1100) * 16 ) );
    line-height: calc( 14 / 10 );
    color: #25435A;
    border-radius: 100px;
    border: solid 1px #eee;
}

@media screen and ( max-width: 767px ) {
    .case-main .column-pagination {
        margin-top: 50px;
    }

    .case-container {
        margin-top: 40px;
    }

    .case-list {
        grid-template-columns: 100%;
    }

    .case-service {
        gap: 5px;
    }
    
    .case-service a {
        padding: 3px 5px;
        font-size: 12px;
        line-height: calc( 14 / 10 );
    }

    .case-item-categories {
        gap: 5px;
        right: 10px;
    }

    .case-item-category {
        font-size: 14px;
    }
}

/* 詳細 */
.case-single .page-title__info {
    padding-bottom: 18px;
}

.case-single .page-title__info .ttl {
    padding: 30px 0;
    line-height: calc( 43 / 30 );
}

.case-single__data {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.case-single__category {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.case-single__category a {
    display: inline-flex;
    padding: 4px 1em;
    background: #fff;
    font-size: 1em;
    line-height: calc( 14 / 10 );
    color: #25435A;
    border-radius: 100px;
    border: solid 1px #eee;
}

.case-single__date {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    color: #8f8f8f;
    font-size: 14px;
}

.case-single__content {
    width: 100%;
    max-width: 900px;
    margin: 35px auto 0;
}


.case-single__tags {
    width: 100%;
    max-width: 690px;
    display: block;
    box-sizing: border-box;
    margin: 40px auto 0;
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 22px;
    border: 2px solid #4D9EDE;
    font-size: 1em;
    line-height: calc( 23 / 16 );
    color: #25435A;
}

.case-single-tag__list {
    margin-top: 10px;
}

.case-single-tag__item {
    display: flex;
    gap: 10px;
    padding: 3px 10px;
    border-top: 1px dashed #4D9EDE;
}

.case-single-tag__item:last-child {
    border-bottom: 1px dashed #4D9EDE;
}

.case-single-tag__ttl {
    padding-right: 15px;
    min-width: 48px;
    text-align: right;
    position: relative;
}

.case-single-tag__ttl::after {
    content: "/";
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
}

.case-single__img {
    width: 100%;
    max-width: 690px;
    display: block;
    margin-inline: auto;
}

.case-single__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-single__post {
    margin-top: 40px;
}

@media screen and ( max-width: 767px ) {
    .case-single .page-title__info .ttl {
        padding: 20px 0;
        font-size: 24px;
    }

    .case-single__data {
        flex-direction: column;
        row-gap: 10px;
    }

    .case-single__category a {
        font-size: 14px;
    }

    .case-single__date {
        width: 100%;
    }

    .case-single__tags {
        margin-top: 20px;
        padding: 20px;
        border-radius: 10px;
        border-width: 1px;
        font-size: 14px;
    }
}

/* ページナビ */
.page-nav {
    width: 100%;
    max-width: fit-content;
    display: block;
    margin-inline: auto;
    padding: 0 148px;
    position: relative;
}

.page-nav__btn {
    min-width: 100px;
    padding-inline: 48px;
    position: absolute;
    top: 0;
    left: 0;
}

.page-nav__btn--next {
    right: 0;
    left: auto;
}

@media screen and ( max-width: 767px ) {
    .page-nav {
        padding-inline: 100px;
    }

    .page-nav__btn {
        min-width: 90px;
        padding-inline: 20px;
    }

    .page-nav__back {
        min-width: 120px;
    }
}

/* カウンセリング予約 バナー */
.reservation-bnr {
    display: flex;
    align-items: center;
    column-gap: 30px;
    background: linear-gradient( 90deg, #FAD9DB, #F7C4C7);
    margin-top: 80px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    color: #25435A;
    box-sizing: border-box;
}

.reservation-bnr__ttl {
    font-size: 24px;
    line-height: calc( 35/24 );
    box-sizing: border-box;
}

.reservation-bnr__detail {
    margin-top: 12px;
    font-size: 14px;
    line-height: calc( 20/14 );
}

.reservation-bnr__img {
    aspect-ratio: 230/191;
    display: block;
    width: 45%;
    max-width: 230px;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.reservation-bnr__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reservation-bnr-contact {
    width: 100%;
    margin-top: 35px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    position: relative;
}

.reservation-bnr-contact__ttl {
    padding: 3px 1em;
    background: #FBB2B4;
    font-size: 1em;
    line-height: calc( 23/16 );
    color: #fff;
    border: 1px solid #fff;
    border-radius: 100px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
    position: absolute;
    top: calc( -1em - 2px );
    left: 50%;
    transform: translateX(-50%);
}

.reservation-bnr-contact__btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.reservation-bnr-contact__btn {
    width: 100%;
    max-width: 235px;
    display: flex;
    align-items: center;
    padding: 6.5px 30px;
    font-size: 20px;
    line-height: 1;
    color: #25435A;
    border-radius: 100px;
    box-sizing: border-box;
}

.reservation-bnr-contact__btn--mail {
    background: #CBE2F5;
}

.reservation-bnr-contact__btn--tel {
    background: #FAD9DB;
}

.reservation-bnr-contact__btn-txt {
    display: block;
    padding-left: 30px;
    text-align: center;
    position: relative;
}

.reservation-bnr-contact__btn-txt::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background: #25435A;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.reservation-bnr-contact__btn--mail .reservation-bnr-contact__btn-txt::before {
    mask-image: url(../images/case/mail.svg);
}

.reservation-bnr-contact__btn--tel .reservation-bnr-contact__btn-txt::before {
    mask-image: url(../images/case/tel.svg);
}

.reservation-bnr-contact__btn-txt span {
    font-size: 14px;
}

@media screen and ( max-width: 959px ) {
    .reservation-bnr {
        column-gap: 15px;
    }

    .reservation-bnr-contact__ttl {
        font-size: 14px;
    }

    .reservation-bnr-contact__btn {
        font-size: 16px;
    }
}


@media screen and ( max-width: 767px ) {
    .reservation-bnr {
        flex-direction: column;
        margin-top: 60px;
        padding: 20px 10px;
        border-radius: 10px;
    }

    .reservation-bnr__img {
        order: 2;
        aspect-ratio: 315/200;
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
        border-radius: 10px;
    }

    .reservation-bnr__txt {
        display: contents;
    }

    .reservation-bnr__ttl {
        order: 1;
        font-size: 20px;
        text-align: center;
    }

    .reservation-bnr__detail {
        order: 3;
        margin-top: 10px;
    }

    .reservation-bnr-contact {
        order: 4;
        margin-top: 26px;
        padding: 20px 30px 10px;
    }

    .reservation-bnr-contact__btns {
        flex-direction: column;
        gap: 10px;
    }

    .reservation-bnr-contact__btn {
        justify-content: center;
        max-width: 100%;
        min-height: 45px;
        padding: 5px 8px;
        font-size: 16px;
    }

    .reservation-bnr-contact__btn-txt{
        padding-left: 25px;
    }

    .reservation-bnr-contact__btn-txt::before {
        width: 16px;
        height: 16px;
    }

    .reservation-bnr-contact__btn-txt span {
        font-size: 14px;
    }
}