@charset "UTF-8";

/* TOP ====================================================== */
/* ==========================================================

    body id="home"

    読み込み
    メイン：mv
    コンセプト：concept
    お知らせ：news
    施設案内：facility
    利用者様の声：voice
    入居までの流れ：flow

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

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

/* 読み込み ================================================= */
/* ========================================================= */
/* メイン =================================================== */

section.mv{
    padding-top: var(--header-height);
    background-color: var(--color-Bg-Beige01);

    .boxArea{
        position: relative;
        z-index: var(--zIndex-TopMain);

        /* ピース：左 */
        &::before{
            position: absolute;
            bottom: -8%;
            left: 1%;
            content: "";
            display: inline-block;
            width: 31%;
            aspect-ratio: 4/7;
            background: url(../img/top/main_bg_piece01.png) top left no-repeat;
            background-size: contain;
            transform: scale(0.6);
            transition: 5s cubic-bezier(0.22, 1, 0.36, 1);
            opacity: 0;
            z-index: 1;
        }

        /* ピース：右 */
        &::after{
            position: absolute;
            top: 5%;
            right: -3%;
            content: "";
            display: inline-block;
            width: 25%;
            aspect-ratio: 8/9;
            background: url(../img/top/main_bg_piece02.png) top left no-repeat;
            background-size: contain;
            transform: scale(0.3);
            transition: 2s cubic-bezier(0.22, 1, 0.36, 1);
            opacity: 0;
            z-index: 1;
        }

        .mainImg{
            position: relative;
            clear: both;
            display: flow-root;
            width: 100%;
            text-align: center;
            margin: 0 auto;
            z-index: 10;

            /* ピース：全体 */
            &::before{
                position: absolute;
                top: 0;
                left: 0;
                content: "";
                display: inline-block;
                width: 100%;
                aspect-ratio: 13/9;
                background: url(../img/top/main_img_piece01.png) top left no-repeat;
                background-size: contain;
                transition: 5s cubic-bezier(0.22, 1, 0.36, 1);
                opacity: 0;
                z-index: 2;
            }

            /* ピース：右下 */
            &::after{
                position: absolute;
                bottom: -15%;
                right: 5%;
                content: "";
                display: inline-block;
                width: 18%;
                aspect-ratio: 1/1;
                background: url(../img/top/main_img_piece02.png) top left no-repeat;
                background-size: contain;
                transform: scale(0.6);
                transition: 3s cubic-bezier(0.22, 1, 0.36, 1);
                opacity: 0;
                z-index: 1;
            }

            /* メイン画像 */
            img{
                width: 77%;   /* MAX（1,300px）時の画像は1,001px */
                aspect-ratio: 4/3;
                margin: 0 auto;
                transform: scale(0.4);
                transition: 5s cubic-bezier(0.16, 1, 0.3, 1);
                opacity: 0;
                z-index: 10;
            }

            /* メインコピー */
            .mainCopy{
                position: absolute;
                top: clamp(30px, 8.57vw + 8.57px, 120px);
                right: 23%;
                font-size: clamp(16px, 3.14vw - 2.85px, 38px);
                font-weight: 600;
                line-height: 1.6;
                letter-spacing: 0.14em;
                writing-mode: vertical-rl;   /* 縦書き */
                text-align: left;
                opacity: 0;
                z-index: 20;
            }

        }

    }

    @media screen and (width <= 600px){
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 45px, rgba(var(--color-Bg-Beige01-RGB), 1) 46px) top left no-repeat;

        .boxArea{
            width: 100%;

            /* ピース：左 */
            &::before{
                top: 2%;
                bottom: unset;
                left: -10%;
                width: 33%;
                aspect-ratio: 1/1;
                background: url(../img/top/main_bg_sp_piece01.png) top left no-repeat;
                background-size: contain;
            }

            /* ピース：右 */
            &::after{
                top: 1%;
                right: -7%;
                width: 40%;
                aspect-ratio: 1/1;
                background: url(../img/top/main_bg_sp_piece02.png) top left no-repeat;
                background-size: contain;
            }

            .mainImg{

                /* ピース：全体 */
                &::before{
                    aspect-ratio: 1/1;
                    background: url(../img/top/main_img_sp_piece01.png) top left no-repeat;
                    background-size: contain;
                }

                /* ピース：右下 */
                &::after{
                    bottom: -25%;
                    right: -18%;
                    width: 60%;
                    aspect-ratio: 1/1;
                    background: url(../img/top/main_img_sp_piece02.png) top left no-repeat;
                    background-size: contain;
                }

                /* メイン画像 */
                img{
                    width: 100%;
                    aspect-ratio: 1/1;
                }

                /* メインコピー */
                p.mainCopy{
                    top: 5px;
                    right: 50%;
                    font-size: 22px;
                    font-weight: 600;
                    line-height: 1.6;
                    letter-spacing: 0.14em;
                    margin-top: 0;
                    transform: translateX(50%);
                }

            }

        }

    }

    /* アニメーション --------------------------------------- */
    &.bgAnim{

        .boxArea{

            /* ピース：左 */
            &::before{
                transition-delay: 0.5s;
                transform: scale(1);
                opacity: 1;
            }

            /* ピース：右 */
            &::after{
                transition-delay: 0.8s;
                transform: scale(1);
                opacity: 1;
            }

            .mainImg{

                /* ピース：全体 */
                &::before{
                    transition-delay: 3s;
                    opacity: 1;
                }

                /* ピース：右下 */
                &::after{
                    transition-delay: 1.7s;
                    transform: scale(1);
                    opacity: 1;
                }

                /* メイン画像 */
                img{
                    transition-delay: 1s;
                    transform: scale(1);
                    opacity: 1;
                }

            }

        }

    }

}

/* メイン =================================================== */
/* ========================================================= */
/* コンセプト =============================================== */

section.concept{
    padding-bottom: min(4%, 50px);
    /* 波画像 */
    background: url(../img/top/concept_wave_bottom.svg) bottom -1px center no-repeat;
    background-size: 1920px;

    @media screen and (width <= 1300px){
        background-size: var(--img-ratio-Wave);
    }

    @media screen and (width <= 600px){
        background-position: bottom -1px left -200px;
        background-size: 1300px;
    }

    .boxArea{
        position: relative;
        padding-top: clamp(50px, 7.14vw + 7.14px, 100px) !important;
        padding-bottom: 150px;
        background-image: url(../img/top/concept_bg01.jpg);
        background-position: bottom left;
        background-repeat: no-repeat;
        background-size: 30%;

        /* ピース：右下 */
        &::after{
            position: absolute;
            bottom: clamp(10px, 2.14vw - 2.86px, 25px);
            right: 15%;
            content: "";
            display: inline-block;
            width: 15%;
            aspect-ratio: 10/9;
            background: url(../img/top/concept_bg_piece01.png) top left no-repeat;
            background-size: contain;
        }

        /* コピー */
        .conceptTxt{
            /* 画像が背景版 */
            /* デザインと異なる縮小する場合：テキストの縮小率がウィンドウの横幅の縮小率と異なるため、固定値から固定値で変化させる必要がある */
            width: clamp(440px, 40vw + 200px, 720px);
            margin-left: clamp(50px, 40vw - 190px, 330px);
            padding: 0;
            background-image: url(../img/top/concept_img01.jpg);
            background-position: bottom right;
            background-repeat: no-repeat;
            background-size: 48%;
        }

        /* ボタン */
        .bt{
            margin-top: 3% !important;
            /* デザインと異なる縮小する場合 */
            margin-left: clamp(50px, 40vw - 190px, 330px) !important;
        }

        @media screen and (width <= 600px){
            padding-top: 0 !important;
            padding-bottom: 40px;
            background-image: none;

            /* ピース：右下 */
            &::after{
                bottom: -20px;
                right: -10px;
                width: 25%;
            }

            /* コピー */
            .conceptTxt{
                width: 80%;
                margin-left: 10%;
                padding-bottom: 22vh;
                background-position: bottom center;
                background-size: 70%;

                p:first-child{
                    margin-top: 0;
                }

            }

            /* ボタン */
            .bt{
                margin-top: 5% !important;
                margin-left: auto !important;
            }

        }

    }

}

/* コンセプト =============================================== */
/* ========================================================= */
/* お知らせ ================================================= */

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

    .boxArea{
        padding-top: min(6%, 80px);
        padding-bottom: 0;
        /* 一覧横幅は、下記padding設定で調整する */
        padding-left: clamp(30px, 17.14vw - 72.86px, 150px);
        padding-right: clamp(30px, 17.14vw - 72.86px, 150px);

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

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

            /* swiper設定時 */
            position: relative;
            z-index: 10;
        }

        /* ボタン */
        .bt{
            margin-top: 6%;
        }

    }

}

/* お知らせ ================================================= */
/* ========================================================= */
/* 施設案内 ================================================= */

section.facility{
    /* 波画像 */
    background: url(../img/top/facility_wave_top.svg) center top -1px no-repeat,
                url(../img/top/facility_wave_bottom.svg) center bottom -1px no-repeat;
    background-color: var(--color-Bg-Beige01);
    background-size: 1920px;

    @media screen and (width <= 1300px){
        background-size: var(--img-ratio-Wave);
    }

    .boxArea{
        position: relative;
        padding-top: min(17.7%, 230px);
        padding-bottom: min(17.7%, 230px);

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

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

        /* 各施設 */
        .facilityArea{

            /* 共通 ----------------------------------------- */

            /* 文章エリアの横幅 */
            --width-facilityMain: 57%;
            /* 画像の横幅 */
            --width-facilityImg: calc(100% - var(--width-facilityMain));
            /* ボタンの余白 */
            --margin-side-bt: calc(var(--width-facilityMain) / 2);

            position: relative;
            width: 100%;
            margin-top: clamp(40px, 4.28vw + 14.28px, 70px);

            /* 画像エリア */
            .facilityImg{
                position: relative;
                width: var(--width-facilityImg);
                margin-top: 4%;
                z-index: 20;

                img{
                    width: 100%;
                    aspect-ratio: 5/4;
                    object-fit: cover;
                }

                /* コピー */
                p{
                    position: absolute;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: clamp(80px, 11.43vw + 11.43px, 160px);
                    aspect-ratio: 1/1;
                    font-size: clamp(10px, 0.57vw + 6.57px, 14px);
                    font-weight: 400;
                    line-height: 1.6em;
                    color: #FFF;
                    padding: clamp(10px, 0.71vw + 5.71px, 15px);
                    border-radius: 50%;
                }

            }

            /* 文章エリア */
            .facilityMain{
                position: relative;
                width: var(--width-facilityMain);
                margin: 0;
                padding-top: 3.5%;
                padding-bottom: 7%;
                padding-left: 5%;
                padding-right: 5%;
                background-color: #FFF;
                border-radius: var(--border-radius-M);
                z-index: 10;

                p{
                    text-align: justify;
                }

                /* タイトル */
                .facilityTl{
                    position: relative;
                    text-align: center;
                    padding-bottom: 2%;
                    border-bottom: 2px solid #CCC;
                }

                /* サブタイトル */
                .facilityTlsub{
                    /* この一覧の共通部分は、common.cssの「施設のサブタイトル」で一元管理している */

                    /* 共通部分の個別設定（上書き含む） */
                    margin: 6% auto 8%;
                    padding-left: 1em;
                    padding-right: 1em;
                }

            }

            /* ボタン */
            .bt{
                position: relative;
                z-index: 20;
            }

            /* カーサ花みずき ------------------------------- */
            &.casa{
                padding-left: 2%;
                padding-right: 8%;

                /* ピース：左上 */
                &::before{
                    position: absolute;
                    top: -12%;
                    left: -8%;
                    content: "";
                    display: inline-block;
                    width: 18%;
                    aspect-ratio: 6/7;
                    background: url(../img/top/facility_casa_piece01.png) top left no-repeat;
                    background-size: contain;
                    z-index: 1;
                }

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

                /* 画像エリア */
                .facilityImg{
                    float: left;

                    /* 画像 */
                    img{
                        border-radius: var(--border-radius-M) 0 0 var(--border-radius-M);
                    }

                    /* コピー */
                    p{
                        top: calc(clamp(80px, 10vw + 20px, 150px) * -1);
                        right: calc(clamp(300px, 50vw + 0px, 730px) * -1);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        background-color: var(--color-Design-Casa02);
                    }

                }

                /* 文章エリア */
                .facilityMain{
                    float: right;

                    /* タイトル */
                    .facilityTl{

                        /* 画像 */
                        img{
                            width: 55%;
                        }

                    }

                }

                /* ボタン */
                .bt{
                    margin-right: var(--margin-side-bt) !important;
                    margin-left: auto !important;
                    transform: translateX(50%) translateY(-4%);
                }

            }

            /* コンシェルジュ花みずき ------------------------ */
            &.concierge{
                padding-left: 8%;
                padding-right: 2%;

                /* ピース：左下 */
                &::before{
                    position: absolute;
                    bottom: -45%;
                    left: -12%;
                    content: "";
                    display: inline-block;
                    width: 36%;
                    aspect-ratio: 12/13;
                    background: url(../img/top/facility_concierge_piece01.png) top left no-repeat;
                    background-size: contain;
                    z-index: 1;
                }

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

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

                    /* ピース：左下 */
                    &::before{
                        bottom: -26%;
                    }

                    /* ピース：右下 */
                    &::after{
                        bottom: 6%;
                    }

                }

                /* 画像エリア */
                .facilityImg{
                    float: right;

                    /* 画像 */
                    img{
                        border-radius: 0 var(--border-radius-M) var(--border-radius-M) 0;
                    }

                    /* コピー */
                    p{
                        top: calc(clamp(80px, 10vw + 20px, 150px) * -1);
                        left: calc(clamp(300px, 50vw + 0px, 730px) * -1);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        background-color: var(--color-Design-Concierge02);
                    }

                }

                /* 文章エリア */
                .facilityMain{
                    float: left;

                    /* タイトル */
                    .facilityTl{

                        /* 画像 */
                        img{
                            width: 80%;
                        }

                    }

                }

                /* ボタン */
                .bt{
                    margin-right: auto !important;
                    margin-left: var(--margin-side-bt) !important;
                    transform: translateX(-50%) translateY(-4%);
                }

            }

        }

        @media screen and (width <= 600px){
            width: 100%;
            padding-bottom: 7vh;

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

            /* ピース：下 */
            &::after{
                bottom: -10px;
                right: 0;
                width: 30%;
            }

            /* 各施設 */
            .facilityArea{
                margin-top: 20px;

                /* 共通 ------------------------------------- */

                /* 画像エリア */
                .facilityImg{
                    width: 85%;

                    /* 画像 */
                    img{
                        aspect-ratio: 7/4;
                    }

                    /* コピー */
                    p{
                        width: 80px;
                        font-size: 10px;
                    }

                }

                /* 文章エリア */
                .facilityMain{
                    width: 90%;
                    margin-top: -80px;
                    padding-top: 100px;
                    padding-bottom: 9vh;
                }

                /* カーサ花みずき ---------------------------- */
                &.casa{
                    padding-left: 0;
                    padding-right: 0;

                    /* ピース：左上 */
                    &::before{
                        top: -12%;
                        left: -8%;
                        width: 30%;
                        aspect-ratio: 12/13;
                        background: url(../img/top/facility_casa_piece02.png) top left no-repeat;
                        background-size: contain;
                    }

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

                    /* 画像エリア */
                    .facilityImg{
                        float: none;

                        /* 画像 */
                        img{
                            border-radius: 0 var(--border-radius-M) var(--border-radius-M) 0;
                        }

                        /* コピー */
                        p{
                            top: -30px;
                            right: -30px;
                        }

                    }

                    /* 文章エリア */
                    .facilityMain{
                        float: none;
                        margin-left: 10%;
                        padding-right: 15%;
                        border-radius: 0 0 0 var(--border-radius-M);

                        /* タイトル */
                        .facilityTl{

                            /* 画像 */
                            img{
                                width: 60%;
                            }

                        }

                    }

                    /* ボタン */
                    .bt{
                        margin-right: auto !important;
                        margin-left: auto !important;
                        transform: translateY(-200%);
                    }

                }

                /* コンシェルジュ花みずき -------------------- */
                &.concierge{
                    margin-top: 0;
                    padding-left: 0;
                    padding-right: 0;

                    /* ピース：左下 */
                    &::before{
                        bottom: -7vh;
                        left: -5%;
                        width: 30%;
                    }

                    /* ピース：右下 */
                    &::after{
                        top: -15vh;
                        bottom: unset;
                        right: 0;
                        width: 30%;
                    }

                    /* 画像エリア */
                    .facilityImg{
                        float: none;
                        margin-left: 15%;

                        /* 画像 */
                        img{
                            border-radius: var(--border-radius-M) 0 0 var(--border-radius-M);
                        }

                        /* コピー */
                        p{
                            top: -30px;
                            left: -30px;
                        }

                    }

                    /* 文章エリア */
                    .facilityMain{
                        float: none;
                        padding-left: 15%;
                        border-radius: 0 0 var(--border-radius-M) 0;

                        /* タイトル */
                        .facilityTl{

                            /* 画像 */
                            img{
                                width: 85%;
                            }

                        }

                    }

                    /* ボタン */
                    .bt{
                        margin-right: auto !important;
                        margin-left: auto !important;
                        transform: translateY(-200%);
                    }

                }

            }

        }

    }

}

/* 施設案内 ================================================= */
/* ========================================================= */
/* 利用者様の声 ============================================= */

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

    .boxArea{
        position: relative;
        width: 100%;
        text-align: center;
        padding-top: 0;

        /* 声の一覧 */
        .voiceList{
            position: relative;
            width: 100%;
            z-index: 20;

            /* swiper（上書き含む）*/
            ul.swiper-wrapper{
                transition-timing-function: linear;
                filter: drop-shadow(2px 3px 2px rgba(var(--color-Shadow-RGB), 0.05));   /* 左右の位置px 上下の位置px ぼかし具合px 色 */

                & > li{
                    position: relative;
                    margin-top: clamp(20px, 2.86vw + 2.86px, 40px);   /* 影の上部が切れないように「.voiceList」ではなく、ここに上部の余白を持たせる */
                    margin-bottom: 50px;   /* 吹き出しの下部の三角が切れないように余白を持たせる（あえて固定値にしている） */
                    padding: clamp(15px, 2.86vw - 2.14px, 35px) 0;
                    background-color: #FFF;
                    border-radius: var(--border-radius-M);

                    &::after{
                        position: absolute;
                        bottom: calc(clamp(20px, 1.43vw + 11.43px, 30px) * -1);
                        right: 35px;
                        content: "";
                        width: 0;
                        height: 0;
                        margin: 0;
                        border-top: 40px solid #FFF;
                        border-left: 8px solid transparent;
                        border-right: 10px solid transparent;
                        transform: rotate(-30deg);
                    }

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

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

                    }

                    /* タイトル */
                    .voiceTl{
                        text-align: left;
                        margin: clamp(10px, 2.14vw - 2.86px, 25px) 10% 0;
                        padding-bottom: clamp(10px, 2.14vw - 2.86px, 25px);
                        border-bottom: 1px solid #CCC;
                    }

                    /* 下の段 */
                    &.vlDown{
                        margin-top: clamp(50px, 7.14vw + 7.14px, 100px);
                    }

                }

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

                    & > li{

                        &::after{
                            bottom: -22px;
                        }

                    }

                }

            }

        }

        /* 画像一覧 */
        .voiceImg{
            position: relative;
            top: 0;
            margin-top: calc(clamp(70px, 1.43vw + 61.43px, 80px) * -1);
            width: 100%;
            z-index: 10;

            /* 波画像 */
            &::after{
                position: absolute;
                bottom: -1px;
                left: 0;
                display: inline-block;
                content: "";
                width: 100%;
                aspect-ratio: 91/10; /* 1920 × 200 */
                background: url(../img/top/voice_wave_bottom.svg) bottom -1px center no-repeat;
                background-size: 1920px;
                z-index: 1;
            }

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

                &::after{
                    background-size: var(--img-ratio-Wave);
                }

            }

            /* swiper（上書き含む）*/
            ul.swiper-wrapper{
                transition-timing-function: linear;

                & > li{

                    img{
                        width: 100%;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                        object-position: center;
                    }

                }

            }

            /* ボタン */
            .bt{
                position: absolute;
                top: 30%;
                left: 50%;
                transform: translateX(-50%);
                z-index: 20;
            }

        }

    }

}

/* 利用者様の声 ============================================= */
/* ========================================================= */
/* 入居までの流れ =========================================== */

section.flow{
    /* 波画像 */
    background: var(--color-Bg-Beige02) url(../img/top/flow_wave_bottom.svg) bottom -1px center no-repeat;
    background-size: 1920px;

    @media screen and (width <= 1300px){
        background-size: var(--img-ratio-Wave);
    }

    .boxArea{
        padding-top: clamp(30px, 4.28vw + 4.28px, 60px);
        padding-bottom: clamp(47px, 14.71vw - 41.28px, 150px);

        .flowList{
            margin-top: clamp(20px, 2.85vw + 2.85px, 40px);

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

                li{
                    position: relative;
                    counter-increment: flowCounter;
                    /* 100%：8% 15% 8% 15% 8% 15% 8% 15% 8% */
                    width: 15%;
                    margin-top: clamp(30px, 5.71vw - 4.29px, 70px);
                    margin-right: 8%;
                    text-align: center;

                    /* 矢印 */
                    &::before{
                        position: absolute;
                        top: 50%;
                        right: -37%;
                        content: "";
                        width: 22%;
                        aspect-ratio: 3/2;
                        background-image: url(../img/top/flow_arrow.svg);
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        transform: translateY(-50%);
                    }

                    /* 最初：矢印を消す、左余白はそのまま（中央寄せにするため）*/
                    &:last-child{

                        &::before{
                            display: none;
                        }

                    }

                    /* 4の倍数番目：右余白を左余白と同じだけ付与する（中央寄せにするため）*/
                    &:nth-child(4n){
                        margin-right: 8%;
                    }

                    /* 最後：右余白を0にする（4の倍数番目になった時のため）*/
                    &:last-child{
                        margin-right: 0;
                    }

                    @media screen and (width <= 1000px){
                        /* 100%：5.6% 18% 5.6% 18% 5.6% 18% 5.6% 18% 5.6% */
                        width: 18%;
                        margin: 30px 5.6% 0 0;

                        /* 矢印 */
                        &::before{
                            right: -25%;
                            width: 20%;
                        }

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

                    }

                    /* 番号 */
                    &::after{
                        position: absolute;
                        top: -1%;
                        right: 20px;   /* 1461px以上 */
                        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%;
                    }

                    /* 1001px～1460pxまでの計算 */
                    /* 数字のサイズの調整で1300pxではなく1460pxまでサイズ変化させている */
                    @media screen and (width <= 1460px){

                        &::after{
                            right: clamp(0px, 3.27vw - 32.71px, 15px);  /* MIN：1001px ～ MAX：1460px（両サイドの余白が5%の場合）*/
                        }

                    }

                    /* 601px～1000pxまでの計算 */
                    @media screen and (width <= 1000px){

                        &::after{
                            right: clamp(0px, 2.5vw - 15px, 10px);  /* MIN：600px ～ MAX：1000px */
                        }

                    }

                    /* 600px以下 */
                    /* 下記に記載 */

                    span{
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: flex-end;
                        width: 100%;
                        aspect-ratio: 1/1;
                        color: var(--color-Bt-03);
                        padding-bottom: 10%;  /* 20px */
                        background-color: #FFF;
                        background-position: center 45%;
                        background-repeat: no-repeat;
                        background-size: 50%;
                        border-radius: 50%;

                        /* STEP */
                        &::before{
                            position: absolute;
                            top: 3%;
                            left: 0;
                            display: inline-block;
                            content: "STEP";
                            width: 100%;
                            color: var(--color-Bt-03);
                        }

                    }

                    &:nth-child(1){

                        span{
                            background-image: url(../img/flow/flow_icon01.svg);
                        }

                    }

                    &:nth-child(2){

                        span{
                            background-image: url(../img/flow/flow_icon02.svg);
                        }

                    }

                    &:nth-child(3){

                        span{
                            background-image: url(../img/flow/flow_icon03.svg);
                        }

                    }

                    &:nth-child(4){

                        span{
                            background-image: url(../img/flow/flow_icon04.svg);
                        }

                    }

                    &:nth-child(5){

                        span{
                            background-image: url(../img/flow/flow_icon05.svg);
                        }

                    }

                    &:nth-child(6){

                        span{
                            background-image: url(../img/flow/flow_icon06.svg);
                        }

                    }

                    &:nth-child(7){

                        span{
                            background-image: url(../img/flow/flow_icon07.svg);
                        }

                    }

                }

            }

        }

        /* ボタン */
        .bt{
            margin-top: 7%;
            margin-left: 8%;
        }

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

            .flowList{
                margin-top: 0;

                ol{
                    width: 90%;
                    justify-content: unset;
                    margin: 0 4% 0 6%;

                    li{
                        width: 38%;
                        margin-right: 12%;

                        /* 矢印 */
                        &::before{
                            right: -25%;
                            width: 20%;
                        }

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

                        /* 番号 */
                        &::after{
                            right: 0;
                        }

                    }

                }

            }

            /* ボタン */
            .bt{
                width: 40%;
                margin-top: -20%;
                margin-left: auto;
                margin-right: 10%;

                a,
                input{
                    padding-right: 10%;

                    &::before{
                        right: 10%;
                    }

                }

            }

        }

    }

}

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