@media(max-width:750px){

    
}


.commonContHeader{}
.commonContHeader h2{ font-size: 38px; font-style: italic; font-weight: 900; letter-spacing: 0.1em; margin-bottom: 50px;}

p.catIntroTxt{ margin-bottom: 50px;}

@media(max-width:750px){

}




.caseList{ background: #ededed; padding: 25px;}
.caseList ul{
    width: auto;
    margin: 0 auto ;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}
.caseList li{border: 1px solid #b4b4b4; padding: 1px;}
.caseList li a{display: block; position:relative; height: 100px;  
    background-image: -moz-linear-gradient( 55deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient( 55deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient( 55deg, rgba(240,240,240,0.99608) 0%, rgb(240,240,240) 0%, rgb(255,255,255) 100%);
    display: flex;
    align-items: center;}
.caseList li span{}
.caseList li a span.caseIcon{ width: 90px; display: inline-block; margin-left: 30px;}
.caseList li a span.caseName{ color: #000; font-size: 20px; margin-left: 20px;}

@media(max-width:750px){
    .caseList li a span.caseIcon{position: absolute; top: -20px; left: -20px;}
    .caseList li a {text-align: center;}
    .caseList li a span.caseName{ color: #000; font-size: 25px; letter-spacing: 0.1em;text-align: center; margin-left: 20px;}
}



.projectContHeader{border: 1px solid #b8045e; border-width: 1px 0; margin-bottom: 50px;}
.projectContHeader h2{padding: 50px 0; line-height: 1em; font-size: 26px;  vertical-align: middle; letter-spacing: 0.1em;}
.projectContHeader h2 img{ width: 90px; margin-right: 20px; vertical-align: middle; position:relative; top: -4px;}

.projectContBody{width: auto; margin: 0 50px 100px;}

@media(max-width:750px){
    .projectContHeader h2{padding: 50px 0; line-height: 1em; font-size: 34px;  vertical-align: middle; letter-spacing: 0.1em;}
    .projectContHeader h2 img{ width: 130px; margin-right: 30px;}
    .projectContBody{width: auto; margin: 0 0 50px;}
}



.proMvArea{ display: table; width: 100%; margin-bottom: 50px;}
.proMvArea .imgArea{  display: table-cell; width: 55%; vertical-align: middle;}
.proMvArea .imgArea img{}
.proMvArea .txtArea{  display: table-cell; width: 45%; 
    vertical-align: middle;
    align-items: center;
}

.proMvArea .txtArea p{ font-size: 26px; color: #666; font-weight: bold;line-height: 1.9em;}
.proMvArea .txtArea p span{ display:inline-block; color: #000;border-bottom: 4px solid #b8045e; padding-bottom: 8px; line-height: 1em;}

.flowBody{ width: auto;margin: 0 50px 50px;}

@media(max-width:750px){

    .proMvArea{ display: block; width: 100%; margin-bottom: 50px;}
    .proMvArea .imgArea{  display: block; width:auto; vertical-align: middle;}
    .proMvArea .imgArea img{}
    .proMvArea .txtArea{
        display: block; width: auto; 
        vertical-align: middle;
        align-items: center;
        padding: 50px 20px 0;

        
    }
    
.proMvArea .txtArea p{ font-size: 36px; color: #666; font-weight: bold;line-height: 1.9em;}
}



.proFlow{ border: 1px solid #999;border-radius: 20px; display: table; width: 100%;padding:30px 0;margin-bottom: 20px;}
.proFlow header{ display: table-cell; vertical-align: middle; text-align: center; width: 200px;padding: 0 25px;}
.proFlow header p{margin-bottom: 0;}
.proFlow header img{ width: 70px;}
.proFlow .flowBody{display: table-cell; padding-left: 40px; border-left: 1px solid #999;}
.proFlow .flowBody p{margin-bottom: 0; padding:20px 50px 20px 0; line-height: 2em;}

@media(max-width:750px){

    .proFlow{ border: 1px solid #999;border-radius: 15px; display: block; width: 100%;padding:30px 0 0 0;margin-bottom: 20px;}
    .proFlow header{ display: block; vertical-align: middle; text-align: center; width: auto;padding: 0 25px 25px;}
    .proFlow header p{margin-bottom: 0; font-size: 30px;}
    .proFlow header img{ width: 90px;}
    .proFlow .flowBody{display:block; padding-left: 0; padding-top:40px;padding-bottom: 30px; border-left: none; border-top: 1px solid #999;}
    .proFlow .flowBody p{margin-bottom: 0; padding:10px 20px;margin-bottom: -20px; line-height: 2em;}
    
}
.beforeArrow {text-align: center;padding-bottom: 10px;}
.beforeArrow img{ width: 60px;}

.kadai p span{ color: #3554ac;font-weight: bold;}
.seika p span{ color: #c20464;font-weight: bold;}
.seika{margin-bottom: 90px;}

.projectContBody{}
.projectContBody h3{ border-left: 2px solid #b8045e; padding: 8px 25px 8px; margin-bottom: 50px; font-size: 25px; font-weight: 700;}

.kouseiTxt{ padding: 0 30px 50px;}

.ig03{margin: 0 30px 100px;}

@media(max-width:750px){
    .projectContBody h3{ border-left: 2px solid #b8045e; padding: 8px 25px 8px; margin-bottom: 50px; font-size: 35px; font-weight: 700;}

}