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

	海外 世界の主要レース結果 リストインデックス

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

strong { font-weight: bold; }

.body_wrapper .tab { margin-top: 0; }

.body_wrapper .tab > ul > li { width: 50%; }

div.pickup_area {
    margin-top: 20px;
    background-color: #eee;
    padding: 10px;
}


ul.pickup_list { }

ul.pickup_list > li { margin-top: 10px; }
ul.pickup_list > li:first-child { margin-top: 0; }


/* ----- ピックアップユニット ----- */
.pickup_unit {  }

.pickup_unit > a {
    display: block;
    text-decoration: none;
    color: #333;
    
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 15px;
    
    position: relative;
    transition: all 0.4s;
}

.pickup_unit > a:hover,
.pickup_unit > a:focus { background-color: #fff8e1; }


/* --- 詳細ラベル --- */
.pickup_unit > a div.label {
    position: absolute;
    
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 15px 15px;
    line-height: 1.3;
    
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    border-radius: 2.6em 0 0 2.6em;
    
    width: 100px;
    text-align: center;
    background-color: #0069a7;
}

.pickup_unit > a:hover div.label,
.pickup_unit > a:focus div.label { background-color: #555; }

.pickup_unit > a div.label i { margin-right: 0.4em; }


/* --- 日付 --- */
.pickup_unit > a > .date {
    display: block;
    background-color: #333;
    color: #fff;
    padding: 5px 12px;
    
    position: absolute;
    left: 0;
    top: 0;
    
    font-size: 1.2rem;
    font-weight: bold;
    background-color: rgba(0,0,0,0.8);
    border-radius: 4px 0 0 0;
    
    padding: 4px 8px;
    
    min-width: 78px;
    text-align: center;
}

.pickup_unit .inner {
    display: table;
    width: 100%;
}

.pickup_unit .inner > div.cell {
    display: table-cell;
    vertical-align: middle;
}

.pickup_unit .inner > div.cell.img {
    width: 210px;
    text-align: center;
    padding-right: 10px;
}

.pickup_unit .inner > div.cell.img > img {
    max-width: 200px;
    vertical-align: top;
}

/*.pickup_unit .inner > div.cell.content { padding: 10px; }*/

.pickup_unit .inner > div.cell.content { padding: 0 10px; }


/* --- 国・競馬場・コース ライン --- */
.pickup_unit .inner > div.cell.content p.data_line {
    padding-right: 80px;
    font-size: 0;
}

.pickup_unit .inner > div.cell.content p.data_line > span.rc {
    font-size: 1.4rem;
}

.pickup_unit .inner > div.cell.content p.data_line > span.rc > span.img {
    vertical-align: middle;
    margin-right: 0.4em;
    font-size: 1.4rem;
}

.pickup_unit .inner > div.cell.content p.data_line > span.rc > span.img > img {
    max-width: 26px;
    vertical-align: top;
}

.pickup_unit .inner > div.cell.content p.data_line > span.rc > span.course {
    margin-left: 1em;
    font-size: 1.4rem;
}

.pickup_unit .inner > div.cell.content p.data_line > span.rc > span.course > span.unit {
    font-size: 1rem;
    margin-left: 0.1em;
}


/* --- レース名 --- */
.pickup_unit .inner > div.cell.content p.race {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 4px;
    
    padding-right: 80px;
}

/* --- 優勝馬 --- */
.pickup_unit .inner > div.cell.content p.horse {
    font-size: 1.6rem;
    font-weight: bold;
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-top: 15px;
    padding-right: 80px;
}

.pickup_unit .inner > div.cell.content p.horse > span {
    font-size: 1.1rem;
    background-color: #455A64;
    color: #fff;
    padding: 4px;
    vertical-align: middle;
    margin-right: 0.5em;
}

/* --- カテゴリータブ（ピックアップ｜◯◯年 結果一覧 タブ） --- */
/*#result_list { display: none; }*/

#result_list.backnumber {
	display:block;
}




/* - 主要レース結果一覧　テーブル
-------------------------------------------------- */
.sp_line {
	display:none;
    font-size: 1.2rem;
}

table.main_race > caption {
	margin-bottom: 15px;
    text-align: left;
}

table.main_race > caption.caution_on {
	margin-bottom: 10px;
    text-align: left;
}

table.main_race > caption > div.header {
    padding-bottom: 4px;
    border-bottom: 2px solid #e2e2e2;
    position: relative;
}

table.main_race > caption > div.header:after {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    width: 120px;
    border-bottom: 2px solid #0cae2f;
}

table.main_race > caption > div.header > .content {
    display: block;
}

table.main_race > caption > div.header > .content > p {
    font-size: 1.6rem;
    font-weight: bold;
    color: #444;
    line-height: 1.4;
    padding: 4px 0;
}

.race_list {

}

table.main_race {
	width:100%;
	border-collapse:collapse;
}

table.main_race {
	width:100%;
	font-size:1.2rem;
	/*
	margin-top:20px;
	margin-bottom:10px;
	*/
}

table.main_race > thead > tr.detail_all {
	background:#0069a7;
	font-weight:bold;
}


table.main_race > thead > tr.detail_all > th {
	text-align:center;
	color:#FFF;
	border:1px solid #DDD;
	padding:6px;
	vertical-align:middle;
	/*white-space:nowrap;*/

    background-color:#0069a7;
}

table.main_race > thead > tr.detail_all > th.sale {
	width:56px;
}

table.main_race > thead > tr.detail_all > th.day {
	width: 106px;
	width: 162px;
	/*width: 156px;*/
    
    width: 130px;
    width: 120px;
    width: 80px;
}

table.main_race > thead > tr.detail_all > th.fac {
	width: 160px;
	
	width: 166px;
    width: 180px;
    width: 220px;
}

table.main_race > thead > tr.detail_all > th.race {
    width: 304px;
}

table.main_race > thead > tr.detail_all > th.dis {
	width:76px;
	width:80px;
    
    width: 96px;
    width: 110px;
}


table.main_race > tbody > tr > td {
	border:1px solid #DBDBDB;
	padding:6px;
	vertical-align:middle;
	/*white-space:nowrap;*/
}


table.main_race > tbody > tr > td.dis {
    line-height: 1.4;
}
table.main_race > tbody > tr > td.dis span {
    display: block;
    font-size: 1rem;
}



table.main_race > tbody > tr > td i {
	padding-right:0.4rem;
}

table.main_race > tbody > tr > td a {
	text-decoration:underline;
	color:#06a;
}

table.main_race > tbody > tr > td a:hover {
	color:#097722;
}

table.main_race > tbody > tr > td span.btn {	
    font-weight: bold;	
    font-size: 1rem;	
    display: block;	
}	
table.main_race > tbody > tr > td span.btn a {	
    text-decoration:none;	
    color: #555;	
}	
table.main_race > tbody > tr > td span.btn a i {	
    padding-right: 0;	
}

table.main_race > tbody > tr > td.sale_on {
	
	
}

table.main_race > tbody > tr > td.sale_on > span {
	display:inline-block;
	background-color:#0069a7;
	color:#FFF;
	padding:2px 5px;
	border-radius:3px;
}

table.main_race > tbody > tr > td span {
	font-size:1.0rem;
	display:block;
	font-weight:normal;
}

/*
table.main_race > tbody > tr > td:nth-child(1)  , table.main_race > tbody > tr > td:nth-child(5) {
	text-align:center;
}

table.main_race > tbody > tr > td:nth-child(2) {
	text-align:right;
}
*/

table.main_race > tbody > tr > td:nth-child(1) {
	text-align:right;
}

/*
table.main_race > tbody > tr > td:nth-child(4) {
	text-align:center;
	white-space:nowrap;
}
*/

table.main_race > tbody > tr > td.race {
    
}

table.main_race > tbody > tr > td.race > span {
	font-size:1.0rem;
	display:block;
    
}

table.main_race > tbody > tr > td.dis {
	text-align: center;
	white-space:nowrap;
}



/*
table.main_race > tbody > tr.even > td {
	background-color:#f3f3f3;
}
*/


table.main_race > tbody > tr:nth-child(even) > td {
	background-color:#f3f3f3;
}


table.main_race > tbody > tr > td > span.flag {
	display:inline-block;
	vertical-align:middle;
	line-height:1.2;
	padding-right:0.4rem;
}

table.main_race > tbody > tr > td > span.flag img {
	width:22px;
}

table.main_race > tbody > tr > td > span.inner {
	display:table;
}

table.main_race > tbody > tr > td > span.inner > a {
	display:block;
}

table.main_race > tbody > tr > td > span.inner > a > span.icon {
	display:table-cell;
	vertical-align:top;
}

table.main_race > tbody > tr > td > span.inner > a > span.name {
	display:table-cell;
	vertical-align:top;
}



/* --- 注意書きブロック --- */
.caution {
    background-color: #f3f3f3;
    padding: 15px;
    border: 1px dashed #ccc;
}

.caution.narrow { padding: 10px; }

/*.caution > p { font-size: 1.2rem; }*/



/*
.caution {
	margin-bottom:20px;
}

.caution > p {
	font-size: 1.2rem;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
	line-height:1.8;
}

.caution > p > i {
	padding-right:0.2rem;
	padding-left:1.4rem;
}


.caution_block {
    background-color: #f3f3f3;
    padding: 10px;
    border: 1px dashed #ccc;
}
*/



/* - バックナンバー
-------------------------------------------------- */
div.bn-area {
    
}

div.bn-area > ul {
    background-color: #ebebeb;
    padding: 5px;
}

div.bn-area > ul:after { content: ''; display: block; clear: both; }

div.bn-area > ul > li {
    width: 20%;
    float: left;
    padding: 5px;
}

div.bn-area > ul > li > a {
    text-align: center;
    display: block;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    line-height: 1.4;
    font-size: 1.3rem;
    font-weight: bold;
    color: #06a;
    
    color: #444;
}

div.bn-area > ul > li > a:hover {
    background-color: #fff8e1;
}

div.bn-area > ul > li > a i {
    margin-right: 0.5em;
    color: #176aa4;
}

div.bn-area > ul > li.current > a {
    background-color: #0069a7;
    color: #fff;
}

div.bn-area > ul > li.current > a i {
    color: #fff;
}







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

	979px以下

------------------------------------------------------------ */
@media screen and ( max-width : 979px ) {
    
    #contentsBody > .body_wrapper {
        padding:0 10px;
        box-sizing:border-box;
    }
    
    
    /* ----- ピックアップ ----- */
    .pickup_unit > a div.label {
        top: 100%;
        transform: translateY(-120%);
        width: 80px;
    }
    
    .pickup_unit .inner > div.cell.content p.data_line {
        padding-right: 0;
    }
    
    .pickup_unit .inner > div.cell.content p.race {
        padding-right: 0;
        font-size: 1.8rem;
    }
    
    .pickup_unit .inner > div.cell.content p.horse {
        padding-right: 60px;
    }
    
    
    /* --- 結果一覧 --- */
    /*
    .race_list {
        width:100%;
        overflow-x:auto;
    }

    table.main_race {
        width: 940px;
    }
    */
    
    table.main_race > thead > tr.detail_all > th.race {
        width: 240px;
    }
    
    table.main_race > thead > tr.detail_all > th.dis {
        width: 94px;
    }
}




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

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
    /* ----- ピックアップ ----- */
    .pickup_unit > a div.label {
        /*transform: translateY(-120%);*/
        padding: 10px;
    }
    
    
    .pickup_unit .inner > div.cell {
        vertical-align: top;
    }
    
    .pickup_unit .inner > div.cell.img {
        width: 190px;
    }
    
    .pickup_unit .inner > div.cell.img > img {
        max-width: 180px;
    }
    
    .pickup_unit .inner > div.cell.content {
        padding: 0 10px;
    }
    
    .pickup_unit .inner > div.cell.content p.data_line {
        max-width: 480px;
        margin:  0 auto;
    }
    
    .pickup_unit .inner > div.cell.content p.data_line > span.rc > span.course {
        display: block;
        margin-left: 0;
        /*margin-top: 2px;*/
        font-size: 1.3rem;
    }
    
    .pickup_unit .inner > div.cell.content p.race {
        font-size: 1.5rem;
        
        max-width: 480px;
        margin: 0 auto;
    }
    
    .pickup_unit .inner > div.cell.content p.horse {
        max-width: 480px;
        margin: 0 auto;
        
        padding-top: 10px;
        margin-top: 10px;
    }
    
    
    /* --- 結果一覧 --- */
    
    .race_list {
        width:100%;
        overflow-x:auto;
    }

    table.main_race {
        /*width:890px;*/
        width: 940px;
    }
    

    .sp_line {
        display:block;
        margin-bottom:4px;
        margin-bottom: 10px;
        width: 890px;
    }
    
    
    
    
    
}

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

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    
    /* ----- ピックアップ ----- */
    .pickup_unit .inner {
        display: block;
    }
    
    .pickup_unit .inner > div.cell {
        display: block;
    }
    
    .pickup_unit .inner > div.cell.img {
        width: 100%;
        padding-right: 0;
        text-align: center;
    }
    
    .pickup_unit .inner > div.cell.img > img {
        max-width: 100%;
    }
    
    .pickup_unit .inner > div.cell.content {
        margin-top: 10px;
        padding: 0;
    }
    
    .pickup_unit .inner > div.cell.content p.race {
        font-size: 1.6rem;
    }
    
    .pickup_unit .inner > div.cell.content p.data_line > span.rc {
        font-size: 1.2rem;
    }
    
    .pickup_unit .inner > div.cell.content p.horse {
        font-size: 1.4rem;
    }
    
    
    /* --- 年バックナンバー --- */
    div.bn-area > ul > li {
        width: 25%;
    }
    
}


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

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    /* ----- ピックアップ ----- */
    /*
    .pickup_unit > a div.label {
        top: 100%;
        transform: translateY(-100%);
        width: 80px;
        font-size: 1.2rem;
        border-radius: 4px 0 4px 0;
        
        width: auto;
        min-width: 50px;
        
        padding: 8px;
        font-size: 1.1rem;
    }
    */
    
    .pickup_unit > a div.label {
        
        width: auto;
        padding: 8px;
        font-size: 1.1rem;
        
        transform: translateY(0);
        position: static;
        margin-top: 15px;
        border-radius: 4px;
    }
    
    
    .pickup_unit .inner > div.cell.content p.data_line {
        line-height: 1.4;
    }
    
    .pickup_unit .inner > div.cell.content p.data_line > span.rc > span.course {
        font-size: 1.2rem;
        margin-top: 0;
    }
    
    .pickup_unit .inner > div.cell.content p.race {
        line-height: 1.3;
        margin-top: 8px;
    }
    
    
    .pickup_unit .inner > div.cell.content p.horse {
        padding-right: 40px;
    }
    
    
    
    /* --- 年バックナンバー --- */
    div.bn-area > ul > li {
        width: 33.33%;
    }
}


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

	374px以下

------------------------------------------------------------ */
@media screen and ( max-width : 374px ) {
    
    /* ----- ピックアップ ----- */
    .pickup_unit > a div.label {
        transform: translateY(0);
        position: static;
        margin-top: 15px;
        border-radius: 4px;
    }
    
    
    /* --- 年バックナンバー --- */
    div.bn-area > ul > li {
        width: 50%;
        
        width: 100%;
        float: none;
        
        padding: 3px;
    }
    
    div.bn-area > ul > li > a {
        padding: 8px;
    }
}