@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    --navy: #2a315b;
    --gray: #717070;
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;
    --info-title: #f9ebd7;

    --Caslon: 'Libre Caslon Text',serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    --NotoSansJP: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}

#news-eve,#spf{
    width: 100%;
    background: var(--cream);
    padding: 12rem 0 10rem;
    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;
        }
        .wave-line-white{
            width: 100%;
            margin: 0 auto 2.5rem;
        }
    }

    .category{
        width: min(1280px,80%);
        margin: 0 auto;
        text-align: center;

        .category-inner{
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            column-gap: 12px;
            row-gap: 16px;
            padding: 2rem 0 4rem;
            text-align: left;

            button{
                width: 138px;
                font-size: 13px;
                line-height: 2;
                color: var(--gray);
                padding: 0 0.25rem;
                border: 1px solid var(--gray);
                flex: 0 0 auto;
                box-sizing: border-box;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }

    .list-container{
        width: min(900px,80%);
        height: auto;
        margin: 0 auto;

        .list-item{
            width: 100%;
            border-bottom: solid 1px var(--gray);
            a{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 2rem 0.5rem;
                gap: 1rem;
                img{
                    width: 148px;
                    aspect-ratio: 1;
                    background: var(--gray-b3);
                }
                .text-content{
                    width: calc(100% - 148px - 1rem);
                    align-self: start;
                    h4{
                        white-space: nowrap;
                        line-height: 0.5;
                        margin-bottom: 1rem;
                        .date{
                            font-size: 0.875rem;
                            font-family: var(--ZenKakuGothicNew);
                        }
                        .category-name{
                            font-size: 13px;
                            font-weight: 500;
                            color: var(--black);
                            font-family: var(--ZenKakuGothicNew);
                            background: var(--gray-b3);
                            padding: 0 0.5rem;
                        }
                        .sp-none{
                            font-size: 0.875rem;
                        }
                        .sp-br{
                            font-size: 0;
                            display: none;
                        }
                    }
                    h3{
                        font-size: 1rem;
                        font-family: var(--ZenKakuGothicNew);
                        line-height: 1.6;
                    }
                }
            }
        }
    }

    .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 */
#news-eve,#spf{
    .news-detail-item{
        width: min(900px,80%);
        margin: 0 auto;

        .text-content{
            margin-bottom: 2rem;

            h4{
                white-space: nowrap;
                line-height: 0.5;
                margin-bottom: 1rem;

                .date{
                    font-size: 0.875rem;
                    font-family: var(--ZenKakuGothicNew);
                }

                .category-name{
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: var(--black);
                    font-family: var(--ZenKakuGothicNew);
                    background: var(--gray-b3);
                    padding: 0 1rem;
                }

                .sp-none{
                    font-size: 0.875rem;
                }

                .sp-br{
                    font-size: 0;
                    display: none;
                }
            }

            h3{
                font-size: 1.5rem;
                font-weight: bold;
                font-family: var(--ZenKakuGothicNew);
                line-height: 1.6;
            }
        }

        .news-detail-content{
            font-size: 1rem;
            line-height: 1.8;
            font-family: var(--ZenKakuGothicNew);

            p{
                font-size: 1rem;
                line-height: 1.8;
                margin-bottom: 1rem;
            }

            img{
                display: block;
                width: auto;
                max-width: 100%;
                height: auto;
                margin: 0 0 1rem;
            }

            a{
                color: inherit;
            }
        }
        .news-navigation{
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding-top: 4rem;
            a{
                display: block;
                width: 180px;
                line-height: 2;
                font-size: 1erm;
                color: var(--gray);
                border: 1px solid var(--gray);
                text-align: center;
            }
        }
    }
}
.page-btn a[aria-current="page"]{
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: bold;
}


@media screen and (max-width:820px){
    #news-eve,#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 screen and (max-width:680px){
    #news-eve,#spf{
        .news-detail-item{
            .news-navigation{
                flex-direction: column;
                gap: 1rem;
            }
        }
    }
}

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

    #news-eve,#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;
                        }
                    }
                }
            }
        }
    }
    #news-eve,#spf{
        .news-detail-item{
            width: 90%;

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

                    .sp-none{
                        display: none;
                    }

                    .sp-br{
                        display: block;
                    }
                }
            }
        }
    }
}