/* ----------------------------------------------------------------------
	
	馬場状態に関する基礎知識
	
---------------------------------------------------------------------- */


/* - 馬場状態と馬場の構造
---------------------------------------------------------------------- */
#structure > .grid { display: table; width: 100%; }

#structure > .grid > .cell { display: table-cell; vertical-align: top; }
#structure > .grid > .cell.img { width: 280px; }
#structure > .grid > .cell.img img { vertical-align: top; }
#structure > .grid > .cell.txt { padding-left: 30px; }

#basic_structure .grid { display: table; width: 100%; }
#basic_structure .grid > .cell { display: table-cell; vertical-align: middle; }
#basic_structure .grid > .cell.img { width: 280px; padding-right: 30px; }
#basic_structure .grid > .cell.img img { vertical-align: top; }

.turf_type span.opt { display: block; font-size: 1.1rem; }

#division table.basic.division_list thead > tr > th.condition { width: 80px; }
#division table.basic.division_list tbody > tr > td { }

#feature .data_list_unit img { max-width: 180px; }

#decide > .content { text-align: center; margin-top: 30px; }
#decide > .content .img { display: block; margin: 0 auto; }

#decide > .content .img > a {
    font-size: 1.3rem;
    display: inline-block;
    position: relative;
}

#decide > .content .img > a img { vertical-align: top; }

#decide > .content .img > a > .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    
    margin-left: -40px;
    margin-top:  -30px;
    
    font-size: 3.2rem;
    color: #eee;
    background-color: rgba(0,0,0,0.8);
    width: 80px;
    height: 60px;
    text-align: center;
    border-radius: 8px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: 2px solid #ccc;
    transition: all 0.3s ease-in-out;
}

.no-touch #decide > .content .img > a:hover > .icon { background-color: rgba(0,0,0,0.5); }

#decide > .content .img > a > .icon i { position: relative; left: 2px; }


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

	959px以下

------------------------------------------------------------ */
@media screen and ( max-width : 959px ) {
    
}

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

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
}

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

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
	
    /* --- 馬場状態と馬場の構造 --- */
    #structure > .grid { display: block; }
    #structure > .grid > .cell { display: block; }
    
    #structure > .grid > .cell.img { width: auto; text-align: center; }
    #structure > .grid > .cell.txt { padding-left: 0; margin-top: 20px; }
    
    #basic_structure .grid { display: block; }
    #basic_structure .grid > .cell { display: block; }
    
    #basic_structure .grid > .cell.img {
        width: auto;
        padding-right: 0;
        text-align: center;
    }
    
    #basic_structure .grid > .cell.txt { margin-top: 15px; }
    
    #decide > .content .img > a { display: block; margin: 0 auto; }
}

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

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    #feature div.link_list.multi.div5 > div { width: 50%; float: left; }
    #feature div.link_list > div > a { font-size: 1.2rem; }
    #feature .img_line_list { }
    #feature .data_list_unit img { max-width: 90px; }
    #feature .img_line_list > .item .wrap .cap { font-size: 1.1rem; }
    
}

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

	374px以下

------------------------------------------------------------ */
@media screen and ( max-width : 374px ) {
    
}

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

	359px以下

------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
    
}