@charset "UTF-8";

/*===== footer =====*/
.page-footer {
    width: 100%;
    height: auto;
    position: relative;
    background-color: black;
    color: white;
}

.page-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../image/texture/woodboard-01.jpg') !important;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.page-footer a {
    color: white;
    text-decoration: none;
}

.page-footer a:hover {
    color: yellow;
    text-decoration: none;
}

/*=== ページリンクセクション ===*/
.page-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    z-index: 3;
}

.film-page-link {
    width: 20%;
    height: 80px;
    margin: 10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: black;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
}

.film-page-link a {
    width: 90%;
    height: 70%;
    margin: 5px;
    background-color: yellow;
    color: black;
}

.film-page-link a:hover {
    background-color: red;
}

.film-page-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../image/texture/woodboard-02.jpg') !important;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.5;
    z-index: 2;
}

.stripe-page-link {
    width: 95%;
    height: 10%;
    background: repeating-linear-gradient(90deg,
            white 0%,
            white 10%,
            black 10%,
            black 20%);
    background-size: 20% 100%;
    /* ストライプのサイズを適切に */
    animation: moveStripes-x 4s linear infinite;
    display: block;
}

.img-page-link {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 1.0) inset;
}

/*=== ロゴ・内容セクション ===*/
.logo-and-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

/*ロゴエリア*/
.logo-footer {
    display: flex;
    justify-content: center;
    margin: 10px;
}

.logo-icon-footer {
    width: 5rem;
    height: auto;
    margin-right: 10px;
}

.logo-char-footer {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*内容エリア*/
.content-footer {
    width: auto;
    padding: 10px;
}

/*住所・連絡先*/
.info-footer {
    text-align: left;
    line-height: 30px;
    margin-bottom: 20px;
}

/*SNSリンク*/
.sns-footer {
    display: flex;
}

.sns-footer a {
    font-size: 2.0rem;
    color: white;
    margin: 10px;
}

/*=== コピーライト ===*/
.copyright {
    text-align: center;
    padding: 10px;
}

/*=== シネマスコープ ===*/
.cinema-scope {
    width: 100%;
    height: 60px;
    background-color: black;
}

.cinema-scope-fixed {
    width: 100%;
    height: 60px;
    background-color: black;
    position: fixed;
    bottom: 0;
    z-index: 8;
}





/*===== モバイル版 =====*/
@media (max-width: 800px) {

    /*===== footer =====*/
    /*=== ページリンクセクション ===*/
    .film-page-link {
        width: 24%;
        height: 60px;
        margin: 1px;
        padding: 5px;
    }

    .stripe-page-link {
        width: 95%;
        height: 10%;
        background: repeating-linear-gradient(90deg,
                white 0,
                white 5px,
                black 5px,
                black 10px);
        background-size: 10px 100px;
        /* ストライプのサイズを適切に */
        animation: moveStripes-x 6s linear infinite;
        display: block;
    }

    .link-name {
        font-size: 10px;
    }
}