main {
    background-color: #FAFAFA!important;
}

/* web pro */
#web-works{
    background: #F5F5F5;
}
#creative-intro{
    margin-top: 10%;
}
#creative-intro .intro-c{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 2em;
}
#creative-intro .key-word{
    margin-top: 3em;
}
#creative-intro .key-word .small-ttl{
    margin-bottom: 1em;

}
#creative-intro .key-word .word-wrap{
    display: flex;
    flex-wrap: wrap;


}
#creative-intro .key-word .word-wrap span{
    color: #646464;
    margin-right: 10px;
    margin-bottom: 10px;
    background: #E1E1E1;
    padding: 6px 5px;

}

.f-block{
    background: #ffffff;
    border: 2px solid #E1E1E1;
    padding: 3em;
    margin-bottom: 1.5em;

}
.f-block .con-wrap{
    display: flex;
    justify-content: space-between;
    

}
.f-block .con-wrap .txt-area{
    width: 64.6%;

}
.f-block .con-wrap .txt-area .mini-btn-wrap{
    display: flex;
    justify-content: end;
    margin-top: 3.3em;

}
.f-block .con-wrap .txt-area .zenkaku{
    font-weight: 600;

}
.f-block .con-wrap .txt-area .bold-txt{
    font-weight: 600;
    font-size: 20px;
    line-height: 1.8;
    margin: 10px 0 1.5em;

}
.f-block .con-wrap .img-area {
    width: 28.53%;
}
.flow-img-area{
    margin-top: 5em;
}
.flow-list-box{
    margin-top: 3em;
}
.flow-list-box li{
    padding: 2em 0;
    border-bottom: 2px solid #E1E1E1;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.flow-list-box li .flow-name{
    width: 20.29%;
    padding-left: 80px;
    position: relative;

}
.flow-name p:first-of-type{
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}
.flow-name p:last-of-type{
    font-size: 12px;
    font-weight: var(--l-gray);
}
.flow-list-box li:nth-of-type(1) .flow-name:before{
    content: '';
    background: url(../under_img/num-circle01.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(2) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle02.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(3) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle03.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(4) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle04.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(5) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle05.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(6) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle06.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li:nth-of-type(7) .flow-name:before{
    content: '';
    background: url(../under_img/num-cicrle07.svg);
    background-size: contain;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    position: absolute;

}
.flow-list-box li .detail-txt{
    width: 72.25%;

}
#flow .content-wrap .mini-btn-wrap{
    display: flex;
    justify-content: end;
    margin-top: 3em;
}
#web-works .mini-btn-wrap{
    justify-content: end;
    display: flex;
    margin-top: 3em;
}
#web-works .content-area{
    display: flex;
    justify-content: space-between;
}

.WebProduction{
    font-weight: 600;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: var(--black);
    position: relative;
    padding-left: 40px;
}
.WebProduction::before {
    content: '';
    background: url(../under_img/website_icon.svg);
    width: 30px;
    height: 30px;
    background-size: contain;
    top: 0;
    left: 0;
    position: absolute;
}

.flow-list-box li:last-of-type{
    border-bottom: none;

}

/* webmarke */
#detail-txt-area {
    width: 80%;
    margin-bottom: 5em;
}
.method-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.method-box .point-block {
    width: 47.0588%;
    border-top: 1px solid;
    padding-top: 10px;
}
.method-box .point-block:not(:nth-of-type(3)):not(:nth-of-type(4)){
    padding-bottom: 4em;

}

.point-block .p-title{
    font-weight: 600;
    font-size: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

}
.p-title .zenkaku{
    font-size: 32px;

}
.p-title .line{
    display: inline-block;
    width: 2px;
    height: 32px;
    background: var(--black);
    margin: 0 10px;
}
.check-area {
    margin-top: 20px;
    background: #E1E1E1;
    padding: 15px;
}
.check-area p{
    position: relative;
    padding-left: 22px;

}
.check-area p::before{
    content: '';
    background: url(../under_img/marke_check.svg);
    width: 16px;
    height: 16px;
    background-size: contain;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;

}
#case .content-box {
    background: #ffffff;
    border: 2px solid #E1E1E1;
    padding: 3em 4em;
}
.content-box .cl-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2em;
}
.content-box .problem{
    padding-left: 3em;
    text-indent: -3em;
    margin: 1em 0 2em;
}

.detail-area{
    padding: 2em;
    display: flex;
    gap: 3%;
    justify-content: center;
    align-items: center;
}
.detail-area div:first-of-type{
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.detail-area div:first-of-type p{
    color: #ffffff;
}
.detail-area div:last-of-type{
    width: 86.07%;

}
.g-detail div:last-of-type p{
    padding-left: 1em;
    text-indent: -1em;

}
.g-detail{
    background: var(--white);
}
.g-detail div:first-of-type {
    background-color: #969696;
}
.f-detail{
    border: 1px solid ;
}
.f-detail div:first-of-type {
    background-color: var(--l-gray);
}
.content-box .bottom-arw {
    height: 20px;
    margin: 2em 0;
}
.content-box .bottom-arw img{
    height: 20px;

}
.measures-block{
    margin-bottom: 1em;
}
.measures-block .table-area{
    margin: 8px 0 1em;
}

/* other creatives */

.variety-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.variety-box .v-block {
    width: 21%;
    padding: 0 1em 5em;
    border-right: 1px solid #C8C8C8;
    position: relative;
}
.variety-box .v-block:last-of-type{
    border-right: none;
}

.v-block .name {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}
.v-block .img-area {
    width: 150px;
    margin: 5px auto 15px;
}
.v-block .detail p{
    position: relative;
    padding-left: 22px;
}
.v-block .detail p::before{
    content: '';
    background: url(../under_img/marke_check.svg);
    width: 16px;
    height: 16px;
    background-size: contain;
    top: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    margin: auto;

}
.v-block .mini-btn-wrap{
    display: flex;
    justify-content: end;
    position: absolute;
    bottom: 0;
    right: 20px;
}

/* sns marketing */

#s-method .f-block{
    margin-bottom: 4em;
}
#s-method .f-block .con-wrap{
    flex-wrap: wrap;
    align-items: center;

}
.method-box .point-block .bottom-arw{
    height: 20px;
    margin: 2em 0;
}
.method-box .point-block .bottom-arw img{
    height: 20px;
}
.method-box .point-block .goal-area{
    background: #E1E1E1;
    color: #646464;
    text-align: center;
    padding: 20px 0;
    border-bottom: 2px solid #E1E1E1;
    
}
.media-box .ex-block{
    display: flex;
    justify-content: space-between;
    padding: 4em 0;
    border-bottom: 2px solid #E1E1E1;
}
.media-box .ex-block:last-of-type{
    border-bottom: none;
}
.ex-block .img-area{
    width: 41.56%;

}
.ex-block .detail{
    width: 49.02%;

}
.ex-block .detail .nu{
    font-weight: 600;

}
.ex-block .detail .account-name{
    font-size: 20px;
    font-weight: 600;
    margin: 5px 0 3px;

}
.ex-block .detail .ac-id{
    font-size: 14px;
    color: var(--l-gray);
}
.ex-block .detail .keyword-area{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2em;

}
.ex-block .detail .keyword-area span{
    color: var(--l-gray);
    border: 1px solid var(--l-gray);
    display: inline-block;
    padding: 6px 4px;
    margin-right: 10px;
    margin-bottom: 10px;


}
.ex-block .detail p:nth-of-type(4){
    margin: 2em 0;
}
.ex-block .detail .mini-btn-wrap{
    display: flex;
    justify-content: end;

}

@media screen and (max-width:1400px) {
    #s-method .f-block .con-wrap {
        align-items: normal;
    }

}


@media screen and (max-width:1000px) {
    .fv-con-wrap .page-ttl h1 {
        font-size: 100px;
    }
    .flow-list-box li .flow-name {
        padding-left: 70px;
    }
    .flow-name p:first-of-type {
        font-size: 18px;
    }
    .variety-box .v-block {
        width: 45%;
        margin-bottom: 5em;
    }
    .variety-box .v-block:nth-last-of-type(3) {
        border-right: none;
    }
    .f-block .con-wrap {
        flex-direction: column-reverse;
    }
    .f-block .con-wrap .txt-area {
        width: 100%;
    }
    .f-block .con-wrap .img-area {
        width: 100%;
        margin-bottom: 2em;
    }
    .method-box .point-block .bottom-arw {
        margin: 20px 0;
    }




}
@media screen and (max-width:768px) {
    #creative-intro .content-wrap{
        width: 100%;

    }
    .fv-con-wrap .page-ttl h1 {
        font-size: 72px;
    } 
    #web-works .content-area {
        flex-direction: column;
    }
    .f-block {
        padding: 2.5em 1.5em 3.5em;
    }
    .f-block .con-wrap {
        flex-direction: column-reverse;
    }
    .f-block .con-wrap .txt-area {
        width: 100%;
    }
    .f-block .con-wrap .img-area {
        width: 100%;
        margin-bottom: 2em;
    }
    .flow-img-area {
        margin-top: 3em;
    }
    .flow-list-box li {
        flex-direction: column;
        box-sizing: border-box;
    }
    .flow-list-box li .flow-name {
        width: 100%;
        margin-bottom: 14px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding-left: 55px;
    }
    .flow-list-box li:nth-of-type(1) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(2) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(3) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(4) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(5) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(6) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-list-box li:nth-of-type(7) .flow-name:before {
        width: 40px;
        height: 40px;
    }
    .flow-name p:first-of-type {
        margin-right: 10px;
    }
    .flow-list-box li .detail-txt {
        width: 100%;
    }
    #web-works .mini-btn-wrap {
        margin-top: 5em;

    }
    .flow-list-box {
        margin-top: 2em;
    }
    #detail-txt-area {
        width: 100%;
        margin-bottom: 3em;
    }
    .method-box {
        flex-direction: column;
    }
    .method-box .point-block{
        width: 100%;
        padding-bottom: 2em;

    }
    .method-box .point-block:not(:nth-of-type(3)):not(:nth-of-type(4)) {
        padding-bottom: 2em;
    }
    .point-block .p-title {
        font-size: 20px;
    }
    .p-title .zenkaku {
        font-size: 24px;
    }
    .p-title .line {
        height: 28px;
    }
    #case .content-box {
        padding: 2em 1em;
        margin-top: 4em;
    }
    .content-box .cl-name {
        margin-bottom: 1em;
    }
    .content-box .problem {
        padding-left: 0em;
        text-indent: 0em;
    }
    .detail-area {
        box-sizing: border-box;
        padding: 0 0 1em;
        flex-direction: column;
    }
    .detail-area div:first-of-type {
        width: 100%;
        height: auto;
    }
    .detail-area div:last-of-type {
        width: calc(100% - 20px);
        padding-top: 1em;
    }
    .g-detail div:last-of-type p {
        padding-left: 0;
        text-indent: 0;
    }
    .table-wrap {
        overflow-x: auto;
    }
    .table-wrap img{
        width: 876px;
        margin-bottom: 10px;
    }
    .variety-box .v-block {
        width: 42%;
        margin-bottom: 5em;
    }
    .media-box .ex-block {
        padding: 4em 0;
        flex-direction: column-reverse;
    }
    .ex-block .img-area {
        width: 100%;
        margin-bottom: 2em;
    }
    .ex-block .detail {
        width: 100%;
    }




}
@media screen and (max-width:500px) {
    .fv-con-wrap .page-ttl h1 {
        font-size: 50px;
    } 
    #detail-txt-area {
        margin-bottom: 2em;
    }
    .method-box .point-block {
        padding-top: 10px;
    }
    .variety-box {
        flex-direction: column;
    }
    .variety-box .v-block {
        width: 100%;
        margin-bottom: 2em;
        padding: 0 1em 5em;
        box-sizing: border-box;
        border-bottom: 1px solid #C8C8C8;
        border-right: none;
    }
    .v-block .detail {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 2em;
    }
    .v-block .detail p {
        position: relative;
        padding-left: 22px;
        margin-right: 20px;
    }
    .v-block .mini-btn-wrap {
        bottom: 3em;
    }
    .variety-box .v-block:last-of-type {
        border-bottom: none;
    }


}