@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))*60);
    }

    .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))*40);
                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);
            }
        }
    }
}

/* NEWS */
.news {
    position: relative;
    padding: 0 0 calc((100vw / var(--vw-large))*40);
    margin-bottom: calc((100vw / var(--vw-large))*150);

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

    .inner {
        position: relative;
        z-index: 1;
        width: calc((100vw / var(--vw-large))*955);
        margin: 0 auto;

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

        /*tabの形状*/
        .tab {
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: center;

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

            li {
                border-left: #524D38 calc((100vw / var(--vw-large))*0.5) solid;
                padding: 0 calc((100vw / var(--vw-large))*30);

                @media screen and (max-width: 768px) {
                    border-left: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    width: initial;
                    height: initial;
                    padding: 0 calc((100vw / var(--vw-small))*15);
                }

                a {
                    width: 100%;
                    display: block;
                    color: #524D38;
                    text-decoration: none;
                    line-height: normal;
                }

                &:last-child {
                    border-right: #524D38 calc((100vw / var(--vw-large))*0.5) solid;

                    @media screen and (max-width: 768px) {
                        border-right: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    }
                }

                &:nth-child(2) {
                    @media screen and (max-width: 768px) {
                        border-right: #524D38 calc((100vw / var(--vw-small))*0.5) solid;
                    }
                }
            }

            /*liにactiveクラスがついた時の形状*/

            li.active a {
                font-weight: 700;
            }
        }

        /* 初期は非表示だが要素自体の高さを確保しないパターン */
        .area {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity .35s ease, max-height .35s ease;
            /* パディングを無効にしている場合は調整 */

            ul {
                justify-content: center;

                li {
                    width: 100%;

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

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

                        .post-meta {
                            padding: calc((100vw / var(--vw-large))*30) 0;
                            border-bottom: calc((100vw / var(--vw-large))*0.5) #C1C1C1 solid;
                            text-align: left;
                            justify-content: flex-start;
                            align-items: flex-start;

                            @media screen and (max-width: 768px) {
                                flex-direction: column;
                                padding: calc((100vw / var(--vw-small))*15) 0;
                                border-bottom: calc((100vw / var(--vw-small))*0.5) #C1C1C1 solid;
                            }

                            time {
                                font-weight: 400;
                                line-height: normal;
                                width: calc((100vw / var(--vw-large))*150);
                                display: block;

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

                            .post-title {
                                font-size: calc((100vw / var(--vw-large))*16);
                                font-weight: 700;
                                line-height: normal;
                                display: block;
                                margin-bottom: calc((100vw / var(--vw-large))*10);

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

                            .post-description {
                                width: calc((100vw / var(--vw-large))*811);
                                font-weight: 400;
                                line-height: 200%;
                                letter-spacing: calc((100vw / var(--vw-large))*1.6);
                                /* 250% */

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

        }

        /* is-active で即表示 → トランジションでフェードイン */
        .area.is-active {
            opacity: 1;
            max-height: 1000px;
            /* 十分に大きな値（実コンテンツの高さより大きく） */
            padding: calc((100vw / var(--vw-large))*70) 0 calc((100vw / var(--vw-large))*60);
            /* 元のパディングを戻す */

            @media screen and (max-width: 768px) {
                width: 100%;
                padding: calc((100vw / var(--vw-small))*40) 0 calc((100vw / var(--vw-small))*68);
            }
        }
    }

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

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

    .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);
        color: #524D38;
        text-decoration: none;
        transition: 0.3s ease-out;
        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;
    }
}