@charset "utf-8";

/****
*  dl-table mobile
****/
.dl-table {  /**  <dl class="dl-table">  **/
    padding: 0;
    background: #efefef;
    border: 1px solid #ddd; 
}

.dl-child {  /**  dlに入れ子dlをするときのclass  **/
    margin: 0;
}

dl.dl-table dt, 
dl.dl-table dd {
    margin: 0;
    box-sizing: border-box;
}

dl.dl-table dt {
    padding: .5rem 1rem;
    background: inherit;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #ececec;
    border-left: 0;
}

dl.dl-table dd {
    padding: 1rem;
    border-bottom: 1px solid #ececec;
    background: #fff;
}
 
dl.dl-table dd:last-of-type {
    border-bottom: 0;
}

/**  768px以上でパソコンの表示になる  **/
@media screen and (min-width: 768px){

    /****
    *  dl-table PC
    ****/
   dl.dl-table dt {
        float: left;
        width: 25%;
        padding: .5rem;
        font-weight: bold;
        border-top: 1px solid #cdcdcd;
        border-bottom: 0;
    }

    dl.dl-table dd {
        margin-left: 25%;
        padding: .5rem .5rem 0;
        border-top: 1px solid #cdcdcd;
        border-bottom: 0;
        border-left: 1px solid #cdcdcd; 
        background: #fff;
    }

    dl.dl-table dt:first-of-type, 
    dl.dl-table dd:first-of-type {
        border-top: 0;
    }

    dl.dl-table dd:after {
        content : '';
        display : table;
        clear : both;
        height: 0;
    }

}