@charset "UTF-8";

/* お知らせ ================================================== */
/* ==========================================================

    body id="news"

    読み込み
    H2：pageTitle
    検索：
    一覧：news

============================================================ */
/* 読み込み ================================================= */

@import url("./common.css");   /* 共通：全ページ */

/* 読み込み ================================================= */
/* ========================================================= */
/* H2 ====================================================== */

section{

    &.pageTitle{
        /* この一覧の共通部分は、common.cssの「タイトルデザイン」で一元管理している */

        /* 共通部分の個別設定（上書き含む）*/

        /* 写真 */
        &::before{
            background-image: url(../img/news/page_img.jpg);
        }

        @media screen and (width <= 600px){

            /* 写真 */
            &::before{
                background-position: right top;
                background-size: 120%;
            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* 検索 ==================================================== */

section.search{

    .boxArea{
        padding-top: min(2.3%, 30px);
        padding-bottom: min(4%, 50px);

        @media screen and (width <= 600px){
            padding-top: 0;
            padding-bottom: 4vh;
        }

        form{
            display: flex;
            flex-direction: row;
            align-items: stretch;

            .searchList{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                width: 50%;
                margin: 0 auto 0 25%;

                /* プルダウン */
                .searchPulldown{
                    position: relative;
                    margin-top: 3%;

                    &::before,
                    &::after{
                        position: absolute;
                        content: '';
                        pointer-events: none;
                    }

                    &::before{
                        display: inline-block;
                        top: 0.2em;
                        right: 0.2em;
                        width: 2.4em;   /* フォントサイズで高さを可変させるため「em」指定にしている */
                        aspect-ratio: 1/1;
                        border-radius: 999px;
                        background-color: var(--color-Bt-03);
                        transition: var(--transition-BtLink);
                    }

                    &::after{
                        position: absolute;
                        top: 47%;
                        right: 1.4em;
                        width: 8px;
                        height: 8px;
                        border-bottom: 2px solid #fff;
                        border-right: 2px solid #fff;
                        transform: translate(50%, -50%) rotate(45deg);
                        transition: var(--transition-BtLink);
                    }

                    select{
                        appearance: none;
                        width: auto;
                        height: 2.8em;
                        line-height: 1.2;
                        padding: 0.4em 2.8em 0.4em 0.8em;
                        background-color: #fff;
                        cursor: pointer;
                        border: none;
                        border-radius: 999px;
                        outline: 1px solid var(--color-Bt-03);
                    }

                    &:nth-child(1){
                        width: 100%;
                        margin-top: 0;

                        select{
                            width: 100%;
                        }

                    }

                    &:nth-child(2){
                        width: 40%;

                        select{
                            width: 100%;
                        }

                    }

                    &:nth-child(3){
                        width: 27%;
                        margin-left: 3%;

                        select{
                            width: 100%;
                        }

                    }

                    &:nth-child(4){
                        width: 27%;
                        margin-left: 3%;

                        select{
                            width: 100%;
                        }

                    }

                    @media (hover:hover){

                        &:hover{

                            &::before{
                                background-color: var(--color-Bt-02);
                            }

                            &::after{
                                border-bottom-color: var(--color-Bt-03);
                                border-right-color: var(--color-Bt-03);
                            }

                        }

                    }

                }

                @media screen and (width <= 600px){
                    width: 60%;
                    margin: 0 auto 0 5%;

                    /* プルダウン */
                    .searchPulldown{

                        &::before{
                            top: 0.2em;
                            right: 0.2em;
                            width: 2em;
                        }

                        &::after{
                            right: 1.2em;
                        }

                        select{
                            height: 2.4em;
                            padding: 0.4em 2.4em 0.4em 0.8em;
                        }

                        &:nth-child(1),
                        &:nth-child(2),
                        &:nth-child(3),
                        &:nth-child(4){
                            width: 100%;
                            margin-left: 0;
                        }

                        &:nth-child(3),
                        &:nth-child(4){
                            width: 47%;
                        }

                        &:nth-child(4){
                            margin-left: 6%;
                        }

                    }

                }

            }

            /* ボタン */
            .searchBt{
                display: flex;
                align-items: center;
                width: 25%;

                button{
                    position: relative;
                    overflow: hidden;
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    width: clamp(75px, 6.42vw + 36.42px, 120px);
                    aspect-ratio: 1/1;
                    font-size: var(--font-size-L);
                    line-height: 1.2;
                    color: var(--color-Bt-03);
                    margin: 0 auto 0 10%;
                    padding: 0;
                    background-color: var(--color-Bt-01);   /* 線と背景色の間の微妙な白をなくすために、あえて背景色をつけた */
                    border-width: 1px;
                    border-style: solid;
                    border-color: var(--color-Bt-03);
                    border-radius: 50%;
                    transition: var(--transition-BtLink);
                    z-index: 10;

                    &::after{
                        position: absolute;
                        content: "";
                        top: 0;
                        left: 0;
                        z-index: -1;
                        width: 100%;
                        aspect-ratio: 1/1;
                        border-radius: 50%;
                        transition: var(--transition-BtLink);
                        transform: scale(0.1);
                        opacity: 0;
                    }

                    @media (hover:hover){

                        &:hover{
                            color: var(--color-Bt-01);
                            background-color: var(--color-Bt-03);
                            border-color: var(--color-Bt-03);

                            &::after{
                                background-color: var(--color-Bt-03);
                                transform: scale(1);
                                opacity: 1;
                            }

                        }

                    }

                }

                @media screen and (width <= 600px){
                    width: 35%;
                    margin: 1vh 0 0;

                    button{
                        width: 80%;
                        font-size: var(--font-size-XL-Sp);
                        margin: 0 auto 0 15%;
                    }

                }

            }

        }

    }

}

/* 検索 ==================================================== */
/* ========================================================= */
/* 一覧 ==================================================== */

section.news{
    background-color: var(--color-Bg-Beige02);

    .boxArea{
        position: relative;
        /* 一覧の横幅は、下記padding設定で調整する */
        padding-left: min(2%, 26px);
        padding-right: min(2%, 26px);

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: 50px;
            left: -15%;
            content: "";
            display: inline-block;
            width: 20%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece01.png) top left no-repeat;
            background-size: contain;
        }

        /* ピース：右上 */
        &::after{
            position: absolute;
            top: 300px;
            right: -25%;
            content: "";
            display: inline-block;
            width: 30%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece05.png) top left no-repeat;
            background-size: contain;
        }

        /* 一覧 */
        .newsList{
            position: relative;
            z-index: 10;

            /* ピース：左下 */
            &::before{
                position: absolute;
                bottom: 0;
                left: -15%;
                content: "";
                display: inline-block;
                width: 20%;
                aspect-ratio: 3/5;
                background: url(../img/common/page_main_piece08.png) top left no-repeat;
                background-size: contain;
                z-index: -1;
            }

            /* ピース：右下 */
            &::after{
                position: absolute;
                bottom: -5%;
                right: -16%;
                content: "";
                display: inline-block;
                width: 25%;
                aspect-ratio: 1/1;
                background: url(../img/common/page_main_piece06.png) top left no-repeat;
                background-size: contain;
                z-index: -1;
            }

            /* 件数 */
            p.numberList{
                text-align: center;
                margin-top: 0;
            }

            /* これ以降の一覧の共通部分は、common.cssの「お知らせ」で一元管理している */

            /* 共通部分の個別設定（上書き含む）*/
            margin-top: 3%;     /* 上書き */
            margin-bottom: 0;   /* 上書き */

            & > div{

                & > ul{
                    /* 挙動の関係上、「display: grid;」ではなく「display: flex;」を使用している */
                    display: flex;
                    flex-wrap: wrap;

                    & > li{
                        align-items: center;
                        width: 25%;   /* 4カラム */

                        @media screen and (width <= 1300px){
                            width: 33%;   /* 3カラム */
                        }

                    }

                }

            }

        }

        /* ページャー */
        /* この共通部分は、common.cssの「ページャー」で一元管理している */

        /* 共通部分の個別設定（上書き含む）*/
        .pagination{
            margin-top: 5%;
        }

        @media screen and (width <= 600px){
            padding-top: 2vh;
            padding-bottom: 2vh;
            padding-left: 0;
            padding-right: 0;

            /* ピース：左上 */
            &::before{
                position: absolute;
                top: -2vh;
                left: -12%;
                content: "";
                display: inline-block;
                width: 25%;
                aspect-ratio: 1/1;
                background: url(../img/common/page_bg_piece01.png) top left no-repeat;
                background-size: contain;
                z-index: 10;
            }

            /* ピース：右上 */
            &::after{
                background: none;
            }

            /* 一覧 */
            .newsList{
                margin-top: 2vh;
                margin-bottom: 3vh;

                /* ピース：左下 */
                &::before{
                    background: none;
                }

                /* ピース：右下 */
                &::after{
                    position: absolute;
                    bottom: -6vh;
                    right: -20%;
                    content: "";
                    display: inline-block;
                    width: 35%;
                    aspect-ratio: 1/1;
                    background: url(../img/common/page_main_piece04.png) top left no-repeat;
                    background-size: contain;
                    z-index: -1;
                }

                /* 件数 */
                p.numberList{
                    margin-bottom: 2vh;
                }

                /* これ以降の一覧の共通部分は、common.cssの「お知らせ」で一元管理している */

                /* 共通部分の個別設定（上書き含む）*/
                & > div{

                    & > ul{

                        & > li{
                            width: 50%;
                        }

                    }

                }

            }

            /* ページャー */
            /* この共通部分は、common.cssの「ページャー」で一元管理している */

            /* 共通部分の個別設定（上書き含む）*/
            .pagination{
                position: relative;
                margin-top: 4vh;
                z-index: 10;
            }

        }

    }

}

/* 一覧 ==================================================== */
/* ========================================================= */