@charset "UTF-8";

.mv {
    width: 100vw;
    margin-top: 5.913235294117647vw;
    position: relative;

    .floating {
        position: fixed;
        width: 4.180882352941176vw;
        top: 20.66176470588235vw;
        right: 0;
        z-index: 100;

        img {

            /* 2枚目の画像は最初透明 */
            &:last-of-type {
                opacity: 0;
                transition: opacity .7s;
                position: fixed;
                width: 4.180882352941176vw;
                top: 20.66176470588235vw;
                right: 0;
            }
        }

        /* hoverすると2枚目の画像が透明じゃなくなる */
        &:hover img {
            opacity: 1;
        }
    }
}

/*フッターまでスクロールしたら消す*/
.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.news {
    .title-wrap {
        position: relative;
        padding: 2.941176470588235vw 0 3.602941176470588vw;

        h2 {
            z-index: 1;
            position: relative;
        }

        img {
            position: absolute;
            width: 34.48529411764706vw;
            top: 0;
            left: 50%;
            transform: translateY(0) translateX(-50%);
            z-index: 0;
        }
    }

    .news-wrap {
        width: 59.26470588235294vw;
        margin: 0 auto;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2.5735294117647056vw 0;
        position: relative;
        z-index: 2;

        .contents-wrap {
            width: 28.246323529411764vw;
            border-radius: 1.8382352941176472vw;
            background-color: #fff;
            padding: 2.5vw 0;
            border: 1px solid #C5CAD3;

            .contents-inner {
                width: 23.455882352941178vw;
                margin: 0 auto;

                .date {
                    font-size: 1.0294117647058822vw;
                    margin: 0 auto 0.29411764705882354vw;
                    text-align: left;
                    display: block;
                }

                .description {
                    text-align: left;
                    margin: 0 auto 2.0588235294117645vw;

                    .title {
                        font-weight: 700;
                        margin: 0 auto 0.7352941176470588vw;
                    }

                    .text {
                        line-height: 1.5;
                    }
                }

                img {
                    width: 15.147058823529411vw;
                }
            }
        }
    }

    .wp-pagenavi {
        margin: 3.8970588235294117vw auto 2.2058823529411766vw;
        width: 19.705882352941178vw;

        .current {
            color: #fff;
            background-color: #000;
            border: 1px #000 solid;
            border-radius: 0.29411764705882354vw;
            width: 2.2058823529411766vw;
            /* height: 2.2058823529411766vw; */
            text-align: center;
            font-size: 1.0294117647058822vw;
            font-weight: 700;
            margin: 0 0.3676470588235294vw 0;
            padding: 0.5882352941176471vw 0;
            display: inline-block;
        }

        .larger {
            color: #000;
            border: 1px #000 solid;
            border-radius: 0.29411764705882354vw;
            width: 2.2058823529411766vw;
            /* height: 2.2058823529411766vw; */
            text-align: center;
            font-size: 1.0294117647058822vw;
            font-weight: 700;
            margin: 0 0.3676470588235294vw 0;
            padding: 0.5882352941176471vw 0;
            display: inline-block;
        }

        .smaller {
            color: #000;
            border: 1px #000 solid;
            border-radius: 0.29411764705882354vw;
            width: 2.2058823529411766vw;
            /* height: 2.2058823529411766vw; */
            text-align: center;
            font-size: 1.0294117647058822vw;
            font-weight: 700;
            margin: 0 0 0 0.3676470588235294vw;
            padding: 0.5882352941176471vw 0;
            display: inline-block;
        }
    }
}

@media(max-width:768px) {
    .mv {
        margin-top: 13.24871794871795vw;

        .floating {
            position: fixed;
            width: 100vw;
            height: 14.52051282051282vw;
            top: initial;
            bottom: 0;
            right: 0;
            z-index: 100;

            img {

                /* 2枚目の画像は最初透明 */
                &:last-of-type {
                    opacity: 0;
                    transition: opacity .7s;
                    position: fixed;
                    width: 100vw;
                    height: 14.52051282051282vw;
                    top: initial;
                    bottom: 0;
                    right: 0;
                }
            }

            /* hoverすると2枚目の画像が透明じゃなくなる */
            &:hover img {
                opacity: 1;
            }
        }
    }

    .news {
        .title-wrap {
            padding: 5.384615384615385vw 0 9.487179487179487vw;

            img {
                width: 70.76923076923077vw;
            }
        }

        .news-wrap {
            flex-direction: column;
            width: 72.82051282051282vw;
            gap: 10.256410256410255vw 0;

            .contents-wrap {
                width: 100%;
                border-radius: 6.41025641025641vw;
                -webkit-border-radius: 6.41025641025641vw;
                -moz-border-radius: 6.41025641025641vw;
                -ms-border-radius: 6.41025641025641vw;
                -o-border-radius: 6.41025641025641vw;
                padding: 6.666666666666667vw 0;

                .contents-inner {
                    width: 56.15384615384615vw;

                    .date {
                        font-size: 3.5897435897435894vw;
                        margin: 0 auto 1.282051282051282vw;
                    }

                    img {
                        width: 52.820512820512825vw;
                    }
                }
            }
        }

        .wp-pagenavi {
            margin: 7.6923076923076925vw auto 2.2058823529411766vw;
            width: 68.71794871794872vw;

            .current {
                border-radius: 1.0256410256410255vw;
                width: 7.6923076923076925vw;
                /*height: 2.2058823529411766vw;
                */
                font-size: 3.5897435897435894vw;
                margin: 0 1.0256410256410255vw 0;
                padding: 2.564102564102564vw 0;
            }

            .larger {
                border-radius: 1.0256410256410255vw;
                width: 7.6923076923076925vw;
                /* height: 2.2058823529411766vw; */
                font-size: 3.5897435897435894vw;
                margin: 0 1.0256410256410255vw 0;
                padding: 2.564102564102564vw 0;
            }

            .smaller {
                border-radius: 1.0256410256410255vw;
                width: 7.6923076923076925vw;
                /* height: 2.2058823529411766vw; */
                font-size: 3.5897435897435894vw;
                font-weight: 700;
                margin: 0 0 0 1.0256410256410255vw;
                padding: 2.564102564102564vw 0;
            }
        }

    }
}