@charset "UTF-8";

/* 施設紹介：コンシェルジュ花みずき ============================ */
/* ==========================================================

    body id="concierge"

    読み込み

    施設紹介の共通部分は、facility.cssで一元管理している
    各「施設紹介」ごとの設定のみ下記に記載

    メリット：merit
        一覧（サービス）
    入居対象者：eligible
        PDFボタンのカラー
    施設紹介：introduce
        ロゴ画像の横幅

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

@import url("./swiper-bundle.min.css");   /* swiper */
@import url("./common.css");              /* 共通：全ページ */
@import url("./facility.css");            /* 共通：施設紹介 */

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

section{

    &.pageTitle{

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

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

            /* 写真 */
            &::before{
                background-position: left bottom;
            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* メリット ================================================= */

section.merit{

    .boxArea{

        h4.tlDesign03{

            /* 下線のカラー */
            &::before{
                background-color: var(--color-Design-Concierge02);
            }

        }

        /* 一覧（サービス） */
        .serviceList{
            margin-top: clamp(20px, 5.71vw - 14.28px, 60px);

            ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                width: 100%;
                margin: 0;

                li{
                    position: relative;
                    counter-increment: flowCounter;
                    width: 24%;
                    margin-right: 1.3%;
                    text-align: center;
                    padding: 2%;
                    background-color: #FFF;
                    border-radius: var(--border-radius-M);

                    &:last-child{
                        margin-right: 0;
                    }

                    h5{
                        position: relative;
                        display: grid;
                        align-items: center;
                        width: fit-content;
                        height: clamp(30px, 2.32vw + 16.04px, 50px);   /* アイコンと同じ高さ */
                        font-weight: 600;
                        line-height: 1.2;
                        color: var(--color-Design-Concierge02);
                        text-align: left;
                        margin: 0 auto;
                        padding-left: clamp(35px, 2.90vw + 17.55px, 60px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/

                        /* アイコン */
                        &::before{
                            position: absolute;
                            top: 50%;
                            left: 0;
                            content: "";
                            display: inline-block;
                            width: clamp(30px, 2.32vw + 16.04px, 50px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                            aspect-ratio: 1/1;
                            background-color: var(--color-Design-Concierge01);
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: contain;
                            border-radius: 50%;
                            transform: translateY(-50%);
                        }

                        &.life01{

                            &::before{
                                background-image: url(../img/concierge/service_life01_icon.svg);
                            }

                        }

                        &.life02{

                            &::before{
                                background-image: url(../img/concierge/service_life02_icon.svg);
                            }

                        }

                        &.life03{

                            &::before{
                                background-image: url(../img/concierge/service_life03_icon.svg);
                            }

                        }

                        &.life04{

                            &::before{
                                background-image: url(../img/concierge/service_life04_icon.svg);
                            }

                        }

                        &.care01{

                            &::before{
                                background-image: url(../img/concierge/service_care01_icon.svg);
                            }

                        }

                        &.care02{

                            &::before{
                                background-image: url(../img/concierge/service_care02_icon.svg);
                            }

                        }

                        &.care03{

                            &::before{
                                background-image: url(../img/concierge/service_care03_icon.svg);
                            }

                        }

                    }

                    img{
                        width: 100%;
                        aspect-ratio: 5/4;
                        object-fit: cover;
                        object-position: center;
                        margin: clamp(8px, 1.39vw - 0.37px, 20px) auto 0;   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        border-radius: var(--border-radius-M);
                    }

                    p{
                        text-align: left;
                    }

                }

            }

        }

    }

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

        .boxArea{

            .serviceList{
                margin-top: 2vh;

                ul{
                    justify-content: start;

                    li{
                        width: 49%;
                        margin-top: 1vh;
                        margin-right: 2%;
                        padding: 1vh 2% 2vh;

                        /* 2の倍数番目 */
                        &:nth-child(2n){
                            margin-right: 0;
                        }

                        h5{
                            height: 30px;   /* アイコンと同じ高さ */
                            padding-left: 33px;

                            /* アイコン */
                            &::before{
                                width: 30px;
                            }

                        }

                        img{
                            margin-top: 5px;
                        }

                    }

                }

            }

        }

    }

}

/* メリット ================================================= */
/* ========================================================= */
/* 幸せな毎日 =============================================== */

section.happy{

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

        .boxArea{

            /* ピース：右上 */
            &::after{
                position: absolute;
                top: -35vh;
                right: -17%;
                content: "";
                display: inline-block;
                width: 50%;
                aspect-ratio: 1/1;
                background: url(../img/facility/happy_bg_piece02.png) top left no-repeat;
                background-size: contain;
            }

        }

    }

}

/* 幸せな毎日 =============================================== */
/* ========================================================= */
/* 入居対象者 =============================================== */

section.eligible{

    .boxArea{

        .listBt{

            /* PDFボタン */
            .btPdf{

                a{
                    background-color: var(--color-Design-Concierge02);
                    border-color: var(--color-Design-Concierge02);

                    @media (hover:hover){

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

                            &::before,
                            &::after{
                                filter: var(--color-Design-Concierge02-Filter);
                            }

                        }

                    }

                }

            }

        }

    }

}

/* 入居対象者 =============================================== */
/* ========================================================= */
/* 施設紹介 ================================================= */

section.introduce{

    .boxArea{

        .tableArea{

            /* ロゴ画像の横幅 */
            img{
                width: 58%;
            }

        }

    }

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

        .boxArea{

            .tableArea{

                img{
                    width: 80%;
                }

            }

        }

    }

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

        .boxArea{

            .tableArea{

                img{
                    width: 74%;
                    margin: 0 13%;
                }

            }

        }

    }

}

/* 施設紹介 ================================================= */
/* ========================================================= */