@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

.tit {
    background: linear-gradient(180deg, #F9F9F9 0%, rgba(249, 249, 249, 0.70) 100%);
    width: 100%;
    height: calc((100vw / var(--vw-large))*420);
    align-items: center;
    margin-bottom: calc((100vw / var(--vw-large))*100);

    @media screen and (max-width: 768px) {
        height: calc((100vw / var(--vw-small))*250);
        margin-bottom: calc((100vw / var(--vw-small))*26);
    }

    .wrap {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;
        text-align: left;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*350);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*110);
            font-style: italic;
            font-weight: 500;
            line-height: 140%;
            /* 154px */
            text-align: left;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*50);
                margin-bottom: calc((100vw / var(--vw-small))*15);
            }
        }

        span {
            font-size: calc((100vw / var(--vw-large))*16);
            font-weight: 400;
            line-height: 0%;
            /* 0 */
            letter-spacing: calc((100vw / var(--vw-large))*4);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*16);
                letter-spacing: calc((100vw / var(--vw-small))*4);
            }
        }
    }
}

/* CASE_WRAP */

.case_wrap {
    width: calc((100vw / var(--vw-large))*1090);
    margin: 0 auto calc((100vw / var(--vw-large))*100);
    justify-content: flex-start;
    gap: calc((100vw / var(--vw-large))*35) calc((100vw / var(--vw-large))*40);
    flex-wrap: wrap;
    align-items: flex-start;

    @media screen and (max-width: 768px) {
        width: calc((100vw / var(--vw-small))*336);
        gap: calc((100vw / var(--vw-small))*47) 0;
    }

    .case {
        width: calc((100vw / var(--vw-large))*336);

        @media screen and (max-width: 768px) {
            width: 100%;
        }

        a {
            text-decoration: none;
            color: #524D38;
        }

        .top {
            .thum_contents {
                position: relative;
                margin-bottom: calc((100vw / var(--vw-large))*10);
                height: calc((100vw / var(--vw-large))*225);

                @media screen and (max-width: 768px) {
                    margin-bottom: calc((100vw / var(--vw-small))*10);
                    height: calc((100vw / var(--vw-small))*225);
                }

                img {
                    object-fit: cover;
                    height: calc((100vw / var(--vw-large))*225);

                    @media screen and (max-width: 768px) {
                        height: calc((100vw / var(--vw-small))*225);

                    }
                }

                .case_num {
                    position: absolute;
                    left: calc((100vw / var(--vw-large))*-8);
                    top: calc((100vw / var(--vw-large))*-18);
                    font-size: calc((100vw / var(--vw-large))*22);
                    line-height: 159.091%;
                    letter-spacing: calc((100vw / var(--vw-large))*6);
                    background: #4B9F9F;
                    padding: 0 calc((100vw / var(--vw-large))*8);

                    @media screen and (max-width: 768px) {
                        left: calc((100vw / var(--vw-small))*-6);
                        top: calc((100vw / var(--vw-small))*-17);
                        font-size: calc((100vw / var(--vw-small))*22);
                        letter-spacing: calc((100vw / var(--vw-small))*6);
                        padding: 0 calc((100vw / var(--vw-small))*8);
                    }
                }
            }

            .profile {
                color: #7D7D7D;
                font-weight: 500;

                @media screen and (max-width: 768px) {
                    margin-bottom: calc((100vw / var(--vw-small))*10);
                }

                .inner {
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    margin-bottom: calc((100vw / var(--vw-large))*10);

                    .age_wrap {
                        margin: 0 calc((100vw / var(--vw-large))*15);

                        @media screen and (max-width: 768px) {
                            margin: 0 calc((100vw / var(--vw-small))*15);
                        }
                    }
                }

            }

            h3 {
                font-size: calc((100vw / var(--vw-large))*16);
                font-weight: 500;
                text-align: left;
                display: block;
                line-height: normal;

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                }
            }
        }

        .bottom {
            margin: calc((100vw / var(--vw-large))*10) auto;
            justify-content: flex-start;

            @media screen and (max-width: 768px) {
                margin: calc((100vw / var(--vw-small))*15) auto;

            }

            .img {
                width: calc((100vw / var(--vw-large))*50);
                margin-right: calc((100vw / var(--vw-large))*10);
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;

                @media screen and (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*50);
                    margin-right: calc((100vw / var(--vw-small))*10);
                }

                img {
                    height: calc((100vw / var(--vw-large))*50);
                    object-fit: cover;
                    border-radius: 50%;

                    @media screen and (max-width: 768px) {
                        height: calc((100vw / var(--vw-small))*50);
                    }
                }
            }
        }

        .view_flex {
            justify-content: flex-start;

            span {
                color: #4B9F9F;
                font-weight: 500;
                line-height: normal;
            }

            .view {
                margin-right: calc((100vw / var(--vw-large))*20);

                @media screen and (max-width: 768px) {
                    margin-right: calc((100vw / var(--vw-small))*20);

                }
            }
        }
    }
}

.wp-pagenavi {
    margin: calc((100vw / var(--vw-large))*60) auto;

    @media screen and (max-width: 768px) {
        margin: calc((100vw / var(--vw-small))*60) auto;
    }

    a {
        color: #524D38;

    }
}

.wp-pagenavi .page {
    display: inline-block;
    text-align: center;
    width: calc((100vw / var(--vw-large))*40);
    line-height: calc((100vw / var(--vw-large))*40);
    border: solid calc((100vw / var(--vw-large))*1) #524D38;
    margin: auto calc((100vw / var(--vw-large))*5);
    text-decoration: none;
    transition: 0.3s ease-out;
    color: #524D38;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    @media screen and (max-width: 768px) {
        width: calc((100vw / var(--vw-small))*40);
        line-height: calc((100vw / var(--vw-small))*40);
        border: solid calc((100vw / var(--vw-large))*1) #524D38;
        margin: auto calc((100vw / var(--vw-small))*5);
    }
}


.wp-pagenavi .page:hover {
    background: #4B9F9F;
    color: #fff;
    border: solid calc((100vw / var(--vw-large))*1) #4B9F9F;

}

.wp-pagenavi .current {
    display: inline-block;
    width: calc((100vw / var(--vw-large))*40);
    line-height: calc((100vw / var(--vw-large))*40);
    border: solid calc((100vw / var(--vw-large))*1) #524D38;
    margin: auto calc((100vw / var(--vw-large))*5);
    color: #fff;
    background: #524D38;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;

    @media screen and (max-width: 768px) {
        width: calc((100vw / var(--vw-small))*40);
        line-height: calc((100vw / var(--vw-small))*40);
        border: solid calc((100vw / var(--vw-large))*1) #524D38;
        margin: auto calc((100vw / var(--vw-small))*5);
        font-size: calc((100vw / var(--vw-small))*14);
    }
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
    line-height: calc((100vw / var(--vw-large))*40);
    margin: auto calc((100vw / var(--vw-large))*6);
    transition: 0.3s ease-out;

    @media screen and (max-width: 768px) {
        line-height: calc((100vw / var(--vw-small))*40);
        margin: auto calc((100vw / var(--vw-small))*6);
    }
}

.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .first:hover,
.wp-pagenavi .last:hover {
    color: #4B9F9F;
    color: #fff;
}