@charset "UTF-8";

/* 入居までの流れ ============================================ */
/* ==========================================================

    body id="flow"

    読み込み
    H2：pageTitle
    入居までの流れ：flow
    体験入居：experience
    必要事項：matter

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

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

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

section{

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

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

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

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

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

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* 入居までの流れ =========================================== */

section.flow{

    .facilityLogo{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: min(100%, 700px);
        margin: clamp(20px, 4.28vw - 5.71px, 50px) auto 0;

        li{
            width: 55%;
            text-align: center;

            &:first-child{
                width: 45%;
                /* padding-right: 5%; */
                border-right: 1px dotted #ccc;
            }

            img{
                width: fit-content;
                height: clamp(26px, 2.85vw + 8.85px, 46px);   /* 高さで調整する */
            }

            .facilityTlsub{
                margin: 3% auto 5%;
            }

        }

    }

    h3{
        text-align: center;
        margin-top: min(6%, 80px);
    }

    .boxArea{
        position: relative;
        padding-top: 0;
        padding-bottom: min(10%, 130px);
        padding-left: clamp(60px, 18.57vw - 51.42px, 190px);
        padding-right: clamp(60px, 18.57vw - 51.42px, 190px);
        z-index: 10;

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: clamp(200px, 28.57vw + 28.57px, 400px);
            left: -5%;
            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;
            z-index: -1;
        }

        /* ピース：左下 */
        &::after{
            position: absolute;
            bottom: calc(clamp(30px, 10vw - 30px, 100px) * -1);
            left: 0;
            content: "";
            display: inline-block;
            width: 30%;
            aspect-ratio: 1/1;
            background: url(../img/common/page_main_piece04.png) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }

        .flowList{
            position: relative;

            /* ピース：左下 */
            &::before{
                position: absolute;
                bottom: clamp(250px, 28.57vw + 78.57px, 450px);
                left: -35%;
                content: "";
                display: inline-block;
                width: 30%;
                aspect-ratio: 8/7;
                background: url(../img/common/page_main_piece03.png) top left no-repeat;
                background-size: contain;
                z-index: -1;
            }

            /* ピース：右中 */
            &::after{
                position: absolute;
                top: clamp(350px, 64.28vw - 35.71px, 800px);
                right: -25%;
                content: "";
                display: inline-block;
                width: 30%;
                aspect-ratio: 5/8;
                background: url(../img/common/page_main_piece02.png) top left no-repeat;
                background-size: contain;
                z-index: -1;
            }

            ol{

                li{
                    position: relative;
                    display: grid;
                    grid-template-columns: 25% 1fr;
                    justify-content: center;
                    align-items: center;
                    counter-increment: flowCounter;
                    margin-top: 5%;
                    padding: 4%;
                    background-color: var(--color-Bg-Beige01);
                    border-radius: var(--border-radius-M);

                    /* 縦棒 */
                    &::before{
                        position: absolute;
                        top: calc(clamp(40px, 5.71vw + 5.71px, 80px) * -1);
                        left: 50%;
                        content: "｜";
                        font-size: clamp(30px, 4.28vw + 4.28px, 60px);
                        color: var(--color-Design-Gray01);
                        transform: translateX(-50%);
                        z-index: -1;
                    }

                    &:first-child{

                        &::before{
                            content: "";
                        }

                    }

                    /* 画像 */
                    .flowIcon{
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        aspect-ratio: 1/1;
                        padding-top: 15%;
                        background-color: #fff;
                        border-radius: 50%;

                        /* STEP */
                        &::before{
                            position: absolute;
                            top: 1%;
                            left: 50%;
                            display: inline-block;
                            content: "STEP";
                            color: var(--color-Bt-03);
                            transform: translateX(-50%);
                        }

                        /* 番号 */
                        &::after{
                            position: absolute;
                            top: -5%;
                            right: clamp(0px, 3.48vw - 20.93px, 30px);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            content: counter(flowCounter, decimal-leading-zero);
                            font-size: var(--font-size-XL);
                            font-weight: var(--font-weight-XL);
                            line-height: 1;
                            color: #FFF;
                            width: clamp(30px, 2.86vw + 12.86px, 50px);
                            aspect-ratio: 1/1;
                            background-color: var(--color-Bt-03);
                            border-radius: 50%;
                        }

                        img{
                            width: 70%;
                        }

                    }

                    /* 文章 */
                    .flowText{
                        padding-left: 5%;

                        h4{
                            font-weight: 600;
                        }

                    }

                }

            }

        }

    }

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

        .facilityLogo{
            display: block;
            width: 70%;
            margin-top: 1vh;

            li{
                width: 100%;
                text-align: center;

                &:first-child{
                    width: 100%;
                    margin-bottom: 2vh;
                    padding-bottom: 1vh;
                    padding-right: 0;
                    border-bottom: 1px dotted #ccc;
                    border-right: none;

                    img{
                        width: 155px;
                        height: auto;
                    }

                }

                &:nth-of-type(2){

                    img{
                        width: 230px;
                        height: auto;
                    }

                }

            }

        }

        h3{
            margin-top: 3vh;
        }

        .boxArea{
            padding-left: 0;
            padding-right: 0;

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

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

            .flowList{

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

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

                ol{

                    li{
                        grid-template-columns: 30% 1fr;
                        margin-top: 2vh;
                        padding: 2vh 4%;

                        /* 縦棒 */
                        &::before{
                            top: -30px;
                            font-size: 30px;
                        }

                        /* 画像 */
                        .flowIcon{

                            /* 番号 */
                            &::after{
                                top: 0;
                                right: 0;
                                width: 26px;
                            }

                        }

                        /* 文章 */
                        .flowText{
                            padding-left: 10%;
                        }

                    }

                }

            }

        }

    }

}

/* 入居までの流れ =========================================== */
/* ========================================================= */
/* 体験入居 ================================================= */

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

    .boxArea{
        position: relative;
        padding-top: min(4%, 50px);
        padding-bottom: min(10%, 130px);
        padding-left: clamp(60px, 18.57vw - 51.42px, 190px);
        padding-right: clamp(60px, 18.57vw - 51.42px, 190px);

        /* ピース：右上 */
        &::after{
            position: absolute;
            top: -5%;
            right: -15%;
            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;
        }

        h3{
            text-align: center;

            & + p{
                text-align: center;
            }

        }

        .tableArea{
            padding: 5% 10%;
            margin-top: 5%;
            background-color: #fff;
            border-radius: var(--border-radius-M);

            /* 表 */
            table{
                width: 100%;

                tr{
                    border-bottom: 1px solid var(--color-Design-Gray01);

                    &:last-child{
                        border-bottom: none;
                    }

                }

                th,
                td{
                    padding-top: clamp(18px, 1.71vw + 7.71px, 30px);
                    padding-bottom: clamp(18px, 1.71vw + 7.71px, 30px);
                }

                th{
                    width: 20%;
                    text-align: center;
                    white-space: nowrap;
                    padding-right: 2%;
                }

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

                    th{
                        width: 25%;
                        padding-right: 3%;
                    }

                }

            }

        }

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

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

            h3{

                & + p{
                    text-align: left;
                }

            }

            .tableArea{
                padding: 1vh 5% 2vh;
            }

        }

    }

}

/* 体験入居 ================================================= */
/* ========================================================= */
/* 必要事項 ================================================= */

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

    .boxArea{
        position: relative;
        padding-top: 0;
        padding-bottom: min(10%, 130px);
        padding-left: clamp(60px, 18.57vw - 51.42px, 190px);
        padding-right: clamp(60px, 18.57vw - 51.42px, 190px);

        /* ピース：左下 */
        &::before{
            position: absolute;
            bottom: 50px;
            left: -17%;
            content: "";
            display: inline-block;
            width: 30%;
            aspect-ratio: 2/3;
            background: url(../img/common/page_main_piece07.png) top left no-repeat;
            background-size: contain;
        }

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

        h3{
            text-align: center;
        }

        .matterList{
            position: relative;
            padding: 5% 10%;
            margin-top: 5%;
            background-color: #fff;
            border-radius: var(--border-radius-M);
            z-index: 10;

            > ol{

                > li{
                    position: relative;
                    counter-increment: flowCounter;
                    padding: 5% 5% 5% 20%;
                    border-bottom: 1px solid var(--color-Design-Gray01);

                    /* 番号 */
                    &::after{
                        position: absolute;
                        top: 50%;
                        left: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        content: counter(flowCounter, decimal-leading-zero);
                        font-size: var(--font-size-XL);
                        font-weight: var(--font-weight-XL);
                        line-height: 1;
                        color: #FFF;
                        width: clamp(30px, 2.86vw + 12.86px, 50px);
                        aspect-ratio: 1/1;
                        background-color: var(--color-Bt-03);
                        border-radius: 50%;
                        transform: translateY(-50%);
                    }

                    &:last-child{
                        border-bottom: none;
                    }

                    .listTriangle{
                        margin-top: 3%;
                    }

                }

            }

        }

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

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

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

            .matterList{
                padding: 2vh 5%;

                > ol{

                    > li{
                        padding: 2vh 1% 2vh 22%;

                        /* 番号 */
                        &::after{
                            top: 22px;
                            left: 4%;
                            width: 40px;
                            font-size: var(--font-size-XL-Sp);
                            transform: none;
                        }

                        .listTriangle{
                            margin-top: 1.5vh;
                        }

                    }

                }

            }

        }

    }

}

/* 必要事項 ================================================= */
/* ========================================================= */