/* Slackr連携ページのCSS */

.slack-top{
    background-color: #f3f4f5;
    text-align: center;
}
.target-user{
    font-size: 24px;
    font-weight: 700;
    padding: 70px 0 40px;
}

.target-user span{
    background: linear-gradient(transparent 70%, #D5ECFF 30%);
}

.top-des{
    font-size: 34px;
    line-height: 60px;
    font-weight: 700;
    padding-bottom: 50px;
}

.slack-painblock{
    max-width: 1100px;
    margin: 80px auto;
}

.slack-pain-des{
    font-size: 34px;
    font-weight: 700;
    line-height: 60px;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 15px;
}

.slack-pain-box{
    max-width: 630px;
    margin: 30px auto 50px;
    background-color: #f3f4f5;
    text-align: center;
    padding: 30px 0;
    position: relative;
    border-radius: 10px;
}

.slack-pain-box::before{
    position: absolute;
    content: '';
    width: 105px;
    height: 99px;
    background-image: url(https://d1e4giw8bkqfro.cloudfront.net/images/slack-pain-decoration.png);
    background-size: cover;
    top: -43px;
    right: -42px;
}

.slack-pain-box p{
    line-height: 30px;
}

.discover-area {
    width: 32%;
    padding: 5px;
}

.discover-content {
    padding: 0px;
}

.s-br-sp{
    display: none;
}

.video-block-title{
    padding-top: 15px;
    font-weight: bold;
    font-size: 35px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 25px;
}

.des-video-block{
    max-width: 1100px;
    margin: 80px auto 0;
}

.video-des{
    text-align: center;
    margin: 10px 0 30px;
}

.slacktostock{
    max-width: 1000px;
    margin: 30px auto 45px;
    padding: 0 15px;
}

.slacktostock p{
    margin: 20px 0;
}

.slacktostock .slacktostock-title,
.slack-others-title{
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
}

.slack-others{
    max-width: 1000px;
    margin: 45px auto 80px;
    padding-right: 15px;
    padding-left: 15px;

}

.slacktostock a, 
.slack-others a {
    color: #77C2FD;
    font-weight: 700;
    padding: 0 5px;
}


@media only screen and (max-width: 900px) {
    
    .top-des,
    .slack-pain-des,
    .video-block-title{
        font-size: 24px;
        line-height: 40px;
    }
    .slack-pain-des{
        letter-spacing: -0.7px;
    }
    .toparea-title {
        font-size: 18px;
        padding: 30px 0 0;
    }
    .toparea-title-bar{
        margin: 0px;
    }
    .toparea-title-bar:before{
        width: 50%;
    }
    .toparea-title-bar:nth-child(3):before{
        width: 50%;
        left: 20px;
    }
    .toparea-title-bar{
        -webkit-flex: 0 1 30px;
        flex: 0 1 30px; 
        position: relative;
        margin: 0px;
    }
    .slack-painblock{
        margin-top: 30px;
        margin-bottom: 0;
    }
    .target-user{
        padding-top: 40px;

    }
    .des-video-block{
        margin-top: 0;
    }
    .slack_mark_l{
        width: 22px;
    }
    .stock_mark_sub{
        width:24px;
    }
    .stock_mark_l{
        width: 24px;
    }
}

@media only screen and (max-width: 720px) {
    .slack-pain-box::before{
        right: -10px;
    }
}


@media only screen and (max-width: 480px) {
    .discover-area {
        width: 100%;
    }
    .video-wrap {
        display: block;
    }
    .target-user{
        padding-bottom: 25px;
    }
    .target-user{
        font-size: 20px;
        padding-top: 40px;
    }
    .slack-top .top-des{
        font-size: 24px;
        letter-spacing: -0.7px;
    }
    .s-br-sp{
        display: block;
    }
    .slack-painblock{
        margin-top: 18px;
        margin-bottom: 0;
    }
    .slack-pain-box{
        width: 95%;
        border-radius: 7px;
    }
    .slack-pain-box::before{
        width: 70px;
        height: 69px;
        top: -30px;
    }
    .video-des{
        letter-spacing: -0.6px;
    }
    .slack-others{
        margin-bottom: 50px;
    }
    .slacktostock-title{
        line-height: 35px;
    }

}