
/* --------------------------------------------------

	達成間近な記録

-------------------------------------------------- */

/* - record unit
-------------------------------------------------- */
div.record_block > ul {

}

div.record_block > ul > li {
    margin-top: 5px;
}

div.record_block > ul > li:first-child {
    margin-top: 0;
}


div.record_block > ul > li div.record_unit {
    display: table;
    width: 100%;
}

div.record_block > ul > li div.record_unit > div {
    display: table-cell;
    vertical-align: middle;
}

div.record_block > ul > li div.record_unit > div.head {
    width: 200px;
    padding: 15px 10px;
    width: 180px;
    font-weight: bold;
    font-size: 1.4rem;
    position: relative;
    text-align: center;
    background-color: #eaeade;
    color: #444;
    border-right: 2px solid #dfdfd3;
    width: 200px;
}


div.record_block > ul > li div.record_unit > div.content {
    padding: 15px 20px;
    background-color: #f5f5f5;
    color: #444;
    border-left: 1px solid #fff;
    
    background-color: #f7f7f7;
}




/* - record list
-------------------------------------------------- */
ul.record_list > li {
    /*padding: 2px 0;*/
    display: table;
}

ul.record_list > li > span {
	/*line-height: 1.5;
	font-size: 1.5rem;
    */
    
    display: table-cell;
    vertical-align: middle;
    font-size: 1.5rem;
    padding: 4px 0;
}

ul.record_list > li > span.name {
    /*margin-right: 2em;*/
    width: 180px;
    padding-right: 20px;
}

ul.record_list > li > span.record {  }




/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
    div.record_block > ul > li div.record_unit > div.head {
        /*width: 150px;*/
        width: auto;
    }
    
    ul.record_list > li > span {
        font-size: 1.4rem;
    }
    
    
    div.record_block > ul > li { margin-top: 20px; }
    
    div.record_block > ul > li div.record_unit {
        display: block;
    }
    div.record_block > ul > li div.record_unit > div { display: block; }
    
    div.record_block > ul > li div.record_unit > div.head {
        width: auto;
        border-radius: 0;
        text-align: left;
        padding: 8px 12px;
        font-size: 1.3rem;
        border-right: none;
        border-bottom: 2px solid #dfdfd3;
    }
    
    div.record_block > ul > li div.record_unit > div.content {
        padding-left: 15px;
        font-size: 1.2rem;
        border-left: none;
    }
}


/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    
    /*
    div.record_block > ul > li { margin-top: 20px; }
    
    div.record_block > ul > li div.record_unit {
        display: block;
    }
    div.record_block > ul > li div.record_unit > div { display: block; }
    
    div.record_block > ul > li div.record_unit > div.head {
        width: auto;
        border-radius: 0;
        text-align: left;
        padding: 8px 12px;
        font-size: 1.3rem;
        border-right: none;
        border-bottom: 2px solid #dfdfd3;
    }
    
    div.record_block > ul > li div.record_unit > div.content {
        padding-left: 15px;
        font-size: 1.2rem;
        border-left: none;
    }
    */
    
    
    ul.record_list > li > span.name {
        /*margin-right: 2em;*/
        width: 160px;
        padding-right: 20px;
    }
}

/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
	
    ul.record_list {
        display: block;
    }
	ul.record_list > li {
		padding: 0;
		margin-top: 15px;
	}
	
	ul.record_list > li:first-child { margin-top: 0; }

	ul.record_list > li > span {
        display: block;
        width: auto;
        padding: 0;
    }
	
	ul.record_list > li > span.name { margin-right: 0; }
	
	ul.record_list > li > span.record {
		font-size: 1.4rem;
		margin-top: 2px;
	}
}



