@charset "UTF-8";


/******************************************
*
事例を解決TOP
*
******************************************/

/* ---------------------------------------------
*  選択メニュー
--------------------------------------------- */
#listSelector{
    display:block;
    overflow:hidden;
    margin:30px 0;
}


.typeBox{
    display:block;
    overflow:hidden;
    width:33%;
    float:left;
    text-align:center;
    padding:1em;
}

.typeBox:nth-child(2){
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;
}

.typeBox h2 > span{
    padding-left:35px;
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:contain;
}

.typeBox:nth-child(1) h2 > span{
    background-image: url("../../images/icon/title_icons_list.png");
}
.typeBox:nth-child(2) h2 > span{
    background-image: url("../../images/icon/title_icons_ disease.png");
}
.typeBox:nth-child(3) h2 > span{
    background-image: url("../../images/icon/title_icons_error.png");
}


.typeBox > a.roundBtn{
    display:block;
    width:100%;
    height:39px;
    line-height:37px;
    padding:0;
    /*padding: 0.5em 1.5em;*/
}

.selectMenu{
    display:block;
    width:100%;
}


/* for Sp --------------------*/
@media screen and (max-width: 738px) {

    .typeBox{
        width:100%;
        float:none;
    }

    .typeBox:nth-child(2){
        border-top:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
        border-left:none;
        border-right:none;
    }
}



/* ---------------------------------------------
*  一覧リスト
--------------------------------------------- */
#caseList{
    clear:both;
    display:block;
    overflow:hidden;
    border-bottom:1px solid #cccccc;
}

#caseList > h3{
    display:block;
    overflow:hidden;
    font-size:2.0rem;
    font-weight:normal;
    padding:1em;
	line-height: 1.3;
	margin-bottom: 20px;
    background-color:#f7f7f7;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#caseList > ul{
    margin:30px 0;
}

#caseList > ul > li{
    display:block;
    overflow:hidden;
    letter-spacing:-.4em;
}
#caseList > ul > li > a{
    display:block;
    overflow:hidden;
    padding:1em 0;
    text-decoration:none;
    color:#000000;
    letter-spacing:normal;
}

.pc #caseList > ul > li > a:hover{
    background-color:rgba(252,155,95,0.5);
}

.code{
    display:inline-block;
    overflow:hidden;
    width:9em;
    vertical-align:top;
    /*float:left;*/
}

#caseList > ul > li > a > p{
    display:inline-block;
    overflow:hidden;
    width:calc(100% - 10em);
}



/* for Sp --------------------*/
@media screen and (max-width: 738px) {

    .code{
        display:block;
        width:100%;
        float:none;
        margin-bottom:0.5em;
    }

    #caseList > ul > li > a > p{
        display:block;
        width:100%;
    }

}


/******************************************
*
事例を解決 詳細
*
******************************************/

#caseDeteil h2,
#solutionDeteil h2{
    display:block;
    overflow:hidden;
    padding:0.75em 1em;
    margin:0.5em 0 0;
    font-size:2.0rem;
    line-height:155%;
    color:#ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.ttlSub{
    font-size:1.6rem;
    padding-left: 1.5em;
}

.innerFrame{
    display:block;
    overflow:hidden;
    padding:30px;
}



/* for Sp --------------------*/
@media screen and (max-width: 738px) {
    #caseDeteil h2,
    #solutionDeteil h2{
        font-size:1.6rem;
    }

    .innerFrame{
        padding:1em;
    }

    .ttlSub{
        padding-left: 1.0em;
    }
}



/* ---------------------------------------------
*  事例詳細
--------------------------------------------- */
#caseDeteil{
    display:block;
    overflow:hidden;
    margin-bottom:30px;
}

#caseDeteil h2{
    background-color:#fc9b5f;
}

ul.dataList{
    font-size:1.6rem;
    line-height:200%;
}

.dataCard{
    display:block;
    overflow:hidden;
    position:relative;
    width:50%;
    float:left;
}
.dataCard > h3{
    display:block;
    text-align:center;
    font-size:1.6rem;
    font-weight:normal;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;

}

.dataCard > h3 > span{
    display:inline-block;
    overflow:hidden;
    line-height:100%;
    padding:0.5em 2em;
    background-color:#ffffff;
    border:1px solid #002269;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}

.framedBox{
    display:block;
    overflow:hidden;
    margin:1em;
    padding:2em 2em 1em;
    height:auto;
    min-height:220px;
    border:1px solid #002269;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.framedBox > ul.dataList{
    font-size:1.4rem;
    line-height:300%;
}



/* for Sp --------------------*/
@media screen and (max-width: 738px) {

    .dataCard{
        width:100%;
        float:none;
        margin-top:1em;
    }


    .framedBox{
        margin:1em 0 0;
        padding:1em 2em 1em;
        min-height:auto;
    }
}



/* ---------------------------------------------
*  解決策
--------------------------------------------- */
#solutionDeteil{
    display:block;
    overflow:hidden;  
}

#solutionDeteil h2{
    background-color:#f6c737;
}

#solutionDeteil .innerFrame > p{
    line-height:175%;
}

#solutionList{
    display:block;
    overflow:hidden;
}

#solutionList > ul{
    margin-top:25px;
    border-top:1px solid #cccccc;
}

#solutionList > ul > li{
    display:block;
    overflow:hidden;
    padding:25px 0;
    border-bottom:1px solid #cccccc;
}

#solutionList > ul > li > h3{
    font-size:1.6rem;
    margin-bottom: 0.5em;
}


#solutionList > ul > li > .itemPct{
    float:left;
    width:280px;
    height:auto;
    min-height:220px;
    /*max-height:220px;*/
}

.itemData{
   display:block;
   overflow:hidden;
   width:calc(100% - 280px);
   padding-left:30px;
}

.itemData > dl{
   display:block;
   overflow:hidden;
   line-height:175%;
}

.itemData > dl > dt{
    font-weight:bold;
}

.itemData > dl > dd{
    margin-bottom:1em;
}


/* for Sp --------------------*/
@media screen and (max-width: 738px) {
    #solutionList > ul > li > .itemPct{
        float:none;
        width:100%;
        height:auto;
        margin:0 auto;
    }

    .itemData{
       width:100%;
       padding-left:0;
       margin-top:1em;
    }

    .itemData > dl > dd > p{
        line-height:155%;
    }

    .itemData > dl > dd > a.lintToItem{
        margin-left:calc(50% - 75px);
    }


}