/* ----------------------------------------------------------------------
	
    スマホ用詳細出馬表

---------------------------------------------------------------------- */
* { touch-action: manipulation; }

/* - base layout
---------------------------------------------------------------------- */
html { font-size: 62.5%; }
body { font-size: 13px; font-size: 1.3rem; }

body {
	-webkit-text-size-adjust: 100%;
	font-family :"Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', Meiryo,'ＭＳ Ｐゴシック', sans-serif;
    color:#333;
    position: relative;
    overflow: hidden;
}

img { max-width: 100%; height: auto; border: 0; }
body * { box-sizing: border-box; }
.android body * { max-height: 999999px; }
strong { font-weight: bold; }

#wrapper {
    margin: 0;
    padding: 0;
    width: auto;
    max-width: 100%;
    background-color: #f1f1f1;
}

.hasData > p > a { display: inline; }

/* - ナビゲーションヘッダー（グロナビ用）
---------------------------------------------------------------------- */
#nav_header {
    height: 54px;
    width: 100%;
    display: none;
    position: fixed;
    top: 0;
    z-index: 60;
}

#nav_header.on {
    display: block;
    animation: nav_header_fade_in 0.2s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes nav_header_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes nav_header_fade_out {
    from{ opacity: 1; }
    to{ opacity: 0; }
}

#nav_header > .content {
    width: 100%;
    background-color: #268300;
    padding: 10px;
    height: 54px;
}

#nav_header > .content > .inner { display: flex; width: 100%; align-content: center; }

#nav_header > .content > .inner > .cell.title { width: 94px; padding-right: 10px; }
#nav_header > .content > .inner > .cell.title h1 a { text-decoration: none; display: block; }
#nav_header > .content > .inner > .cell.title h1 a img { max-width: 84px; vertical-align: top; }

#nav_header > .content > .inner > .cell.link {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

#nav_header > .content > .inner > .cell.link .submenu {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 32px;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell + .cell { margin-left: 5px; }

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn { height: 100%; position: relative; }

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > .blow {
    position: absolute;
    left: -14px;
    top: -6px;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > .blow > img { max-width: 23px; }

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > a {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.1);
    padding: 5px;
    text-decoration: none;
    color: #444;
    border: 1px solid #d3d3d3;
    height: 100%;
    display: flex;
    align-items: center;
    height: 32px;
    max-height: 32px;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap {
    display: flex;
    align-items: center;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span.icon i {
    display: block;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    line-height: 1;
    color: #2d6fb7;
    font-size: 2.2rem;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span.txt {
    font-size: 1rem;
    padding: 0;
    font-weight: bold;
    color: #444;
    padding-left: 4px;
    line-height: 1.3;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.icon i {
    font-size: 3rem;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.txt {  }

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.txt > span { display: block; }

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.txt > span.cap {
    height: 13px;
    max-height: 13px;
    line-height: 1.2;
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
    margin-left: -4px;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.txt > span.cap > span {
    display: block;
    line-height: 1.1;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > a > .wrap > span.txt > span.cap > span > strong {
    margin-right: 1px;
    color: #0b838a;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > span.blow {
    position: absolute;
    left: -14px;
    top: -6px;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell.smappy .header_btn > span.blow > img { max-width: 23px; }


#nav_header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a > .wrap > span.txt > span.cap {
    letter-spacing: -0.1em;
}

#nav_header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span.txt > span.main {
    display: block;
    text-align: center;
    line-height: 1.2;
}

#nav_header > .content > .inner > .cell.menu {
    width: 66px;
    height: 100%;
    margin-left: 5px;
}

#nav_header > .content > .inner > .cell.menu > .btn {
    display: block;
    height: 32px;
}

#nav_header > .content > .inner > .cell.menu > .btn > a {
    text-decoration: none;
    width: auto;
    position: relative;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    font-weight: bold;
    color: #555;
    transition: all 140ms ease-in-out;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.1rem;
    text-align: center;
    height: 100%;
    width: 100%;
    
}

#nav_header > .content > .inner > .cell.menu > .btn > a > .inner { display: flex; align-items: center; }

#nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.txt {
    padding-left: 5px;
    font-size: 1.1rem;
    line-height: 1.3;
}

#nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon {
    color: #268300;
    font-size: 1.5rem;
    line-height: 1.4;
}

#nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.txt {
    line-height: 1.2;
    font-size: 1.1rem;
    padding-left: 5px;
}


/* --- グロナビ用背景 --- */
#nav_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 48;
    display: none;
}

#nav_bg.on {
    display: block;
    animation: nav_bg_fade_in 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#nav_bg.off {
    display: block;
    animation: nav_bg_bg_fade_out 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes nav_bg_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes nav_bg_fade_out {
    from{ opacity: 1; }
    to{ opacity: 0; }
}


/* - グロナビ内検索フィールド
---------------------------------------------------------------------- */
#help_area > .inner > .cell.search .search_box input[type="text"] { font-size: 1.6rem; }


/* - レース情報ヘッダー
---------------------------------------------------------------------- */
#info_header {
	background-color: #268300;
	display: flex;
	align-items: center;
	height: 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
}

#info_header > div { height: 100%; }

#info_header .logo {
	padding-left: 5px;
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;
    padding-right: 15px;
}

#info_header .logo a { display: block; text-decoration: none; }

#info_header .logo img {
	max-width: 74px;
	max-width: 54px;
    height: auto;
	vertical-align: top;
}

#info_header .odds {
    display: flex;
    align-items: center;
    border-left: 1px solid #fff;
}

#info_header .odds > a {
    display: block;
    text-decoration: none;
    padding: 0 5px;
    display: flex;
    align-items: center;
    height: 100%;
}

#info_header .odds > a > .line { display: flex; align-items: center; }

#info_header .odds .cap {
    font-size: 1rem;
    color: #fff;
    margin-right: 6px;
}

#info_header .odds .cap strong { margin-right: 0.2em; font-size: 1.1rem; }

#info_header .odds .btn_refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 5px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: bold;
    text-decoration: none;
    border-radius: 22px;
    cursor: pointer;
    box-sizing: border-box;
    color: #555;
    background-color: #fff;
    vertical-align: middle;
    box-sizing: border-box;
    background-color: #0d68c2;
    border: 1px solid #0a56a1;
    color: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}

#info_header .odds > .btn_refresh i {  }

/* --- ヘッダー レース選択ボタン --- */
#info_header .btn_race_select {  }

#info_header .btn_race_select a {
	display: block;
	text-decoration: none;
	padding: 0 8px;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    transition: all 0.2s ease-in-out;
    background-color: #1d4f0d;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom: 1px solid #1d4f0d;
}

#info_header .btn_race_select.on a {
    background-color: #004d40;
    color: #fff;
    border-bottom: 1px dashed #333;
}

#info_header .btn_race_select a > span { display: flex; align-items: center; }

#info_header .btn_race_select a > span.txt { font-size: 1.3rem; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }

#info_header .btn_race_select.on a > span.txt { text-shadow: none; }

#info_header .btn_race_select a > span.icon { margin-left: 5px; }

#info_header .btn_race_select a i { display: block; font-size: 1.5rem; line-height: 1.5; }

@keyframes btn_race_select_on {
    from{ background-color: #268300; color: #fff; }
    to{ background-color: #fff; color: #444; }
}


/* --- ヘッダー レース情報（i）ボタン --- */
#info_header .btn_race_info {
    padding: 4px;
    flex-grow: 0;
    text-align: right;
    font-size: 0;
    padding-left: 10px;
}

#info_header .btn_race_info > .btn {
    display: inline-block;
    font-size-adjust: 1.3rem;
    max-width: 44px;
}

#info_header .btn_race_info > .btn a {
    text-decoration: none;
    position: relative;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    box-sizing: border-box;
    font-weight: bold;
    color: #555;
    transition: all 140ms ease-in-out;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 22px;
    width: 36px;
}

#info_header .btn_race_info.on > .btn a {
    background-color: #004d40;
    color: #fff;
    border-color: #222;
}

#info_header .btn_nav {
    padding: 4px;
    flex-grow: 1;
    text-align: right;
    font-size: 0;
    padding-right: 6px;
}

#info_header .btn_nav > .btn { display: inline-block; font-size: 1rem; }

#info_header .btn_nav a {
    text-decoration: none;
    position: relative;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    box-sizing: border-box;
    font-weight: bold;
    color: #555;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
    font-size: 1rem;
    text-align: center;
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 22px;
}

#info_header .btn_nav a > .inner { display: flex; align-items: center; }

#info_header .btn_nav a > .inner > .cell.txt {
    padding-left: 5px;
    font-size: 1rem;
    line-height: 1.3;
}

#info_header .btn_nav a.active > .inner > .cell.txt { font-size: 1.2rem; line-height: 1.2; }

#info_header .btn_nav a > .inner > .cell.txt > .cap.menu { display: inline; }
#info_header .btn_nav a.active > .inner > .cell.txt > .cap.menu { display: none; }
#info_header .btn_nav a > .inner > .cell.txt > .cap.close { display: none; }
#info_header .btn_nav a.active > .inner > .cell.txt > .cap.close { display: inline; }

#info_header .btn_nav a > .inner > .cell.icon > .icon {
    box-sizing: border-box;
    position: relative;
    display: block;
    margin: 0 auto;
    height: 10px;
    width: 12px;
}

#info_header .btn_nav a > .inner > .cell.icon > .icon > span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #555;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

#info_header .btn_nav a > .inner > .cell.icon > .icon > span:nth-child(1){ top: 0; }

#info_header .btn_nav a > .inner > .cell.icon > .icon > span:nth-child(2){
    top: 4px;
    transition: all 0.1s ease-in-out;
}

#info_header .btn_nav a > .inner > .cell.icon > .icon > span:nth-child(3){ bottom: 0; }


/* --- レース情報詳細の背景 --- */
#info_detail_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 38;
    display: none;
}

#info_detail_bg.on {
    display: block;
    animation: info_detail_bg_fade_in 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#info_detail_bg.off {
    display: block;
    animation: info_detail_bg_fade_out 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes info_detail_bg_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes info_detail_bg_fade_out {
    from{ opacity: 1; }
    to{ opacity: 0; }
}

/* --- レース情報詳細 --- */
#info_detail {
    position: fixed;
    top: 30px;
    z-index:40;
    background-color: #fff;
    width: 100%;
    display: none;
}

#info_detail.on {
    display: block;
    animation: info_detail_fade_in 0.5s ease-in-out, info_detail_open 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#info_detail.off {
    display: block;
    animation: info_detail_fade_out 0.3s ease-in-out, info_detail_close 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes info_detail_open {
    from{ transform: translateY(8px) scale(1.1); }
    to{ transform: translateY(0) scale(1.0); }
}

@keyframes info_detail_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes info_detail_close {
    from{ transform: translateY(0) scale(1.0); }
    to{ transform: translateY(-10px) scale(0.9); }
}

@keyframes info_detail_fade_out {
    from{ opacity: 1; }
    to{ opacity: 0; }
}

/* --- レース選択ボタン --- */
#info_detail .btn.race_select {
    position: absolute;
    right: 15px;
    top: 15px;
}

#info_detail .btn.race_select > a {
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    /*transition: all 140ms ease-in-out;*/
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1.4;
    padding: 0 6px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: #fff;
	background-color: #0f75da;
	border: 1px solid #0c63b9;
    font-size: 1.1rem;
}

#info_detail .btn.race_select > a i { margin-right: 0.3em; color: #188542; color: #fff; }

/* --- 開催・レース選択エリア --- */
#info_detail > .race_select_area {
    position: absolute;
    z-index: 32;
    top: 0;
    width: 100%;
    background-color: #fff;
    display: none;
}

#info_detail > .race_select_area.on {
    display: block;
    animation: race_select_area_fade_in 0.4s ease-in-out, race_select_area_open 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#info_detail > .race_select_area.off {
    opacity: 1;
    display: block;
    animation: race_select_area_fade_out 0.3s ease-in-out, race_select_area_close 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes race_select_area_open {
    from{ transform: translateY(-4px) scale(1.1); }
    to{ transform: translateY(0) scale(1.0); }
}

@keyframes race_select_area_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes race_select_area_close {
    from{ transform: translateY(0) scale(1.0); }
    to{ transform: translateY(-10px) scale(0.9); }
}

@keyframes race_select_area_fade_out {
    from{ opacity: 1; }
    to{ opacity: 0; }
}

#info_detail > .race_select_area > .title {
    background-color: #004d40;
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 6px;
    display: flex;
    align-items: center;
}

#info_detail > .race_select_area > .title > .txt { flex-grow: 1; }

#info_detail > .race_select_area > .title > .close {  }
#info_detail > .race_select_area > .title > .close > a {
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #d3d3d3;
    cursor: pointer;
    box-sizing: border-box;
    /*transition: all 140ms ease-in-out;*/
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1.4;
    font-size: 1.1rem;
    padding: 0 8px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    background-color: #fff;
}

#info_detail > .race_select_area > .title > .close > a i { margin-right: 0.3em; color: #268300; }

/* --- 開催選択 --- */
#info_detail > .race_select_area > .kaisai_select { background-color: #fff; }
#info_detail > .race_select_area > .kaisai_select > .kaisai_line { background-color: #eee; }
#info_detail > .race_select_area > .kaisai_select > .kaisai_line + .kaisai_line { margin-top: 1px; }

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date {
    background-color: #eaeade;
    color: #444;
    padding: 5px;
    font-weight: bold;
    height: 100%;
    font-size: 1.2rem;
    border-bottom: 1px solid #dfdfd3;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date > span.day {
    font-size: 1.2rem;
    font-weight: normal;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content { flex-grow: 1; padding: 2px; }
#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list { display: flex; width: 100%; }
#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div {
    width: 33.333%;
    text-align: center;
    padding: 4px;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div > a {
    display: block;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
    line-height: 1.4;
    font-size: 1.1rem;
    font-weight: bold;
    color: #06a;
    padding: 6px 4px;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div.current > a {
    background-color: #444;
    color: #fff;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div > a i {
    margin-right: 0.3em;
    color: #188542;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div.current > a i { color: #fff; }

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div > a  i.fa.fa-chevron-circle-down {
    display: none;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div.current > a  i.fa.fa-chevron-circle-down {
    display: inline-block;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div > a  i.fa.fa-chevron-circle-right {
    display: inline-block;
}

#info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div.current > a  i.fa.fa-chevron-circle-right {
    display: none;
}

/* --- レース番号ボタン --- */
#info_detail > .race_select_area > .race_select_menu { background-color: #eaeaea; border-top: 1px dotted #ccc; }

#info_detail > .race_select_area > .race_select_menu > ul.nav.race-num {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 2px;
}

#info_detail > .race_select_area > .race_select_menu > ul.nav.race-num > li { width: 16.667%; padding: 4px; }

#info_detail > .race_select_area > .race_select_menu > ul.nav.race-num > li > a {
    display: block;
    background-color: #fff;
    line-height: 1.4;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #06a;
    font-size: 1.1rem;
    padding: 4px 0;
    border: 1px solid #fff;
    transition: all 140ms ease-in-out;
    text-align: center;
}

#info_detail > .race_select_area > .race_select_menu > ul.nav.race-num > li.current > a {
    background-color: #444;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    border: 1px solid #444;
}

#info_detail > .race_select_area > .race_select_menu > ul.nav.race-num > li > a img {
    max-width: 30px;
    max-height: 15px;
    vertical-align: top;
}

/* --- 開催・レース選択エリア 閉じるボタン --- */
#info_detail > .race_select_area > .close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

#info_detail > .race_select_area > .close > a {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1.4;
    padding: 0 6px;
    min-width: 80px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    background-color: #fff;
}

#info_detail > .race_select_area > .close > a i { margin-right: 0.3em; color: #268300; }

/* --- レース名・詳細エリア --- */
#info_detail > .race_title_area { padding: 10px; display: none; }
#info_detail > .race_title_area.on {
    display: block;
    animation: race_title_area_fade_in 0.4s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes race_title_area_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

.race_header { width: 100%; }
.race_header > div {  }
.race_header > .content {  }

/* ----- 開催日 ----- */
.race_header .date_line { color: #444; }
.race_header .date_line > .inner { display: table; }

.race_header .date_line > .inner > .cell {
    display: table-cell;
    vertical-align: bottom;
    font-size: 1.2rem;
}

.race_header .date_line > .inner > .cell.date { white-space: nowrap; }

/* --- レース番号（WIN5）｜発走時刻｜天候・馬場 --- */
.race_header .race_num_line {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.race_header .race_num_line > .number {
    display: flex;
    background-color: #00695C;
    align-items: center;
    border-radius: 3px;
}

.race_header .race_num_line > .number > .num { padding: 2px 4px; text-align: center; }
.race_header .race_num_line > .number > .num img { max-width: 36px; vertical-align: top; }

.race_header .race_num_line > .number > .win5 {
    background-color: #fff;
    padding: 3px 4px;
    margin-right: 4px;
    border-radius: 0 1px 1px 0;
}

.race_header .race_num_line > .number > .win5 img { max-width: 48px; vertical-align: top; }

.race_header .race_num_line > .wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.race_header .race_num_line > .cell {
    vertical-align: middle;
    position: relative;
}

.race_header .race_num_line > .number + .wrapper { margin-left: 10px; }

.race_header .race_num_line > .wrapper > .cell.time {
    font-size: 1.1rem;
    margin: 0 10px 3px 0;
  }
.race_header .race_num_line > .wrapper > .cell.time strong { font-size: 1.3rem; }

.race_header .race_num_line > .wrapper > .cell.baba {
    margin: 3px 0;
}
.race_header .race_num_line > .wrapper > .cell.baba > ul {
    font-size: 0;
    position: relative;
    display: table;
    top: -1px;
}

.race_header .race_num_line > .wrapper > .cell.baba > ul > li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.race_header .race_num_line > .wrapper > .cell.baba > ul > li:last-child { margin-right: 0; }

.race_header .race_num_line > .wrapper > .cell.baba > ul > li > .inner { display: table; }

.race_header .race_num_line > .wrapper > .cell.baba > ul > li > .inner > span {
    display: table-cell;
    border: 1px solid #ddd;
    padding: 2px 6px;
    vertical-align: middle;
    line-height: 1.4;
    color: #444;
}

.race_header .race_num_line > .wrapper > .cell.baba > ul > li > .inner > span.cap {
    border-right: 1px dashed #ccc;
    font-size: 1.1rem;
}

.race_header .race_num_line > .wrapper > .cell.baba > ul > li.weather > .inner > span.cap { background-color: #E1F5FE; }
.race_header .race_num_line > .wrapper > .cell.baba > ul > li.turf > .inner > span.cap { background-color: #dcf0d4; }
.race_header .race_num_line > .wrapper > .cell.baba > ul > li.dirt > .inner > span.cap { background-color: #EFEBE9; }


.race_header .race_num_line > .wrapper > .cell.baba > ul > li > .inner > span.txt {
    font-weight: bold;
    font-size: 1.1rem;
    border-left: none;
}

/* --- レース名 --- */
.race_header .race_name { margin-top: 5px;line-height:20px; }
.race_header .race_name h2 { font-size: 1.8rem; }
.race_header .race_name h2 .grade_icon.lg { top: 0;vertical-align:3%; }

/* --- レース条件・情報 --- */
.race_header div.type { display: table; margin-top: 6px; }

.race_header div.type > div.cell {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.2rem;
    line-height: 1.4;
    padding-left: 10px;
}

.race_header div.type > div.cell:first-child { padding-left: 0; }
.race_header div.type > div.cell.rule { padding-left: 0; }

/* --- コース（距離・周り） --- */
.race_header .course { margin-top: 4px; font-size: 1.4rem; font-weight: bold; }
.race_header .course > span.cap { font-size: 1rem; font-weight: normal; }
.race_header .course > span.unit { font-size: 1rem; font-weight: normal; margin-left: 0.1em; }
.race_header .course > span.detail { font-size: 1.1rem; font-weight: normal; }


/* - 本賞金・付加賞
--------------------------------------------- */
.race_header div.prize {
    margin-top: 5px;
    border-top: 1px dotted #ddd;
    padding-top: 5px;
}

.race_header div.prize > ul {}
.race_header div.prize > ul > li { line-height: 1.4; }
.race_header div.prize > ul > li > span { font-size: 1.1rem; }

.race_header div.prize_unit { display: table; }

.race_header div.prize_unit > .cell {
    display: table-cell;
    vertical-align: middle;
    font-size: 1rem;
}

.race_header div.prize_unit > .cell.cap { font-size: 1.1rem; text-align: center; width: 44px; }
.race_header div.prize_unit > .cell.cap > .unit { display: block; font-size: 1rem; }

.race_header div.prize_unit > .cell.data { padding-left: 5px; }
.race_header div.prize_unit > .cell.data > ol { display: flex; flex-wrap: wrap; }
.race_header div.prize_unit > .cell.data > ol > li { margin-right: 15px; }
.race_header div.prize_unit > .cell.data > ol > li:last-child { margin-right: 0; }
.race_header div.prize_unit > .cell.data > ol > li > span { display: inline-block; line-height: 1.3; }
.race_header div.prize_unit > .cell.data > ol > li > span.cap { width: 20px; text-align: right; font-size: 1rem; }
.race_header div.prize_unit > .cell.data > ol > li > span.num { text-align: right; font-size: 1rem; width: 46px; }

/* --- レース結果、オッズボタン --- */
.race_header > .content > .link_area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dotted #ccc;
}

.race_header > .content > .link_area > div { width: 50%; padding: 5px; }

.race_header > .content > .link_area > div > a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1.4;
    padding: 5px;
    color: #fff;
    background-color: #0f75da;
    border: 1px solid #0c63b9;
}

.race_header > .content > .link_area > div > a i { margin-right: 0.4em; }

/* --- 閉じるボタン（レース情報 下部） --- */
.race_header > .content > .close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 0 0;
    border-top: 1px dotted #ccc;
    margin-top: 5px;
}

.race_header > .content > .close > a {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #d3d3d3;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    line-height: 1.4;
    padding: 0 6px;
    min-width: 80px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    background-color: #fff;
}

.race_header > .content > .close > a i { margin-right: 0.4em; color: #268300; }


/* - コンテンツエリア
---------------------------------------------------------------------- */
#contents {
    position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: auto;
    max-width: 100%;
    margin-top: 30px;
}

#main {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
}


/* --- 下部余白オブジェクト --- */
#bottom_margin {
    position: absolute;
    width: 100%;
    height: 120px;
}

/* --- フッター --- */
#footer {
    position: absolute;
    width: 100%;
    height: 30px;
    background-color: #1d4f0d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    bottom: -30px;
}

#footer.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: footer_fade_in 0.2s ease-in-out;
	animation-fill-mode: forwards;
    opacity: 1;
}

#footer p.copyright { font-size: 1rem; }

@keyframes footer_fade_in {
    from{ opacity: 0; bottom: -30px; }
    to{ opacity: 1; bottom: 0; }
}


/* - 拡大・縮小ボタン｜オッズ更新ボタン エリア
------------------------------------------------------------ */
#bottom_area {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 36;
    transition: all 0.2s ease-in-out;
}

#bottom_area.bottom { bottom: 46px; }

#bottom_area > .line { display: flex; align-items: center; }
#bottom_area > .line > div {  }
#bottom_area > .line > div + div { margin-left: 24px; }

/* --- オッズ更新ボタン --- */
#bottom_area > .line > div .odds {
    display: flex;
    align-items: center;
    border-left: 1px solid #fff;
    background-color: rgba(0,0,0,0.7);
    border-radius: 4px;
    filter: drop-shadow(1px 3px 2px rgba(0,0,0,0.3));
    min-height: 30px;
}

#bottom_area > .line > div .odds > a,
#bottom_area > .line > div .odds > div {
    display: block;
    text-decoration: none;
    padding: 0 5px;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 5px 6px;
}

#bottom_area > .line > div .odds .line {
    display: flex;
    align-items: center;
    justify-content: center;
}

#bottom_area > .line > div .odds .line .cap + .btn_refresh { margin-left: 6px; }

#bottom_area > .line > div .odds .cap {
    font-size: 1rem;
    color: #fff;
    margin-left: 2px;
    white-space: nowrap;
}

#bottom_area > .line > div .odds .cap strong { margin-right: 0.2em; font-size: 1.1rem; }

#bottom_area > .line > div .odds .btn_refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 5px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
    border: 1px solid #333;
    background-color: #fff;
    color: #333;
}

#bottom_area > .line > div .odds > .btn_refresh i {  }


/* --- 拡大・縮小・リセットボタン --- */
#bottom_area .zoom_btns { text-align: center; padding: 10px 0; }

#bottom_area .zoom_btns > .inner {
    font-size: 0;
    display: flex;
    align-items: center;
}

#bottom_area .zoom_btns > .inner > .btn {
	width: 36px;
	height: 36px;
	display: inline-block;
	font-size: 0;
	vertical-align: middle;
    filter: drop-shadow(1px 3px 2px rgba(0,0,0,0.3));
}

#bottom_area .zoom_btns > .inner > .btn.minus { margin-right: 5px; }
#bottom_area .zoom_btns > .inner > .btn.plus { margin-left: 5px; }

#bottom_area .zoom_btns > .inner > .btn.reset {
    width: auto;
    height: 32px;
    min-width: 90px;
}

#bottom_area .zoom_btns > .inner > .btn > a {
	display: block;
	text-decoration: none;
	font-size: 1.6rem;
	background-color: rgba(0,0,0,0.7);
	color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border: 1px solid #333;
}

#bottom_area .zoom_btns > .inner > .btn > a i { display: block; }

#bottom_area .zoom_btns > .inner > .btn.reset > a {
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    min-height: 28px;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.icon {
    margin-right: 6px;
    font-size: 1.2rem;
    position: relative;
    width: 18px;
    height: 18px;
    background-color: #eee;
    color: #444;
    border-radius: 3px;
    display: block;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.icon i {
    position: absolute;
    font-size: 1rem;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.icon i.fa.fa-arrow-up {
    left: 1px;
    bottom: 0;
    transform: rotate(45deg);
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.icon i.fa.fa-arrow-up + i.fa.fa-arrow-up {
    right: 1px;
    top: 0;
    left: inherit;
    bottom: inherit;
    transform: rotate(-135deg);
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.txt {
    flex-grow: 1;
    display: block;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > .inner > span.txt > .block {
    display: block;
    margin-top: 1px;
}

#bottom_area .zoom_btns > .inner > .btn.reset > a > span > span { text-align: center; }

#bottom_area .zoom_btns.is-fixed > .inner > .btn > a { box-shadow: 0 1px 4px 2px rgba(0,0,0,0.2); }



/* ------------------------------------------------------------
    表（ベース）
------------------------------------------------------------ */
/* - thead
------------------------------------------------------------ */
table.basic thead > tr > th {
	background-color: #37474F;
	color: #fff;
	padding: 10px;
	border: 1px solid #ccc;
	border-bottom-width: 2px;
	font-weight: bold;
	vertical-align: middle;
    text-align: center;
    height: 57px;
}

/* - tbody
------------------------------------------------------------ */
/* ----- th ----- */
table.basic tbody > tr > th {
	padding: 15px 10px;
	border: 1px solid #ccc;
	text-align: center;
	background-color: #eceff1;
	vertical-align: middle;
}

/* ----- td ----- */
table.basic tbody > tr > td {
	padding: 15px 10px;
	border: 1px solid #ccc;
	text-align: center;
    background-color: #fff;
    vertical-align: middle;
}

/* - セル余白（padding）
------------------------------------------------------------ */
/* --- 縦padding狭い --- */
table.basic.narrow thead > tr > th,
table.basic.narrow tbody > tr > th,
table.basic.narrow tbody > tr > td { padding: 5px 10px; }

/* --- 縦横padding狭い --- */
table.basic.narrow-xy thead > tr > th,
table.basic.narrow-xy tbody > tr > th,
table.basic.narrow-xy tbody > tr > td { padding: 5px; }

/* --- 縦横paddingなし --- */
table.basic.no-td-padding tbody > tr > td { padding: 0; }

/* ------------------------------------------------------------
    重賞アイコン（「重賞」や「新設重賞」は.grade_iconのみ）
------------------------------------------------------------ */
.grade_icon {
    margin: 0 4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.grade_icon img { max-width: 24px; vertical-align: top; }
.grade_icon.lg { top: 1px;}
.grade_icon.lg img { max-width: 36px;}


/* ------------------------------------------------------------
    馬アイコン（マル外｜カク外｜マル地｜カク地） （画像）
------------------------------------------------------------ */
.horse_icon {
    margin-right: 2px;
    position: relative;
    top: -1px;
    z-index: 1;
}

.horse_icon > img { vertical-align: -10%; max-width: 14px; }


/* - テーブルヘッダー
---------------------------------------------------------------------- */
#table_header {
    position: sticky;
    top: 0;
    z-index: 10;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 0 8px rgba(0,0,0,0.7);
}

#table_header.on {
    opacity: 1;
    animation: table_header_fade_in 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes table_header_fade_in {
    from{ opacity: 0; top: -30px; }
    to{ opacity: 1; top: 0; }
}

#table_header table.basic { table-layout: fixed; min-width: 1120px; }
#table_header table.basic.g1 { min-width: 1150px; }

#table_header table.basic thead > tr { height: 20px; }
#table_header table.basic thead > tr > th {
    font-size: 1.1rem;
    font-weight: normal;
    height: 20px;
    padding: 0;
    border-bottom-width: 1px;
}

#table_header table.basic thead > tr > th.past_title { border-bottom-width: 1px; }
#table_header table.basic thead > tr > th.waku { width: 28px; }
#table_header table.basic thead > tr > th.num { width: 28px; }
#table_header table.basic thead > tr > th.horse { font-size: 1rem; }
#table_header table.basic thead > tr > th.horse > span { font-size: 1.1rem; }
#table_header table.basic thead > tr > th.rate { width: 50px; }
#table_header table.basic thead > tr > th.odds { width: 80px; }
#table_header table.basic thead > tr > th.odds > span { display: block; font-size: 1rem; }
#table_header table.basic thead > tr > th.weight { width: 70px; }
#table_header table.basic thead > tr > th.weight > span { display: block; font-size: 1rem; }
#table_header table.basic thead > tr > th.jockey { width: 100px; }
#table_header table.basic thead > tr > th.past { width: 140px; }
#table_header table.basic thead > tr > th.past { width: 148px; }

#table_header table.basic.g1 thead > tr > th.odds { width: 110px; }


/* -出馬表メインテーブル
---------------------------------------------------------------------- */
table.basic.s_table { width: 100%; min-width: 1120px; }
table.basic.s_table.g1 { min-width: 1150px; }/* - G1プレレーティングがある表 - */

table.basic.s_table > caption { text-align: left; }

table.basic.s_table thead > tr > th { font-size: 1.1rem; line-height: 1.3; }
table.basic.s_table thead > tr > th.past_title { border-bottom-width: 1px; }
table.basic.s_table thead > tr > th.waku { width: 28px; }
table.basic.s_table thead > tr > th.num { width: 28px; }
table.basic.s_table thead > tr > th.horse {  }
/*table.basic.s_table thead > tr > th.rate { width: 50px; }*/
table.basic.s_table thead > tr > th.odds { width: 80px; }
table.basic.s_table.g1 thead > tr > th.odds { width: 110px; padding: 5px 2px; }
table.basic.s_table thead > tr > th.odds > span.line { display: block; }
table.basic.s_table thead > tr > th.odds > span.line .cap { display: block; font-size: 1rem; }
table.basic.s_table.g1 thead > tr > th.odds > span.line .cap { display: inline; margin-left: 4px; }
table.basic.s_table thead > tr > th.odds > span.line.rating { margin-top: 2px; }
table.basic.s_table thead > tr > th.odds > span.line.rating > span {
    display: block;
    /*transform: scale(0.9);
    transform-origin: center center;*/
    /*letter-spacing: -0.1em;*/
}

table.basic.s_table thead > tr > th.weight { width: 80px; width: 70px; }
table.basic.s_table thead > tr > th.weight > span { display: block; font-size: 1rem; }

table.basic.s_table thead > tr > th.jockey { width: 90px; width: 100px; }
table.basic.s_table thead > tr > th.past { width: 140px; }
table.basic.s_table thead > tr > th.past { width: 148px; }

table.basic.s_table tbody > tr > td {  }

table.basic.s_table tbody > tr > td.waku {
    font-size: 1.2rem;
    padding: 5px 2px;
    text-align: center;
}

table.basic.s_table tbody > tr > td.waku img { vertical-align: top; max-width: 20px; }

table.basic.s_table tbody > tr > td.num {
    font-size: 1.2rem;
    line-height: 1;
    padding: 5px 0;
}

table.basic.s_table tbody > tr > td.num span.cap {
    font-size: 1.4rem;
    line-height: 1.3;
    color: #c02;
    font-weight: bold;
}

table.basic.s_table tbody > tr > td.num span.blinker {
    display: block;
    text-align: center;
    top: 0;
    margin: 4px auto 0 auto;
}

table.basic.s_table tbody > tr > td.num span.blinker img { vertical-align: top; max-width: 15px; }

table.basic.s_table tbody > tr > td.horse {
    text-align: left;
    font-size: 1.2rem;
    padding: 3px 5px;
}

table.basic.s_table tbody > tr > td.horse > .inner { position: relative; }

table.basic.s_table tbody > tr > td.horse div.name_line {
    display: table;
    width: 100%;
    margin-bottom: 4px;
    padding-right: 34px;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div {
    display: table-cell;
    vertical-align: middle;
    padding: 3px 0;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.name {
    font-weight: bold;
    line-height: 1.4;
    font-size: 1.4rem;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.name > span.inner { display: table; }

table.basic.s_table tbody > tr > td.horse div.name_line > div.name > span.inner > span {
    display: table-cell;
    vertical-align: top;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.name > span.inner > span > a { vertical-align: middle; }

table.basic.s_table tbody > tr > td.horse div.name_line .horse_icon {
    position: relative;
    top: -1px;
    margin-right: 2px;
}

table.basic.s_table tbody > tr > td.horse div.name_line .horse_icon > span {
    font-size: 1rem;
    min-width: 13px;
    padding: 0;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds {
    text-align: right;
    line-height: 1.3;
    white-space: nowrap;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds > div.odds_line { min-height: 24px; }

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds > div.odds_line > span {
    display: block;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds > div.odds_line > span.num { font-size: 1.2rem; }

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds > div.odds_line > span.pop_rank {
    font-size: 1rem;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.horse div.name_line > div.odds > div.odds_line > span.pop_rank > span { font-size: 1rem; }

/* - 戦績・総賞金・馬体重 - */
table.basic.s_table tbody > tr > td.horse div.result_line { display: table; }

table.basic.s_table tbody > tr > td.horse div.result_line > div.cell {
    display: table-cell;
    font-size: 1.1rem;
    min-height: 1.1rem;
}

table.basic.s_table tbody > tr > td.horse div.result_line > div.cell.result { padding-right: 0.9em; }

table.basic.s_table tbody > tr > td.horse div.result_line > div.cell.weight {
    font-size: 1.1rem;
    color: #c00;
    font-weight: bold;
}

table.basic.s_table tbody > tr > td.horse div.result_line > div.cell.weight span.transition { margin-left: 0.2em; }

table.basic.s_table tbody > tr > td.horse p.weight {
    font-size: 1.1rem;
    color: #c00;
    font-weight: bold;
    min-height: 1.1rem;
}

table.basic.s_table tbody > tr > td.horse p.weight > span.transition {  }

table.basic.s_table tbody > tr > td.horse p.owner {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 5px;
}

table.basic.s_table tbody > tr > td.horse p.breeder {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 2px;
}

table.basic.s_table tbody > tr > td.horse p.trainer {
    font-size: 1.1rem;
    margin-top: 4px;
}

table.basic.s_table tbody > tr > td.horse p.trainer a {
  display: inline;
}

table.basic.s_table tbody > tr > td.horse p.trainer span.division { margin-left: 0.5em; }

table.basic.s_table ul.family_line { margin-top: 4px; }

table.basic.s_table ul.family_line > li {
    font-size: 1.1rem;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;

    display: flex;
    align-items: flex-start;
}

table.basic.s_table ul.family_line > li + li { margin-top: 1px; }

table.basic.s_table ul.family_line > li > span { line-height: 1.2; }
table.basic.s_table ul.family_line > li > span:first-child { white-space: nowrap; }

table.basic.s_table ul.family_line > li span.bloodmare { display: block; font-size: 1rem; }

table.basic.s_table ul.family_line > li.broodmare { display: block; font-size: 1rem; }
/*table.basic.s_table tbody > tr > td.rate { font-size: 1.2rem; }*/

table.basic.s_table tbody > tr > td.odds { font-size: 1.4rem; }
table.basic.s_table tbody > tr > td.odds .odds > span { display: block; line-height: 1.3; }
table.basic.s_table tbody > tr > td.odds .odds > span.pop_rank { font-size: 1.1rem; margin-top: 2px; }
table.basic.s_table tbody > tr > td.odds .odds > span.pop_rank > span { margin-left: 0.1em; }
table.basic.s_table tbody > tr > td.odds strong.red { color: #c02; font-size: 1.6rem; }

table.basic.s_table tbody > tr > td.odds .rating { font-size: 0; }

table.basic.s_table tbody > tr > td.odds .odds + .rating {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dotted #ccc;
}

table.basic.s_table tbody > tr > td.odds .rating > p {
    display: flex;
    align-items: center;
    justify-content: center;
}

table.basic.s_table tbody > tr > td.odds .rating > p + p { margin-top: 4px; }

table.basic.s_table tbody > tr > td.odds .rating > p > span { display: block; font-size: 1rem; }

table.basic.s_table tbody > tr > td.odds .rating > p > span.num {
    padding: 2px 3px;
    background-color: #555;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    border-radius: 2px;
    min-width: 28px;
}

table.basic.s_table tbody > tr > td.odds .rating > p > span.cat {
    margin-left: 4px;
    line-height: 1.2;
    font-size: 1.1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

table.basic.s_table tbody > tr > td.weight { font-size: 1.3rem; }
table.basic.s_table tbody > tr > td.weight > strong { line-height: 1.3; }
/*table.basic.s_table tbody > tr > td.weight > strong > span {  }*/
table.basic.s_table tbody > tr > td.weight > strong > span.transition { display: block; font-size: 1.2rem; color: #c00; font-weight: bold; margin-top: 2px; }

table.basic.s_table tbody > tr > td.jockey { padding: 5px 2px; }
table.basic.s_table tbody > tr > td.jockey > p.cloth { margin-bottom: 5px; }
table.basic.s_table tbody > tr > td.jockey p img { vertical-align: top; }

table.basic.s_table tbody > tr > td.jockey > p.age { line-height: 1.3; font-size: 1.2rem; }

table.basic.s_table tbody > tr > td.jockey > p.weight {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-top: 2px;
}

table.basic.s_table tbody > tr > td.jockey > p.weight > span { margin-left: 0.1em; font-size: 1rem; }

table.basic.s_table tbody > tr > td.jockey > p.jockey { font-size: 1.3rem; margin-top: 4px; }

table.basic.s_table tbody > tr > td.jockey > p.jockey > a { display: inline; }

table.basic.s_table tbody > tr > td.jockey > p.jockey > a > span {  }

table.basic.s_table tbody > tr > td.past {
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.3;
    vertical-align: top;
    background-color: #f7f7f7;
    padding: 4px 5px 2px 5px;
}

table.basic.s_table tbody > tr > td.past.place1 { background-color: #f5e0e0; }
table.basic.s_table tbody > tr > td.past.place2 { background-color: #d7ecf6; }
table.basic.s_table tbody > tr > td.past.place3 { background-color: #dcf0d4; }

table.basic.s_table tbody > tr > td.past > div.date_line { display: table; width: 100%; }

table.basic.s_table tbody > tr > td.past > div.date_line > div {
    display: table-cell;
    vertical-align: top;
    font-size: 1rem;
    vertical-align: middle;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.past > div.date_line > div.rc { text-align: right; }

table.basic.s_table tbody > tr > td.past > div.date_line > div.rc span.race_num {
    margin-left: 1px;
    display: inline-block;
    vertical-align: middle;
}

table.basic.s_table tbody > tr > td.past > div.date_line > div.rc span.race_num img {
    vertical-align: top;
    display: block;
    position: relative;
    top: -1px;
}

table.basic.s_table tbody > tr > td.past > div.race_line { display: table; width: 100%; margin-top: 2px; }
table.basic.s_table tbody > tr > td.past > div.race_line > div { display: table-cell; vertical-align: top; }

table.basic.s_table tbody > tr > td.past > div.race_line > div.name {
    font-size: 1.3rem;
    font-weight: bold;
}

table.basic.s_table tbody > tr > td.past > div.race_line > div.r_class { text-align: right; }

table.basic.s_table tbody > tr > td.past > div.race_line > div.r_class > span.grade_icon.no_grade {
    border-radius: 2px;
    text-decoration: none;
    margin: 0;
    position: relative;
    top: -1px;
    display: inline-block;
    text-align: center;
    color: #333;
    padding: 3px 4px 2px 4px;
    line-height: 1;
    border: 1px solid #ddd;
    min-width: 41px;
    background-color: #f3f3f3;
    font-size: 1rem;
}

table.basic.s_table tbody > tr > td.past > div.race_line > div.r_class > span.grade_icon { margin: 0; top: 0; }

/* --- 着順の行 --- */
table.basic.s_table tbody > tr > td.past > div.place_line {
    display: table;
    width: 100%;
    margin-top: 3px;
    height: 24px;
}

table.basic.s_table tbody > tr > td.past > div.place_line > div { display: table-cell; vertical-align: middle; }

table.basic.s_table tbody > tr > td.past > div.place_line > div.place {
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.past > div.place_line > div.place.stop { font-size: 1.7rem; }

table.basic.s_table tbody > tr > td.past > div.place_line > div.place > span { margin-left: 0.2em; font-size: 1rem; }

table.basic.s_table tbody > tr > td.past > div.place_line > div.num {
    text-align: right;
    font-size: 1rem;
    line-height: 1.1;
}

table.basic.s_table tbody > tr > td.past > div.place_line > div.num > span { margin-left: 4px; }
table.basic.s_table tbody > tr > td.past > div.place_line > div.num > span:first-child { margin-left: 0; }

table.basic.s_table tbody > tr > td.past > div.place_line > div.num > span > span {
    margin-left: 0.1em;
    font-size: 1rem;
}

table.basic.s_table tbody > tr > td.past > div.place_line > div.num > span.pop {
    display: block;
    margin-left: 0;
    line-height: 1.1;
}

table.basic.s_table tbody > tr > td.past > div.place_line > div.num > span.pop > span { font-size: 1rem; }

table.basic.s_table tbody > tr > td.past > div.num_line { font-size: 1.1rem; }
table.basic.s_table tbody > tr > td.past > div.num_line > span { margin-right: 0.5em; }
table.basic.s_table tbody > tr > td.past > div.num_line > span > span { margin-left: 0.1em; font-size: 1rem; }

table.basic.s_table tbody > tr > td.past > div.info_line1 {
    display: table;
    width: 100%;
    margin-top: 2px;
}

table.basic.s_table tbody > tr > td.past > div.info_line1 > div {
    display: table-cell;
    font-size: 1.1rem;
    vertical-align: top;
}

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.jockey { font-size: 1.1rem; }

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.jockey > span {
    margin-right: 1px;
    font-size: 1.1rem;
}

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.jockey > span.weight { display: block; }

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.jockey > span.weight > span { font-size: 1rem; }

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.weight {
    text-align: right;
    width: 44px;
    font-size: 1.1rem;
}

table.basic.s_table tbody > tr > td.past > div.info_line1 > div.weight > span { margin-left: 0.1em; font-size: 1rem; }

table.basic.s_table tbody > tr > td.past > div.info_line2 { margin-top: 1px; }

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line {
    width: 100%;
    display: flex;
    align-items: center;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col {
    font-size: 1.1rem;
    line-height: 1.3;
    flex-grow: 1;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line + div.line {  }
table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line + div.line > .col.left { width: 68px; }
table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line + div.line > .col.right {
    width: 40px;
    text-align: right;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.left span.dist {
    font-size: 1.2rem;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.left span.dist > span.unit {
    font-size: 1rem;
    margin-right: 0.2em;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.left span.condition {
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.center {
    font-size: 0;
    text-align: right;
    vertical-align: middle;
    height: 13px;
    /*overflow: hidden;*/
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.center > p.rating {
    font-size: 1rem;
    font-weight: bold;
    background-color: #555;
    color: #fff;
    padding: 2px 3px;
    min-width: 28px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
    transform: scale(0.85);
    transform-origin: right center;
    line-height: 1.2;
    text-align: center;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.right { text-align: right; }

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.right p.time { font-size: 1.2rem; height: 15px; }

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.right p.h_weight {
    font-size: 1rem;
    line-height: 1.3;
}

table.basic.s_table tbody > tr > td.past > div.info_line2 > div.line > .col.right p.h_weight > span { margin-left: 0.1em; }


/* --- info_line3（コーナー通過順位・上がり3ハロン・2着馬） --- */
table.basic.s_table tbody > tr > td.past > div.info_line3 { margin-top: 1px; }
table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line { font-size: 0; height: 14px; }
table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line:after { content: ''; display: block; clear: both; }

/* --- コーナー通過順位 --- */
table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.corner_list {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3rem;
}

table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.corner_list > ul {
    display: table;
    background-color: #fff;
    border-collapse: separate;
}

table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.corner_list > ul > li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color: #e5e5e5;
    color: #333;
    border-left: 1px solid #fff;
    line-height: 1.3;
    padding: 1px 0 0 0;
    font-size: 1rem;
    width: auto;
    min-width: 18px;
}

table.basic.s_table tbody > tr > td.past.place1 > div.info_line3 > div.line div.corner_list > ul > li,
table.basic.s_table tbody > tr > td.past.place2 > div.info_line3 > div.line div.corner_list > ul > li,
table.basic.s_table tbody > tr > td.past.place3 > div.info_line3 > div.line div.corner_list > ul > li {
    color: #333;
    border-left: 1px solid #ccc;
    background-color: #f7f7f7;
}

table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.corner_list > ul > li:first-child {
    margin-left: 0;
    border-left: none;
}

table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.corner_list > ul > li:last-child {  }

/* --- 上がり3ハロンタイム --- */
table.basic.s_table tbody > tr > td.past > div.info_line3 > div.line div.f3 {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.3;
    font-size: 1rem;
    padding: 0;
    position: relative;
    top: 1px;
    float: right;
}

/* --- 2着馬（1着馬）着差 --- */
table.basic.s_table tbody > tr > td.past > div.info_line3 > p.fin {
    margin-top: 3px;
    font-size: 1rem;
    line-height: 1.2;
}

table.basic.s_table tbody > tr > td.past > div.info_line3 > p.fin > span { margin-left: 0.4em; }


/* - サイドバー
---------------------------------------------------------------------- */
#side_bar {
    position: sticky;
    left: 0;
    z-index: 10;
    margin-top: -21px;
    box-shadow: 2px 0 6px rgba(0,0,0,0.5);
    opacity: 0;
    overflow: hidden;
    width: 59px;
}

#side_bar.on {
    opacity: 1;
    animation: side_bar_slide_in 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

#side_bar.off {
    animation: side_bar_slide_out 0.5s ease-in-out;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes side_bar_fade_in {
    from{ opacity: 0;}
    to{ opacity: 1; }
}

@keyframes side_bar_slide_in {
    from{ left: -100px; opacity: 0; }
    to{ left: 0; opacity: 1; }
}

@keyframes side_bar_slide_out {
    from{ left: 0; opacity: 1; }
    to{ left: -100px; opacity: 0; }
}

#side_bar table.basic.s_table {
    height: auto;
    table-layout: fixed;
    min-width: auto;
    max-width: 58px;
}

#side_bar table.basic.s_table thead > tr { height: 57px; }

#side_bar table.basic.s_table thead > tr > th {
    font-size: 1rem;
    line-height: 1.2;
    padding: 2px;
    font-weight: normal;
}

#side_bar table.basic.s_table thead > tr > th.num { width: 18px; }
#side_bar table.basic.s_table thead > tr > th.num span { writing-mode: vertical-rl; min-height: 49px; }

#side_bar table.basic.s_table thead > tr > th.data { width: 40px; }
#side_bar table.basic.s_table thead > tr > th.data > span { display: block; white-space: nowrap; }

#side_bar table.basic.s_table tbody > tr { /*height: 140px;*/ }

#side_bar table.basic.s_table tbody > tr > td.name {
    font-size: 1rem;
    vertical-align: middle;
    text-align: center;
    width: 18px;
    padding: 4px 0;
    vertical-align: top;
    background-color: #f5f5f5;
}

#side_bar table.basic.s_table tbody > tr > td.name.waku2 { background-color: #000; color: #fff; }
#side_bar table.basic.s_table tbody > tr > td.name.waku3 { background-color: #c62927; color: #fff; }
#side_bar table.basic.s_table tbody > tr > td.name.waku4 { background-color: #1973cd; color: #fff; }
#side_bar table.basic.s_table tbody > tr > td.name.waku5 { background-color: #ffeb3b; }
#side_bar table.basic.s_table tbody > tr > td.name.waku6 { background-color: #2f7d32; color: #fff; }
#side_bar table.basic.s_table tbody > tr > td.name.waku7 { background-color: #ffa727; }
#side_bar table.basic.s_table tbody > tr > td.name.waku8 { background-color: #f8bbd0; }

#side_bar table.basic.s_table tbody > tr > td.name > div.inner { font-size: 0; overflow: hidden; }

#side_bar table.basic.s_table.unset tbody > tr > td.name > div.inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#side_bar table.basic.s_table tbody > tr > td.name .num {
    text-align: center;
    display: block;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    padding-bottom: 3px;
    border-bottom: 1px dotted #ccc;
    letter-spacing: -0.1em;
    padding-right: 1px;
}

#side_bar table.basic.s_table tbody > tr > td.name.waku7 .num,
#side_bar table.basic.s_table tbody > tr > td.name.waku8 .num { border-bottom: 1px dotted #fff; }


#side_bar table.basic.s_table tbody > tr > td.name .horse {
    writing-mode: vertical-lr;
    text-orientation: upright;
    height: auto;
    line-height: 1em;
    font-size: 1rem;
    text-align: left;
    font-weight: bold;
    /*white-space: nowrap;*/
    display: block;
    margin: 0 auto;
}

#side_bar table.basic.s_table tbody > tr > td.name .horse.cancel {
    letter-spacing: 0.5em;
    text-align: center;
}

#side_bar table.basic.s_table tbody > tr > td.name .num + .horse { margin-top: 4px; }

#side_bar table.basic.s_table tbody > tr > td.name .horse_icon {
    top: 0;
    margin-right: 0;
}

#side_bar table.basic.s_table tbody > tr > td.name .horse_icon > img { max-width: 12px; vertical-align: top; }

#side_bar table.basic.s_table tbody > tr > td.name .num + .horse_icon { margin-top: 2px; }
#side_bar table.basic.s_table tbody > tr > td.name .horse_icon + .horse { margin-top: 2px; }

#side_bar table.basic.s_table tbody > tr > td.name .horse + .horse_icon { margin-top: 4px; }

#side_bar table.basic.s_table tbody > tr > td.data { padding: 0; background-color: #f5f5f5; }

#side_bar table.basic.s_table tbody > tr > td.data > .inner { display: flex; flex-flow: column; }
#side_bar table.basic.s_table tbody > tr > td.data > .inner > div { font-size: 1rem; padding: 10px 0; }
#side_bar table.basic.s_table tbody > tr > td.data > .inner > div + div { border-top: 1px dotted #ccc; }

#side_bar table.basic.s_table tbody > tr > td.data > .inner > div.jockey {  }

#side_bar table.basic.s_table tbody > tr > td.data > .inner > div.jockey > span { display: block; }
#side_bar table.basic.s_table tbody > tr > td.data > .inner > div.jockey > span + span { margin-top: 4px; }

#side_bar table.basic.s_table tbody > tr > td.data > .inner > div.odds strong.red { color: #c02; font-size: 1.1rem; }

#side_bar table.basic.s_table tbody > tr > td.data > .inner > div.weight > span { display: block; }

#side_bar table.basic tbody > tr > td.data > .inner > div.weight > span + span.transition { margin-top: 4px; }



/* - ヘッドラベル（基本）
---------------------------------------------------------------------- */
#head_label {
    position: fixed;
    top: 30px;
    left: 0;
    width: 59px;
    overflow: hidden;
    z-index: 20;
    box-shadow: 2px 0 4px rgba(0,0,0,0.3);
    opacity: 0;
}

#head_label.on {
    animation: head_label_fade_in 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#head_label.slide_bottom {
    animation: head_label_slide_bottom 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

#head_label.slide_right {
    animation: head_label_slide_right 0.5s ease-in-out;
	animation-fill-mode: both;
}

#head_label.off {
    animation: head_label_slide_off 0.5s ease-in-out;
	animation-fill-mode: forwards;
    opacity: 1;
}

@keyframes head_label_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes head_label_slide_bottom {
    from{ opacity: 0; margin-top: -30px; }
    to{ opacity: 1; margin-top: 0; }
}

@keyframes head_label_slide_right {
    from{ opacity: 0; margin-left: -100px; }
    to{ opacity: 1; margin-left: 0; }
}

@keyframes head_label_slide_off {
    from{ opacity: 1; margin-left: 0; }
    to{ opacity: 1; margin-left: -100px; }
}

#head_label table.basic { table-layout: fixed; width: 59px; }

#head_label table.basic thead > tr { height: 20px; }
#head_label table.basic thead > tr > th {
    font-size: 1.2rem;
    padding: 0;
    font-weight: normal;
    height: 20px;
    vertical-align: top;
    line-height: 1.5;
    border-bottom-width: 1px;
}

#head_label table.basic thead > tr > th.blank { width: 18px; }
#head_label table.basic thead > tr > th.basic { width: 40px; }



@media screen and (min-width:481px) {

    /* --- 本賞金 --- */
    div.prize_unit > .cell.cap { width: 80px; }
    div.prize_unit > .cell.cap > .unit { display: inline; }

    /* --- 開催日選択 --- */
    #info_detail > .race_select_area > .kaisai_select > .kaisai_line {
        display: flex;
        align-items: center;
    }

    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date > span.day { display: inline; margin-top: 0; }
    #info_detail > .race_select_area > .race_select_menu > ul.nav.race-num > li > a { padding: 2px 0; }

    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date {
        padding: 5px;
        height: 100%;
        min-height: 36px;
        display: flex;
        align-items: center;
        border-bottom: none;
        border-right: 2px solid #dfdfd3;
    }
    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div {  }
    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .content > .list > div > a {
        padding: 5px;
        font-size: 1.1rem;
    }

}

/* レスポンシブ対応メディアクエリ */
@media screen and (max-width:359px) {
    
    #info_header .btn_race_info { flex-grow: 1; padding-left: 4px; text-align: center; }
    #info_header .btn_nav { max-width: 42px; }
    #info_header .btn_nav a { width: 30px; }
    #info_header .btn_nav a > .inner > .cell.txt { display: none; }

    #nav_header > .content > .inner > .cell.menu { width: 40px; }
    #nav_header > .content > .inner > .cell.menu > .btn > a > .inner { display: block; }
    #nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell {
        display: block;
    }

    #nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon {
        line-height: 1;
    }
    #nav_header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.txt {
        font-size: 1rem;
        padding-left: 0;
    }

    #info_detail > .race_select_area > .kaisai_select > .kaisai_line { display: block; }

    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date {
        text-align: left;
        border-right: none;
        border-bottom: 2px solid #dfdfd3;
    }

    #info_detail > .race_select_area > .kaisai_select > .kaisai_line > .date > span.day { display: inline; }

    .race_header .date_line > .inner > .cell { font-size: 1.1rem; }

    .race_header .race_num_line > .number + .wrapper { margin-left: 5px; }
    .race_header .race_num_line > .wrapper > .cell.time {
        font-size: 1rem;
        margin: 0 3px 0 0;
    }
    .race_header .race_num_line > .wrapper > .cell.time strong { font-size: 1.2rem; }

    .race_header .race_num_line > .wrapper > .cell.baba { margin: 3px 0; }

    #info_detail .btn.race_select { top: 10px; right: 5px; }

    .race_header div.type > div.cell { font-size: 1.1rem; }
    
    .race_header .course { font-size: 1.3rem;}

}

.dataNotFoundComment,
.hasData {
  margin-top: 15px;
  margin-left: 10px;
}
