@charset "UTF-8";

/* 利用者様の声 ============================================== */
/* ==========================================================

    body id="voice"

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

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

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

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

section{

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

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

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

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

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

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* ボタン =================================================== */

section.btList{

    .boxArea{
        padding-top: min(3.8%, 50px);
        padding-bottom: min(6%, 80px);

        .categoryBt{
            position: relative;
            display: flex;
            justify-content: center;
            z-index: 30;

            li{
                margin: 0 1%;

                a{
                    position: relative;
                    overflow: hidden;
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    margin: 0;
                    padding: 0.4em 0.8em;
                    border-width: 1px;
                    border-style: solid;
                    border-radius: 999px;
                    transition: var(--transition-BtLink);
                    z-index: 0;

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

                    @media (hover:hover){

                        &:hover{

                            &::after{
                                transform: scale(1);
                                opacity: 1;
                            }

                        }

                    }

                }

                /* 選択中 */
                &.active{

                    a{
                        color: var(--color-Bt-01);
                        background-color: var(--color-Bt-03);
                        border-color: var(--color-Bt-03);
                    }

                }

            }

            /* 白からピンク */
            &.btWhite{

                li:not(.active){

                    a{
                        background-color: var(--color-Bt-01);   /* 線と背景色の間の微妙な白をなくすために、あえて背景色をつけた */
                        border-color: var(--color-Bt-03);

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

                            }

                        }

                    }

                }

            }

        }

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

            .categoryBt{
                flex-wrap: wrap;

                li{
                    margin-bottom: 10px;
                }

            }

        }

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

            .categoryBt{
                flex-wrap: wrap;
                width: 84%;
                margin: 0 auto;

                li{
                    width: 98%;
                    margin: 1vh 1% 0;

                    &:nth-child(1){
                        width: 38%;
                    }

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

                }

            }

        }

    }

}

/* ボタン =================================================== */
/* ========================================================= */
/* 一覧 ==================================================== */

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

    .boxArea{
        position: relative;
        padding-top: min(3.8%, 50px);

        /* 一覧の横幅は、下記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;
        }

        /* 一覧 */
        .voiceList{
            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: 0;
                right: -20%;
                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;
            }

            & > ul{
                display: flex;
                flex-wrap: wrap;

                & > li{
                    align-items: center;
                    width: 31%;
                    margin-top: clamp(20px, 2.86vw + 2.86px, 40px);
                    margin-right: 3.5%;
                    padding: clamp(15px, 2.86vw - 2.14px, 35px) 0;
                    background-color: #FFF;
                    border-radius: var(--border-radius-M);

                    &:nth-child(3n){
                        margin-right: 0;
                    }

                    @media screen and (width <= 834px){
                        width: 48%;
                        margin-right: 4%;

                        &:nth-child(3n){
                            margin-right: 4%;
                        }

                        &:nth-child(2n){
                            margin-right: 0;
                        }

                    }

                    /* 施設名 */
                    .catIcon{
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        & > li{
                            margin-top: 5px;
                            margin-right: 0;
                        }

                    }

                    /* タイトル */
                    .voiceTl{
                        font-weight: 600;
                        line-height: 1.4;
                        margin: clamp(20px, 1.43vw + 11.43px, 30px) 10% 0;
                        padding-bottom: clamp(10px, 2.14vw - 2.86px, 25px);
                        border-bottom: 1px solid #CCC;

                        @media screen and (width <= 600px){
                            margin: 15px 10% 0;
                        }

                    }

                    /* 年齢・性別 */
                    .voiceOld{
                        font-weight: 600;
                        text-align: center;

                    }

                    /* 文章 */
                    .voiceCome{
                        text-align: justify;
                        margin: clamp(10px, 2.14vw - 2.86px, 25px) 10% 0;
                        padding-bottom: clamp(10px, 2.14vw - 2.86px, 25px);
                    }

                }

            }

        }

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

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

            /* ピース：左上 */
            &::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;
            }

            /* 一覧 */
            .voiceList{
                z-index: 0;

                & > ul{

                    & > li{
                        width: 100%;
                        margin-right: 0 !important;
                    }

                }

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

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

            }

        }

    }

}

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