@charset "utf-8";


/*
*	Title: SCSK サービス詳細用
*	URI: 
*	Last Modified: 
*	Description: メインカラム（サービス詳細内容）
*/

#speech_recognition .case {
    margin-top: 1em;
}
#speech_recognition .case div.case_no, #speech_recognition .case div.case_title {
    color: #0682DC !important;
    font-size: 140%;
    font-weight: bold;
    margin-top: 1em;
    padding-top: 20px;
    padding-bottom: 20px;
    vertical-align: middle;
}

#speech_recognition .case div.case_no {
    display: inline-block;
    float: left;
    background-color: #CAEDFF !important;
    height:70px;
    width: 70px;
    text-align: right;
    padding-right:7px;
    align-content: center;
}

#speech_recognition .case div.case_title {
    display: inline-block;
    padding-left: 7px;
    float: left;
    height:70px;
}

#speech_recognition .case div.case_desc {
    display: block;
    margin-top: 1em;
}

#speech_recognition div.strong_box {
    display: block;

}

#speech_recognition div.strong_box_logo {
    display: block;
    height: unset;
}

#speech_recognition div.strong_left {
    display: inline-block;
    margin-top: 1.8em;

}

#speech_recognition div.strong_left .strong_no_1, #speech_recognition div.strong_left .strong_no_3 {
    color: #FFFFFF ;
    background-color: #0682DC;
    margin-right: 10px;
    height: 2.5em;
    width: 2.5em;
    padding-left: 10px;
    font-size: 250%;
    font-weight: bold;
}

#speech_recognition div.strong_left .strong_no_2 {
    color: #0682DC ;
    background-color: #CAEDFF ;
    margin-left:40px;
    margin-right: 10px;
    height: 2.5em;
    width: 2.5em;
    padding-left: 10px;
    font-size: 250%;
    font-weight: bold;
}

#speech_recognition div.strong_left .strong_no_3 {
    margin-left:80px;
}

#speech_recognition div.strong_center {
    display: inline-block;
    position: relative; 

}

#speech_recognition span.strong_title {
    display: inline-block;
    position: absolute;
    top: -40px;
    font-size: 140%;
    height:1em;
    font-weight: bold;
    width: max-content;
    width:700px;    
}

#speech_recognition span.strong_desc {
    display: inline-block;
    position: absolute;
    top:10px;
    width: max-content;    
    width:700px;    
}

#speech_recognition div.strong_right {
    display: inline-block;
    float:right;
    margin-top: 62px;
    /* position: relative; */

}

.case_noa.bb-brown {
background-color: #CABD43 !important;
border: 1px solid #CABD43 !important;
}

a.bb-bluegreen {
    background-color: #3a9 !important;
    border: 1px solid #3a9 !important;
}
a.bb-bluegreen:hover {
    color: #3a9 !important;
    background-color: #FFFFFF !important;
}




/* レスポンシブ対応 */
@media screen and (max-width:767px) and (min-width:1px) {
#speech_recognition .case {
    margin-top: 0.5em;
}

#speech_recognition .case div.case_no {
    display: flex;
    background-color: #CAEDFF !important;
    text-align: center;
    width: 20%;
    padding: 0 0 0 0!important;
    padding-right:0px;
    margin-top: 12px;
    /* height:3em; */
    vertical-align: middle;
    align-content:center; 
    align-items:center;       
    justify-content: center;
}
#speech_recognition .case div.case_title {
    display: flex;
    /* height: auto; */
    padding: 0 0 0 7px!important;
    padding-bottom: 0px;
    margin-top: 12px;
    vertical-align: middle;
    font-size: 120%;
    width: 80%;
    align-content:center; 
    align-items:center;       

}

#speech_recognition div.strong_box {
    display: block;
    height:13em;
}

#speech_recognition div.strong_box_logo {
    display: block;
    height:4em;
}

#speech_recognition div.strong_left {
    display: block;
    margin-top: 1em;
    float:left;
    width:2.8em;
}

#speech_recognition div.strong_left .strong_no_1, #speech_recognition div.strong_left .strong_no_2, #speech_recognition div.strong_left .strong_no_3 {
    display: block;
    margin: 0; 
    height:2.5em;
    text-align: center;
    width: 2.5em;/* 15%; */
    font-size: 180%;
    font-weight: bold;
    padding-left: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-content:center; 
    align-items:center;       
    justify-content: center;
}

#speech_recognition div.strong_center {
    display: block;
}

#speech_recognition span.strong_title {
    display: block;
    top:15px;
    left: 3.8em;
    font-size: 130%;
    height:unset;
    font-weight: bold;
    width: 80%;
    margin-top: 0; /* 1em; */
    align-items: center;
}

#speech_recognition span.strong_desc {
    display: block;
    top:5em;
    width: 100%;    
    margin-top:1em;
}

#speech_recognition div.strong_right {
    display: block;
    float:unset;
    margin-top: 15px;
}

/*** only sp ***/
#speech_recognition ul.strong_box_sp {
    /* display: block;
    position: relative; */
}

#speech_recognition ul.strong_box_sp li.strong_box_sp_head {
    display: block;
    position: relative;
    /* display: inline-block;
    position: absolute; */
    margin-bottom: 2em;
}

#speech_recognition ul.strong_box_sp li.strong_box_sp_head  span.strong_box_sp_no {
    display: flex;
    position: absolute;
    height: 63px; /* 2.5em; */
    width: 63px; /* 2.5em; */
    padding:0;
    color: #FFFFFF ;
    background-color: #0682DC;
    margin-right: 10px;
    margin-bottom: 1em;
    font-size: 180%;
    font-weight: bold;
    text-align: center;
    align-content: center;
    align-items:center;
    justify-content: center;
    vertical-align: middle;
}

#speech_recognition ul.strong_box_sp li.strong_box_sp_head  span.strong_no_2 {
    color: #0682DC ;
    background-color: #CAEDFF ;
}

#speech_recognition ul.strong_box_sp li.strong_box_sp_head  span.strong_box_sp_title {
    display: flex;
    /* position: absolute; */
    height: 63px; /* 2.5em; */
    padding:0;
    font-size: 130%;
    font-weight: bold;
    align-items: center;
    margin-left: 70px;
}


#speech_recognition ul.strong_box_sp li.strong_box_sp_head  span.strong_box_sp_desc {
    display: block;
    position: unset;
    /* position: absolute;
    top: 68px; */ /* 2.5em; */
    padding:0;
    margin-top: 1em;
    margin-bottom: 0.5em;


}

#speech_recognition ul.strong_box_sp li.strong_box_sp_head  span.strong_box_sp_img {
    display: block;
    position: unset;
    top: 11em;
    padding:0;


}
/***! only sp ***/

}