@charset "UTF-8";

/* 花みずきについて ========================================== */
/* ==========================================================

    body id="services"

    読み込み
    H2：pageTitle
    サポート：support
    大切：precious
    会社概要：corporate

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

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

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

section{

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

        /* 共通部分の個別設定（上書き含む）*/
        background-color: #fff;
        background-image: url(../img/services/page_bg.png);   /* 上書き */
        background-position: center bottom;   /* 上書き */

        /* 写真 */
        &::before{
            display: none;
        }

        .boxArea{
            /* 波画像の上に表示させるため、section.pageTitleの疑似（before）にではなく（非表示にしている）、ここに画像を設定している */
            height: clamp(260px, 32.55vw + 64.65px, 540px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
            background-image: url(../img/services/page_img.png);
            background-position: right 26% center;
            background-repeat: no-repeat;
            background-size: 40%;

            /* ピース：左下（ベースに上書き） */
            &::before{
                position: absolute;
                bottom: -12%;
                left: -2%;
                content: "";
                display: inline-block;
                width: 24%;
                aspect-ratio: 7/6;
                background: url(../img/services/page_bg_piece01.png) top left no-repeat;
                background-size: contain;
                z-index: 1;
            }

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

            /* H2 */
            .tlDesign01{
                position: relative;
                background: none;

                /* ピース */
                &::after{
                    position: absolute;
                    top: calc(clamp(45px, 6.42vw + 6.42px, 90px) * -1);
                    left: 20%;
                    content: "";
                    display: inline-block;
                    width: 26%;
                    aspect-ratio: 1/1;
                    background: url(../img/common/h2_piece01.png) top left no-repeat;
                    background-size: contain;
                }

                h2{

                    img{
                        height: clamp(36px, 3.42vw + 15.42px, 60px);   /* カーサとコンシェルジュで画像の横幅が異なるので、高さで調整する */
                    }

                }

            }

            p{
                text-align: center;
                margin-top: clamp(140px, 20.93vw + 14.41px, 320px);   /* MIN：600px ～ MAX：1460px（両サイドの余白が5%の場合）*/
            }

        }

        @media screen and (width <= 600px){
            margin-bottom: 0;
            background-position: center bottom;   /* 上書き */

            .boxArea{
                height: 350px;
                background-position: center bottom 10px;
                background-size: 60%;

                /* ピース：左下（ベースに上書き） */
                &::before{
                    top: unset;
                    bottom: -45px;
                    left: -3%;
                    width: 35%;
                }

                /* H2 */
                .tlDesign01{

                    /* ピース */
                    &::after{
                        top: 25px;
                        left: -70px;
                        width: 25%;
                    }

                    h2{
                        padding-left: 0;
                        padding-right: 0;
                    }

                }

                p{
                    text-align: left;
                    margin-top: 40px;
                    margin-left: 10%;
                }

            }

        }

    }

}

/* H2 ====================================================== */
/* ========================================================= */
/* サポート ================================================= */

section.support{
    position: relative;
    /* 波画像 */
    background-image: url(../img/services/support_wave_bottom.svg);
    background-position: center bottom -1px;
    background-repeat: no-repeat;
    background-size: 1920px;

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

    /* ピース：右下 */
    &::after{
        position: absolute;
        bottom: -4%;
        right: 18%;
        content: "";
        display: inline-block;
        width: min(17%, 240px);
        aspect-ratio: 4/3;
        background: url(../img/services/support_bg_piece01.png) top left no-repeat;
        background-size: contain;
        z-index: -1;
    }

    .boxArea{
        position: relative;
        padding-top: clamp(20px, 4.28vw - 5.71px, 50px);
        padding-bottom: clamp(100px, 14.28vw + 14.28px, 200px);
        z-index: 10;

        /* ピース：右上 */
        &::before{
            position: absolute;
            top: -15%;
            right: -3%;
            content: "";
            display: inline-block;
            width: 20%;
            aspect-ratio: 5/7;
            background: url(../img/services/support_img_piece01.png) top left no-repeat;
            background-size: contain;
            z-index: -1;
        }

        .supportTxt{
            float: left;
            width: 45%;
            margin: 4% 0 0 6%;

            .copyM + p{
                margin-top: 10%;
                text-align: justify;
            }

        }

        img{
            float: right;
            width: 35%;
            aspect-ratio: 10/7;
            object-fit: cover;
            object-position: center;
            margin: 5% 6% 0;
            border-radius: var(--border-radius-M);
        }

    }

    @media screen and (width <= 600px){
        background-position: right -100px bottom;
        background-size: 1200px;

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

        .boxArea{
            padding-top: 20px;
            padding-bottom: 70px;

            /* ピース：右上 */
            &::before{
                top: -15vh;
                right: -2%;
                width: 40%;
            }

            .supportTxt{
                float: none;
                width: 100%;
                margin: 0;

                p.copyM{
                    margin-top: 5vh;
                }

                .copyM + p{
                    margin-top: 3vh;
                }

            }

            img{
                float: none;
                width: 100%;
                margin: 4vh 0 0;
            }

        }

    }

}

/* サポート ================================================= */
/* ========================================================= */
/* 大切 ==================================================== */

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

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

        /* ピース：左上 */
        &::before{
            position: absolute;
            top: calc(clamp(80px, 11.42vw + 11.42px, 160px) * -1);
            left: -16%;
            content: "";
            display: inline-block;
            width: 45%;
            aspect-ratio: 11/9;
            background: url(../img/services/precious_bg_piece01.png) top left no-repeat;
            background-size: contain;
            z-index: 10;
        }

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

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

            /* 横幅 */
            --width-preciousTxt: 47%;   /* 文章 */
            --width-img:         35%;   /* 写真 */
            --margin-side:        6%;   /* 両サイドの余白 */
            --width-counter: clamp(40px, 4.28vw + 14.28px, 70px);   /* 番号の丸 */

            li{
                position: relative;
                counter-increment: flowCounter;
                width: 100%;
                margin-top: 7%;

                /* 番号 */
                &::before{
                    position: absolute;
                    top: 0;
                    left: unset;
                    right: calc(var(--width-preciousTxt) + var(--margin-side) - var(--width-counter));   /* 番号の横幅分を引く */
                    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: 500;
                    line-height: 1;
                    color: #FFF;
                    width: var(--width-counter);
                    aspect-ratio: 1/1;
                    background-color: var(--color-Bt-03);
                    border-radius: 50%;
                }

                /* ピース：共通設定 */
                &::after{
                    position: absolute;
                    content: "";
                    display: inline-block;
                    background-position: top left;
                    background-repeat: no-repeat;
                    background-size: contain;
                }

                /* 文章 */
                .preciousTxt{
                    float: right;
                    width: var(--width-preciousTxt);
                    text-align: justify;
                    margin-top: clamp(60px, 4.28vw + 34.28px, 90px);
                    margin-left: 0;
                    margin-right: var(--margin-side);
                }

                /* 写真 */
                img{
                    position: relative;
                    float: left;
                    width: var(--width-img);
                    aspect-ratio: 10/7;
                    object-fit: cover;
                    object-position: center;
                    margin-left: var(--margin-side);
                    margin-right: 0;
                    border-radius: var(--border-radius-M);
                }

                /* 偶数は画像が右 */
                &:nth-child(2n){

                    /* 番号 */
                    &::before{
                        left: var(--margin-side);
                        right: unset;
                    }

                    /* 文章 */
                    .preciousTxt{
                        float: left;
                        margin-left: var(--margin-side);
                        margin-right: 0;
                    }

                    /* 写真 */
                    img{
                        float: right;
                        margin-left: 0;
                        margin-right: var(--margin-side);
                    }

                }

                &:nth-child(1){

                    /* 写真 */
                    img{
                        z-index: 10;
                    }

                    /* ピース */
                    &::after{
                        top: 60%;
                        left: -3%;
                        width: 15%;
                        aspect-ratio: 1/1;
                        background-image: url(../img/services/precious_img01_piece01.png);
                    }

                }

                &:nth-child(2){

                    /* ピース */
                    &::after{
                        top: 30%;
                        right: -18%;
                        width: 30%;
                        aspect-ratio: 9/10;
                        background-image: url(../img/services/precious_img02_piece01.png);
                    }

                }

                &:nth-child(3){

                    /* 写真 */
                    img{
                        z-index: 10;
                    }

                    /* ピース */
                    &::after{
                        top: -15%;
                        left: -25%;
                        width: 36%;
                        aspect-ratio: 1/1;
                        background-image: url(../img/services/precious_img03_piece01.png);
                    }

                }

            }

        }

    }

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

        .boxArea{

            /* ピース：左上 */
            &::before{
                top: -100px;
                left: -15%;
                width: 40%;
                aspect-ratio: 1/1;
                background: url(../img/services/precious_bg_sp_piece01.png) top left no-repeat;
                background-size: contain;
            }

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

            ol{

                li{
                    margin-top: 4vh;

                    /* 番号 */
                    &::before{
                        right: unset;
                        font-size: 20px;
                        width: 40px;
                    }

                    /* 文章 */
                    .preciousTxt{
                        float: none;
                        width: 100%;
                        margin: 0;

                        h4{
                            margin-top: 6px;
                            margin-left: 50px;
                        }

                    }

                    /* 写真 */
                    img{
                        float: none;
                        width: 100%;
                        aspect-ratio: 5/3;
                        margin: 4vh 0 0;
                    }

                    &:nth-child(2n){

                        /* 番号 */
                        &::before{
                            left: unset;
                        }

                        /* 文章 */
                        .preciousTxt{
                            float: none;
                            margin-left: 0;
                        }

                        /* 写真 */
                        img{
                            float: none;
                            margin-right: 0;
                        }

                    }

                    &:nth-child(1){

                        /* ピース */
                        &::after{
                            background-image: none;
                        }

                    }

                    &:nth-child(2){

                        /* ピース */
                        &::after{
                            top: unset;
                            bottom: -8vh;
                            right: -15%;
                            width: 40%;
                            aspect-ratio: 1/1;
                            background-image: url(../img/services/precious_img02_sp_piece01.png);
                        }

                    }

                    &:nth-child(3){

                        img{
                            z-index: 0;
                        }

                        /* ピース */
                        &::after{
                            top: unset;
                            bottom: -13vh;
                            left: -10%;
                            width: 35%;
                            aspect-ratio: 9/10;
                            background-image: url(../img/services/precious_img03_sp_piece01.png);
                        }

                    }

                }

            }

        }

    }

}

/* 大切 ==================================================== */
/* ========================================================= */
/* 会社概要 ================================================ */

section.corporate{
    /* 波画像 */
    background: url(../img/services/corporate_wave_top.svg) center top -1px no-repeat;
    background-size: 1920px;

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

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

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

        /* 表 */
        table{
            margin: 5% auto 0;

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

                th,
                td{
                    padding-top: clamp(20px, 1.43vw + 11.43px, 30px);
                    padding-bottom: clamp(20px, 1.43vw + 11.43px, 30px);
                }

                th{
                    width: 17%;
                    white-space: nowrap;
                    padding-right: 2%;
                }

            }

        }

        /* リスト */
        .listSquare{

            li{
                margin-top: 15px;
            }

        }

        /* 地図 */
        .googleMaps{
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 0;
            margin: clamp(20px, 1.43vw + 11.43px, 30px) 0 0;
            padding-bottom: 400px;
            border-radius: var(--border-radius-M);

            iframe{
                position: absolute;
                top: 0;
                left: 0;
                width: 100% !important;
                height: 100% !important;
            }

        }

    }

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

        .boxArea{

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

            /* 表 */
            table{

                tr{

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

                }

            }

            /* リスト */
            .listSquare{

                li{
                    margin-top: 10px;
                }

            }

            /* 地図 */
            .googleMaps{
                margin: 1vh 0 0;
                padding-bottom: 340px;
            }

        }

    }

}

/* 会社概要 ================================================ */
/* ========================================================= */