@charset "UTF-8";
/********************************************************************************

page-service.css　サービスcss

********************************************************************************/

/*============================================================
 ページヘッダー
*============================================================*/
#page-service #page-header::before {
    background-image: url(../images/service/page-header-bg.jpg);
}
#page-service .page-header-deco .deco01 {
    fill: #FFD855;
}
#page-service .page-header-deco .deco02 {
    fill: #55B0FF;
}

/*============================================================
 セクション共通
*============================================================*/
#page-service .section {
}

/*============================================================
 セクション ブランドの成長を最大化
*============================================================*/
#page-service #sec-growth {
    margin-bottom: 136px;
}
#page-service #sec-growth .block-scroll-fade-item {
    background-image: url(../images/service/growth-bg20230912.png);
    background-repeat: no-repeat;
    background-position: top 26px left calc(50vw + 94px);
    background-size: 711px auto;
    position: relative;
}
#page-service #sec-growth .growth-info {
    max-width: 582px;
    width: 56%;
    margin: 0 auto 112px 0;
}
#page-service #sec-growth .growth-info .growth-notice {
    width: min(434px, calc(50vw - 112px));
    font-size: 12px;
    line-height: 200%;
    letter-spacing: 0.04em;
    position: absolute;
    top: 643px;
    left: calc(50vw + 96px);
}
#page-service #sec-growth .growth-info .sec-title {
    margin-bottom: 40px;
}
#page-service #sec-growth .growth-info .growth-catch {
    font-weight: bold;
    font-size: 40px;
    line-height: 150%;
    letter-spacing: 0.02em;
    margin-bottom: 40px;
}
#page-service #sec-growth .growth-info .growth-catch span {
    display: inline-block;
    background: linear-gradient(90deg, #00BAFF 0%, #56DE00 29.69%, #FBC500 53.65%, #FF4B6F 74.48%, #C5A1FA 100%);
    border-radius: 100px;
    line-height: 150%;
    color: #fff;
    padding: 2px 16px;
    margin: 0 4px;
}
#page-service #sec-growth .growth-info .growth-lead {
    letter-spacing: 0.04em;
    margin-bottom: 48px;
}
#page-service #sec-growth .growth-info .measures-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}
#page-service #sec-growth .growth-info .measures-list .measures {
    gap: 32px;
}
#page-service #sec-growth .growth-info .measures-list .measures .image {
    width: 160px;
}
#page-service #sec-growth .growth-info .measures-list .measures .info {
    flex: 1;
}
#page-service #sec-growth .growth-info .measures-list .measures .info .title {
    font-size: 24px;
}
#page-service #sec-growth .growth-info .measures-list .measures .info .lead {
    font-size: 14px;
    letter-spacing: 0.04em;
}
#page-service #sec-growth .growth-data {
    gap: 40px;
}
#page-service #sec-growth .growth-data .info {
    flex: 1;
}
#page-service #sec-growth .growth-data .info .catch {
    font-weight: bold;
    font-size: 32px;
    line-height: 160%;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
#page-service #sec-growth .growth-data .info .notice {
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.04em;
}
#page-service #sec-growth .growth-data .image {
    width: 388px;
}

/*============================================================
 セクション 事業
*============================================================*/
#page-service #sec-business .business-list {
    gap: 0 140px;
}
#page-service #sec-business .business-list .item {
    width: 400px;
}
#page-service #sec-business .business-list .item .block-btn-circle {
    width: 400px;
    padding: 58px 0 0 0;
    color: #fff;
    text-align: center;
    margin-bottom: 96px;
    position: relative;
}
#page-service #sec-business .business-list .item-accelerator .block-btn-circle {
    --background-color: #55B0FF;
    --hover-background-color: #67B8FF;
}
#page-service #sec-business .business-list .item-rollup .block-btn-circle {
    --background-color: #FF4B6F;
    --hover-background-color: #FF6987;
}
#page-service #sec-business .business-list .item .block-btn-circle:after {
    content: "";
    display: block;
    width: 32px;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    position: absolute;
    bottom: -64px;
    left: calc(50% - 16px);
}
#page-service #sec-business .business-list .item-accelerator .block-btn-circle:after {
    background-color: #3CEFAF;
}
#page-service #sec-business .business-list .item-rollup .block-btn-circle:after {
    background-color: #FFD855;
}
#page-service #sec-business .business-list .item .block-btn-circle .image {
    margin-bottom: 24px;
}
#page-service #sec-business .business-list .item .block-btn-circle .title {
    font-weight: bold;
    font-size: 32px;
    line-height: 160%;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
#page-service #sec-business .business-list .item .block-btn-circle .lead {
    letter-spacing: 0.04em;
    margin-bottom: 40px;
}
#page-service #sec-business .business-list .item .info {
    padding: 16px;
    border-radius: 12px;
    background-color: var(--common-color-background2);
    font-size: 14px;
    line-height: 220%;
    letter-spacing: 0.04em;
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1099px) {
    /*============================================================
     セクション ブランドの成長を最大化
    *============================================================*/
    #page-service #sec-growth .block-scroll-fade-item {
        margin-bottom: 120px;
    }
    #page-service #sec-growth .block-scroll-fade-item {
        background-position: top 26px left calc(50vw + 32px);
    }
    #page-service #sec-growth .growth-info .growth-notice {
        width: min(448px, calc(50vw - 56px));
        left: calc(50vw + 32px);
    }
    #page-service #sec-growth .growth-info {
        width: 50%;
        margin-bottom: 80px;
    }
    #page-service #sec-growth .growth-info .measures-list .measures .image {
        width: 88px;
    }
    #page-service #sec-growth .growth-data {
        max-width: 560px;
        margin: 0 auto;
    }
    #page-service #sec-growth .growth-data .info {
        flex: unset;
        width: 100%;
    }
    #page-service #sec-growth .growth-data .info .catch {
        font-size: 24px;
    }
    #page-service #sec-growth .growth-data .image {
        max-width: 376px;
        width: 100%;
        margin: 0 auto;
    }
    @media screen and (max-width: 909px) {
        #page-service #sec-growth .block-scroll-fade-item {
            /* background-image: url(../images/service/sp-growth-bg.png); */
            background-position: top center;
            background-size: 542px auto;
            padding: 544px 0 0 0;
        }
        #page-service #sec-growth .growth-info .growth-notice {
            max-width: 560px;
            width: 100%;
            position: static;
            margin-bottom: 64px;
        }
        #page-service #sec-growth .growth-info {
            max-width: unset;
            width: 100%;
            padding: 0;
            margin-right: 0;
        }
    }

    /*============================================================
     セクション 事業
    *============================================================*/
    #page-service #sec-business .business-list {
        gap: 40px 32px;
    }
    #page-service #sec-business .business-list .item {
        width: 336px;
    }
    #page-service #sec-business .business-list .item .block-btn-circle {
        width: 336px;
        padding: 32px 0 0 0;
        margin-bottom: 80px;
    }
    #page-service #sec-business .business-list .item .block-btn-circle:after {
        bottom: -56px;
    }
    #page-service #sec-business .business-list .item .block-btn-circle .title {
        font-size: 24px;
        letter-spacing: 0;
    }
    #page-service #sec-business .business-list .item .info {
        min-height: 156px;
    }


}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     ページヘッダー
    *============================================================*/
    #page-service #page-header::before {
        background-image: url(../images/service/sp-page-header-bg.jpg);
    }
    
    /*============================================================
     セクション ブランドの成長を最大化
    *============================================================*/
    #page-service #sec-growth {
        margin-bottom: 88px;
    }
    #page-service #sec-growth .growth-info .growth-catch {
        font-size: 32px;
        line-height: 160%;
        letter-spacing: 0.06em;
    }
    @media screen and (max-width: 608px) {
        #page-service #sec-growth .block-scroll-fade-item {
            background-position: top left 24px;
        }
    }

    /*============================================================
     セクション 事業
    *============================================================*/
    #page-service #main-contents {
        padding-bottom: 96px;
    }
    #page-service #sec-business .business-list {
        width: 320px;
        margin: 0 auto;
    }
    #page-service #sec-business .business-list .item {
        width: 100%;
    }
    #page-service #sec-business .business-list .item .block-btn-circle {
        width: 320px;
        padding: 56px 0 0 0;
        margin-bottom: 0;
    }
    #page-service #sec-business .business-list .item .block-btn-circle:after {
        display: none;
    }
    #page-service #sec-business .business-list .item .block-btn-circle .image img {
        width: 100px;
    }
    #page-service #sec-business .business-list .item .block-btn-circle .title {
        font-size: 20px;
        line-height: 160%;
    }
    #page-service #sec-business .business-list .item .block-btn-circle .lead {
        font-size: 14px;
        line-height: 220%;
        margin-bottom: 24px;
    }
    #page-service #sec-business .business-list .item .info {
        display: none;
    }



}