@charset "utf-8";

#main{font-size: 1.4em;}
#sideBar{font-size: 10px;}

h3#pd20{margin-top: 20px;}
h3#pd20 img {width: 100%;}

#k_area01, #k_area02, #k_area03 {
    background-color: #eee;
}

#k_area01 img, #k_area02 img, #k_area03 img { 
    width: 100%;
}
#k_area01 p, #k_area02 p, #k_area03 p {
    padding: 10px;
    line-height: 1.6;
    font-size: 1rem;
}



#k_area04{border: 1px solid#999; overflow: hidden;padding: 10px;}
#k_area04 h3{text-align: center; background: #eee;padding: 10px;}

#k_a_l{float: left; width: 100%;padding-top: 15px;}
#k_a_r{float: right;width: 100%;padding-top: 15px;}
#wrap_k_area {overflow: hidden;border-bottom: 1px dotted #999; padding-bottom: 20px; margin-bottom: 20px;}


#int{overflow: hidden; padding-bottom: 20px;}
#pers {
    float: left;
    width: 100%;
    text-align: center;
    margin: 20px auto;
}
#pers img{width: 50%;}
#p_com{float: right; width:100%;}
#p_com img {
    width: 100%;
}
#p_com p {
    margin-top:10px;
    line-height: 1.6;
    font-size: 1rem;
}

.case{clear: both;margin: 20px 0; overflow: hidden; background: #eee;}
.case h3{padding: 12px;}
.case ul{background: #eee; padding-bottom: 20px;}
.case ul li{float: left; margin-left: 12px; padding-bottom: 15px; width: calc(50% - 18px);}
.case ul li img {width: 100%; object-fit: cover;}

/* -----------------------------PC----------------------------- */
@media screen and (min-width: 768px) {
    #k_area01, #k_area02, #k_area03 {
        background-color: #fff;
    }

    #k_area01 img, #k_area02 img, #k_area03 img { 
        display: none;
    }
    #k_area01{background: url(../../kominkasaisei/img/km_01.jpg) no-repeat; height: 214px; margin: 20px 0;}
    #k_area01 p{padding: 50px 300px 0 10px;}

    #k_area02{background: url(../../kominkasaisei/img/km_02.jpg) no-repeat; height: 214px; margin: 20px 0;}
    #k_area02 p{padding: 50px 300px 0 10px;}
    #k_a_l{width: 360px;}
    #k_a_r{width: 300px;}

    #k_area03{background: url(../../kominkasaisei/img/km_03.jpg) no-repeat; height: 214px; margin: 20px 0;}
    #k_area03 p{padding: 50px 300px 0 10px;}
    #pers {float: left; width: 270px; margin: 0;}
    #pers img{width: 270px}
    #p_com{float: right; width:425px;}
        
    .case ul li {float: left; margin-left: 12px; padding-bottom: 15px; width: 161px; height: 108px;}
    .case ul li img {height: 100%;}
}