@charset "UTF-8";

/* 施設紹介：カーサ花みずき =================================== */
/* ==========================================================

    body id="casa"

    読み込み

    施設紹介の共通部分は、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/casa/page_img.jpg);
        }

    }

}

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

section.merit{

    .boxArea{

        h4.tlDesign03{

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

        }

        /* 一覧（ポイント） */
        .pointList{

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

                li{
                    position: relative;
                    counter-increment: flowCounter;
                    width: 31%;
                    margin-top: clamp(30px, 5.71vw - 4.29px, 70px);
                    margin-right: 3.5%;
                    text-align: center;
                    padding: clamp(20px, 2.32vw + 6.04px, 40px) clamp(13px, 1.97vw + 1.14px, 30px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                    background-color: #FFF;
                    border-radius: var(--border-radius-M);

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

                    /* POINT */
                    &::before{
                        position: absolute;
                        top: calc(clamp(13px, 1.16vw + 6.02px, 23px) * -1);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        left: clamp(40px, 9.30vw - 15.81px, 120px);          /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        display: inline-block;
                        content: "POINT";
                        width: 100%;
                        font-size: var(--font-size-XL);
                        font-weight: 600;
                        color: var(--color-Design-Casa02);
                        text-align: left;
                    }

                    /* 番号 */
                    &::after{
                        position: absolute;
                        top: calc(clamp(20px, 1.74vw + 9.53px, 35px) * -1);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        left: clamp(90px, 13.95vw + 6.27px, 210px);           /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        content: counter(flowCounter, decimal-leading-zero);
                        font-size: clamp(18px, 2.29vw + 4.29px, 34px);
                        font-weight: 400;
                        line-height: 1;
                        color: #FFF;
                        width: clamp(40px, 3.48vw + 19.06px, 70px);            /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        aspect-ratio: 1/1;
                        background-color: var(--color-Design-Casa02);
                        border-radius: 50%;
                    }

                    img{
                        width: 80%;
                        margin: 10px auto;
                    }

                    span{
                        font-weight: 600;
                        color: var(--color-Design-Casa02);
                    }

                    p{
                        text-align: left;
                    }

                }

            }

        }

    }

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

        .boxArea{

            /* 一覧（ポイント） */
            .pointList{

                ol{

                    li{
                        width: 48%;
                        margin-top: clamp(30px, 5.71vw - 4.29px, 70px);
                        margin-right: 4%;
                        padding: 10px 15px 15px;

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

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

                        /* POINT */
                        &::before{
                            top: -12px;
                            left: 26%;
                        }

                        /* 番号 */
                        &::after{
                            top: -17px;
                            left: 56%;
                            width: 34px;
                        }

                        img{
                            width: 90%;
                            margin: 10px auto;
                        }

                    }

                }

            }

        }

    }

}

/* メリット ================================================= */
/* ========================================================= */
/* 入居対象者 =============================================== */

section.eligible{

    .boxArea{

        .listBt{

            /* PDFボタン */
            .btPdf{

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

                    @media (hover:hover){

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

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

                        }

                    }

                }

            }

        }

    }

}

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

section.introduce{

    .boxArea{

        .tableArea{

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

        }

    }

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

        .boxArea{

            .tableArea{

                img{
                    width: 55%;
                }

            }

        }

    }

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

        .boxArea{

            .tableArea{

                img{
                    width: 50%;
                    margin: 0 25%;
                }

            }

        }

    }

}

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