@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;
}

@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;
            }
        }
    }
}

.single-wrap {
    width: 58.82352941176471vw;
    margin: 3.088235294117647vw auto 1.911764705882353vw;
    text-align: left;

    .date {
        font-size: 1.0294117647058822vw;
        margin: 0 auto 0.7352941176470588vw;
        display: inline-block;
    }

    .single_title {
        padding: 0 0 1.5441176470588236vw;
        border-bottom: 1px solid #D5D5D5;
        margin: 0 auto 1.25vw;
    }

    .single_content {
        line-height: 1.5;
    }

    a {
        width: 9.705882352941178vw;
        display: block;
        margin: 5.588235294117648vw auto 0;
    }
}

@media(max-width:768px) {
    .single-wrap {
        width: 84.87179487179488vw;
        margin: 7.6923076923076925vw auto 10.76923076923077vw;

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

        .single_title {
            padding: 0 0 7.6923076923076925vw;
            margin: 0 auto 4.358974358974359vw;
            line-height: 1.5;
        }

        a {
            width: 33.84615384615385vw;
            margin: 11.282051282051283vw auto 0;
        }
    }
}