@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #241613;
    --red-card: #BD3220;
    --gray-usui: #F9F9F9;
    --beige-matsuru: #E4CEBF;
    --gray-matsuru: #DED9D1;
    --green-matsuru: #628774;
    --beige-matsuru: #E4CEBF;
    --beige-media: #F3EEE4;
    --gray-access: #F2F2F2;
    --gray-about: #D6D6D6;
    --red-footer: #AC3131;
    --green-card: #5B8973;
    --gray-card: #DED9D0;
    --black-card: #272D32;
    --brown-card: #E2CABA;
    --brown2-card: #E6CDBD;
    --transparent: rgba(0,0,0,0);
    --bg-opacity: 0;
}
/* ヘッダーのh1ロゴとテキストの色変更 */
.site-header h1 img{
    filter: grayscale(1) brightness(0);
}
nav ul li a,.global-nav li a{
    color: var(--black);
}
.main-inner{
    width: 100%;
    height: 100%;
    background: var(--beige-media);
}
#spf{
    width: 100%;
    padding: 10rem 0;
    overflow: hidden;
    position: relative;

    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;
        .h2-news-eve{
            width: 210px;
            aspect-ratio: 210/110;
            margin: 0 auto;
        }
        .h2-spf{
            width: 343px;
            aspect-ratio: 343/127;
            margin: 0 auto;
        }
    }

    .list-container{
        width: min(1280px,80%);
        height: auto;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 5%;

        .list-item{
            width: max(324px,30%);
            height: auto;
            background: var(--white);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: transform 0.4s ease;
            flex-shrink: 0;
            margin-bottom: 4rem;

            a{
                width: 100%;
                height: 100%;
                .img-frame{
                    width: 100%;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    position: relative;
                    img{
                        width: 100%;
                        height: auto;
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
                .text-content{
                    width: 100%;
                    aspect-ratio: 16/9;
                    overflow: hidden;
                    padding: 1.25rem 1.75rem;
                    position: relative;
                    h2{
                        display: block;
                        font-size: 1.25rem;
                        line-height: 1.8;
                        color: var(--black);
                        font-weight: 500;
                        margin-bottom: 1rem;
                    }
                    p{
                        font-size: 1rem;
                        color: var(--black);
                        line-height: 1.8;
                    }
                    .white-shadow{
                        width: 100%;
                        height: 6rem;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        background: linear-gradient(
                            to top,
                            #ffffff 0%,
                            rgba(255,255,255,0.9) 25%,
                            rgba(255,255,255,0.4) 50%,
                            rgba(255,255,255,0) 100%
                        );
                    }
                }
            }
        }
        .list-item:hover{
            transform: scale(1.03);
            z-index: 10;
        }
        .list-item a:focus,
        .list-item a:focus-visible{
            outline: none;
        }
    }

    .page-btn{
        width: fit-content;
        margin: 2rem auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        a{
            display: block;
            width: fit-content;
            padding: 0 0.5rem;
            font-size: 1erm;
            color: var(--gray);
        }
    }
}

/* 詳細ページの仮css */
#spf02{
    width: 100%;
    padding: 10rem 0 10rem;
    overflow: hidden;
    position: relative;
    background: var(--white);

    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;
        .h2-news-eve{
            width: 210px;
            aspect-ratio: 210/110;
            margin: 0 auto;
        }
        .h2-spf{
            width: 343px;
            aspect-ratio: 343/127;
            margin: 0 auto;
        }
    }
    .news-detail-item{
        width: min(900px, 80%);
        height: auto;
        margin: 0 auto;
        background: var(--white);
        h2{
            width: fit-content;
            margin: 0 auto 2rem;
            font-size: 1.5rem;
            line-height: 1.8;
            font-weight: 600;
        }
        .news-detail-content{
            width: 100%;
            height: auto;
            margin-bottom: 4rem;
            img{
                display: block;
                width: 100%;
                height: auto;
            }
        }
        p{
            font-size: 1rem;
            line-height: 1.8;
        }
        .news-navigation{
            font-size: 0.875rem;
            margin: 0 auto;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            .nav-prev a,
            .nav-back a,
            .nav-next a{
                color: var(--black);
                white-space: nowrap;
            }
            .nav-prev a:hover,
            .nav-back a:hover,
            .nav-next a:hover{
                color: var(--gray-about);
                background-color: nane;
            }
        }
    }
}
.page-btn a[aria-current="page"]{
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: bold;
}


@media screen and (max-width:820px){
    #spf{
        padding: 10rem 0 8rem;
        hgroup{
            width: 100%;
            margin: 0 auto 2rem;
            .h2-news-eve{
                width: 110px;
            }
            .h2-spf{
                width: 179px;
            }
            .wave-line-gray,.wave-line-white{
                width: min(290.01px, 80%);
                margin: 0 auto;
            }
        }
    }
}

/* MEDIAページはヘッダー内テキストの色変更 */
@media screen and (max-width: 767px){
    #spf0,#spf02{
        padding: 8rem 0;
    }
    /* 白い3本線 */
    .nav-btn{
        position: absolute;
        top: 2rem;
        right: 1rem;
        width: 4rem;
        height: 3rem;
        display: block;
        cursor: pointer;
        z-index: 99;
    }
    .nav-btn::before,
    .nav-btn::after{
        content: "";
        position: absolute;
        left: 0.5rem;
        right: 0.5rem;
        height: 0.1rem;
        background: #241613;
        transition: transform .35s ease, top .35s ease, opacity .35s ease;
    }
    .nav-btn::before{ top: 0.25rem; }
    .nav-btn::after{  top: 2rem; }
    /* 真ん中線は span を使わず background で作る */
    .nav-btn{
        background:
            linear-gradient(#241613,#241613) 0.5rem 1.1rem / calc(100% - 1rem) 0.1rem no-repeat;
        transition: background-size .35s ease;
    }
    #nav-toggle:checked + .nav-btn{
        background-size: 0 0;
    }

    #nav-toggle:checked + .nav-btn::before{
        top: 1.1rem;
        transform: rotate(45deg);
        background: #fff;
    }

    #nav-toggle:checked + .nav-btn::after{
        top: 1.1rem;
        transform: rotate(-45deg);
        background: #fff;
    }
    nav ul li a, .global-nav li a{
        color: var(--white);
    }
}

@media screen and (max-width:680px){
    #spf{
        .news-detail-item{
            .news-navigation{
                flex-direction: column;
                gap: 1rem;
            }
        }
    }
}

@media screen and (max-width:540px){
    #spf,#faq-page{
        padding: 9rem 0;
    }

    #spf{
        .category{
            width: 90%;
            .category-inner{
                column-gap: 8px;
                button{
                    width: 158px;
                    padding: 0 1rem;
                }
            }
        }
        .list-container{
            width: 90%;
            .list-item{
                .text-content{
                    h4{
                        line-height: 1;
                        .sp-none{
                            display: none;
                        }
                        .sp-br{
                            display: block;
                        }
                    }
                }
            }
        }
    }
    #spf{
        padding: 6rem 0;
        .news-detail-item{
            width: 90%;

            .text-content{
                h4{
                    line-height: 1;

                    .sp-none{
                        display: none;
                    }

                    .sp-br{
                        display: block;
                    }
                }
            }
        }
    }
    #spf02{
        padding: 6rem 0;
    }
}