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

    トップ

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

html { font-size: 62.5%; }
body { font-size: 13px; font-size: 1.3rem; }

body {
    -webkit-text-size-adjust: 100%;
    font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
    
    position: relative;
}

body.menu-on { overflow: hidden; }

html,body {
    min-height: 100%;
    height: 100%;
    height: 100vh;
}

img { max-width: 100%; height: auto; border: 0; vertical-align: top; }

body * { box-sizing: border-box; }
.android body * { max-height: 999999px; }

strong { font-weight: bold; }



#wrapper {
    position: relative;
    /*padding-bottom: 150px;*/
    padding-bottom: 206px;
}

/* - navigation skip
---------------------------------------------------------------------- */
#navigation_skip {
    background-color: #222;
    color: #fff;
    display: block;
    position: relative;
}

#navigation_skip > p {
    position: absolute;
    left: 0;
    top: -10px;
    height: 1px;
    overflow:hidden;
}

#navigation_skip > p.focused {
	position: static;
	height: auto;
}

#navigation_skip > p > a {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 1.3rem;
    padding: 15px 0;
}

#navigation_skip > p > a i {
    margin-right: 0.4em;
}

#skip-target {
	position: relative;
	left: -9999px;
	height: 0px;
}

/* - JRAアプリ リンク
---------------------------------------------------------------------- */
#jra-app-link {
    background-color: #007564;
    color: #fff;
    height: 50px;
    border-top: 1px solid #005C4E;
    border-bottom: 1px solid #005C4E;
}

#jra-app-link.off { display: none; }

#jra-app-link > a {
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

#jra-app-link > a > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

#jra-app-link > a > div > .icon img {
    max-height: 34px;
    vertical-align: top;
    filter: drop-shadow(1px 4px 4px rgba(0,0,0,0.2));
}

#jra-app-link > a > div > .txt {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);

    display: flex;
    align-items: center;
    gap: 10px;
}

#jra-app-link > a > div > .txt span.download {
    font-size: 1.1rem;
    display: flex;
    align-items: center;

    background-color: #f5f5f5;
    color: #444;
    border: 2px solid #444;
    height: 26px;
    padding: 4px 10px;
    border-radius: 22px;
    line-height: 1;

    position: relative;
    top: -1px;
}

#jra-app-link > a > div > .txt span.download i {
    margin-right: 0.3em;
    font-size: 1rem;
}

/* - 即PATリンク
---------------------------------------------------------------------- */
#sokupat-welcome-link > a {
    display: block;
    text-align: center;
    padding: 5px 0;
}

#sokupat-welcome-link > a img { max-height: 44px; }



/* - header
---------------------------------------------------------------------- */
#header { box-sizing: border-box; height: 54px; }

#header {
    position: sticky;
    top: 0;
    z-index: 999;
}

#header > .content {
    width: 100%;
    /*position: fixed;
    z-index: 999;*/
    background-color: #268300;
    padding: 10px;
    height: 54px;
    
    /*border-top: 1px solid #005C4E;*/
}

#header > .content > .inner { display: table; width: 100%; }
#header > .content > .inner > .cell { display: table-cell; vertical-align: middle; }

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

#header > .content > .inner > .cell.link {  }

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

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

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

#header > .content > .inner > .cell.link .submenu > .cell .header_btn > a {
    display: block;
    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;
}

#header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap { display: table; }

#header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span {
    display: table-cell;
    vertical-align: middle;
}

#header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span.icon {  }

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

#header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a > .wrap > span.icon i {
    color: #2d6fb7;
    font-size: 1.6rem;
}

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

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

#header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a > .wrap > span.txt { line-height: 1.2; }
#header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a .wrap > span.txt > span.cap {
    display: block;
    letter-spacing: -0.1em;
    line-height: 1.2;
}

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


/* --- ハンバーガーメニューボタン --- */
#header > .content > .inner > .cell.menu {
    width: 80px;
    height: 100%;
    padding-left: 5px;
}

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

#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%;
    max-height: 32px;
    
    padding-left: 4px;
}

#header > .content > .inner > .cell.menu > .btn > a > .inner { display: table; }
#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell { display: table-cell; vertical-align: middle; }

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

#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.txt {
    font-size: 1.2rem;
    line-height: 1.2;
}

#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.txt > .cap.menu { display: inline; }
#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.txt > .cap.menu { display: none; }
#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.txt > .cap.close { display: none; }
#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.txt > .cap.close { display: inline; }

#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon {
    box-sizing: border-box;
    position: relative;
    display: block;
    margin: 0 auto;
    height: 10px;
    width: 12px;
}

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

#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon > span:nth-of-type(1) { top: 0; }
#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon > span:nth-of-type(2) { top: 4px; transition: all 0.1s ease-in-out; }
#header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon > span.icon > span:nth-of-type(3) { bottom: 0; }

#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.icon > span.icon > span:nth-of-type(1) {
	transform: translate(-5px, 4px) rotate(-45deg);
    width: 18px;
}

#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.icon > span.icon > span:nth-of-type(2) { opacity: 0; }

#header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.icon > span.icon > span:nth-of-type(3) {
	transform: translate(-5px, -4px) rotate(45deg);
    width: 18px;
}


/* - クイックメニュー
---------------------------------------------------------------------- */
#quick_menu { position: relative; }

#quick_menu > ul {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 2px;
    width: 100%;
    background-color: #eee;
}

#quick_menu > ul:after { content: ''; display: block; clear: both; }

#quick_menu > ul > li { flex-grow: 1; padding: 3px; }
#quick_menu > ul > li:first-child { flex-grow: 0.9; }
#quick_menu > ul > li:nth-child(2),
#quick_menu > ul > li:nth-child(3){ flex-grow: 1.5; }

#quick_menu > ul > li#qm_meikan { position: relative; }

#quick_menu > ul > li > a {
    text-decoration: none;
    display: block;
    padding: 8px 2px;
    text-align: center;
    border-radius: 3px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 1px solid #000;
    background-color: #333;
    color: #f5f5f5;
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.3);
    position: relative;
    border-radius: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

#quick_menu > ul > li > a > i {
    font-size: 1rem;
    position: absolute;
    right: 1px;
    bottom: -3px;
    color: #787878;
    display: block;
    transform: rotate(45deg);
}

/* --- 騎手・調教師サブメニュー --- */
#qm_submenu {
    position: absolute;
    z-index: 200;
    width: 100%;
    display: none;
    top: 36px;
    left: 5px;
    min-width: 320px;
}

#qm_submenu.on {
    display: block;
    animation: obj_fade_in 0.3s ease-in-out, obj_scale_in 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

#qm_submenu > .content {
    background-color: #fff;
    padding: 10px 5px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    position: relative;
    padding: 10px;
    outline: none;
}

#qm_submenu > .content > .title {
    display: table;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

#qm_submenu > .content > .title > .cell {
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px 5px 0;
}

#qm_submenu > .content > .title > .cell.main {
    line-height: 1.4;
    font-weight: bold;
    font-size: 1.4rem;
}

#qm_submenu > .content > .title > .cell.opt {
    text-align: right;
    padding: 0 0 5px 5px;
}

#qm_submenu > .content > .title > .cell.opt > .btn { font-size: 0; }

#qm_submenu > .content > .title > .cell.opt > .btn > a {
    display: inline-block;
    font-size: 1.3rem;
}

#qm_submenu > .content > .title > .cell.opt > .btn > a.btn-def {
    display: inline-block;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	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);
	color: #555;
	background-color: #fff;
	vertical-align: middle;
    box-sizing: border-box;
    position: relative;
    top: -1px;
    font-size: 1rem;
    padding: 3px 6px;
    line-height: 1.4;
}

#qm_submenu > .content > .title > .cell.opt > .btn > a i {
    font-size: 1.2rem;
    margin-right: 0.3em;
    vertical-align: middle;
}

#qm_submenu > .content > ul { display: flex; margin-top: 5px; }

#qm_submenu > .content > ul > li { width: 33.33%; }

#qm_submenu > .content > ul > li > a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 10px 0;
}

#qm_submenu > .content > ul > li > a > span { display: block; }

#qm_submenu > .content > ul > li > a > span.icon img { vertical-align: top; max-width: 40px; }

#qm_submenu > .content > ul > li > a > span.txt {
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #444;
}


#contents {
    max-width: 768px;
    margin: 0 auto;
}


/* - slick
---------------------------------------------------------------------- */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus { outline: none; }

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide { float: right; }

.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden { display: none; }


/* - メインビジュアル
---------------------------------------------------------------------- */
#main_visual {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
    display: block;
}

#main_visual > .inner { position: relative; z-index: 5; }

#main_visual img { width: 100%; max-width: 100%; vertical-align: top; aspect-ratio: 540 / 304; }

#main_visual .slider { opacity: 0; transition: 2.5s; }
#main_visual .slider.slick-initialized { opacity: 1; }

#main_slide { width: 100%; }

.slick-list { overflow: visible; }

.slick-slide a { display: block; position: relative; }

.slick-slide a > img {
    opacity: 0.2;
    transition: all 0.5s ease-in-out;
    transition-delay: 0.1s;
    margin: 0 auto;
}

.slick-slide.slick-current a > img,
.slick-slide.slick-active a > img { opacity: 1; }

.slick-slide a > .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(255,255,255,0.3);
    opacity: 0;
    display: block;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    border: 2px dotted #555;
    box-sizing: border-box;
}

.slick-slide.slick-current a:focus > .cover { opacity: 1; }

.slick-prev { z-index: 125; }
.slick-dots {  }
.slick-dots li button { box-sizing: border-box; }


#main_visual .btn_auto {  }

#main_visual .btn_auto > a {
    display: block;
    background-color: rgba(51, 51, 51, 0.9);
    border: 1px solid #222;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}

#main_visual .btn_auto > a > span.play { display: none; }
#main_visual .btn_auto > a > span.stop { display: inline; }
#main_visual .btn_auto.on > a > span.play { display: inline; }
#main_visual .btn_auto.on > a > span.stop { display: none; }


/* --- 矢印・一時停止・カウンター --- */
#slider_control { padding: 8px 5px; }
#slider_control.off { display: none; }

#slider_control > .content { display: table; margin: 0 auto; }
#slider_control > .content > .cell { display: table-cell; vertical-align: middle; }
#slider_control > .content > .cell + .cell {  }

#slider_control > .content > .cell.counter { padding-right: 10px; }

#slider_control > .content > .cell.counter > .count {
    border-radius: 2px;
    color: #fff;
    padding: 2px 8px;
    background-color: #333;
}

#slider_control > .content > .cell.counter > .count > span {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.3;
    color: #eee;
}

#slider_control > .content > .cell.counter > .count > span.cap { margin: 0 0.3em; font-weight: normal; }

#slider_control.off > .content > .cell.counter { display: none; }

/* --- 自動再生ボタン --- */
#slider_control > .content > .cell.auto {  }
#slider_control.off > .content > .cell.auto { display: none; }

#slider_control > .content > .cell.auto .btn > a {
    display: block;
    background-color: #333;
    color: #fff;
    border-radius: 2px;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    padding: 5px 10px;
    line-height: 1.3;
    min-width: 30px;
    text-align: center;
}

#slider_control > .content > .cell.auto .btn.on > a { background-color: #e7e7e7; color: #444; }

#slider_control > .content > .cell.auto .btn > a span i {
    font-size: 1rem;
    line-height: 1;
    display: block;
}

#slider_control > .content > .cell.auto .btn > a span.play i { position: relative; left: 1px; }

#slider_control > .content > .cell.auto .btn > a span.play { display: none; }
#slider_control > .content > .cell.auto .btn.on > a span.play { display: block; }
#slider_control > .content > .cell.auto .btn > a span.stop { display: block; }
#slider_control > .content > .cell.auto .btn.on > a span.stop { display: none; }


/* --- 左右矢印（改） --- */
#slider_control > .content > .cell.arrow {  }
#slider_control.off > .content > .cell.arrow { display: none; }

#slider_control > .content > .cell.arrow.prev { padding-right: 20px; }
#slider_control > .content > .cell.arrow.next { padding-left: 20px; }

#slider_control > .content > .cell.arrow > .arrow {
    width: 24px;
    height: 24px;
    font-size: 1.3rem;
}

#slider_control > .content > .cell.arrow > .arrow > a {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    background-color: rgba(0,0,0,0.5);
    border-radius: 2px;
}

#slider_control > .content > .cell.arrow > .arrow > a img { position: absolute; }

#slider_control > .content > .cell.arrow > .arrow > a > span {
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

#slider_control > .content > .cell.arrow > .arrow > a > span i { display: block; line-height: 1; }


/* - 緊急のお知らせ（CMS）エリア
---------------------------------------------------------------------- */
#emergency_cms {
    margin-top: 15px;
    padding: 0 10px;
    display: none;
    box-sizing: border-box;
}

#emergency_cms.on { display: block; animation: obj_fade_in 0.2s ease-in-out }

#emergency_cms strong { font-weight: bold; }

#emergency_cms > .title {
    margin: 0 auto;
    padding: 5px;
    color: #FFF9C4;
    padding: 8px;
    background-color: #B71C1C;
}

#emergency_cms > .title h2 {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    color: #fff;
}

#emergency_cms > .title i { margin-right: 0.3em; color: #FFF9C4; }

#emergency_cms > .content {
    margin: 0 auto;
    padding: 10px;
    border: 4px solid #B71C1C;
    border-top: none;
    line-height: 1.5;
}

#emergency_cms > .content p.title {
    font-size: 2rem;
    border-bottom: 1px dashed #999;
    padding-bottom: 0.3em;
    color:  #1A237E;
}

#emergency_cms > .content p.title i { margin-right: 0.3em; }

#emergency_cms > .content > ul { }
#emergency_cms > .content > ul > li { font-size: 0; }
#emergency_cms > .content > ul > li + li { margin-top: 10px; }

#emergency_cms > .content > ul > li > a {
    text-decoration: none;
    display: inline-block;
    font-size: 1.5rem;
}

#emergency_cms > .content > ul > li > a span.inner { display: table; }

#emergency_cms > .content > ul > li > a span.inner > span { display: table-cell; vertical-align: top; }
#emergency_cms > .content > ul > li > a span.inner > span.icon { padding-right: 0.4em; }
#emergency_cms > .content > ul > li > a span.inner > span.icon i { color: #268300; }

#emergency_cms > .content > p { line-height: 1.6; }
#emergency_cms > .content strong.red { color: #db0000; }

#emergency_cms > .content a i {
    text-decoration: none;
    margin-right: 0.3em;
    color: #268300;
}


/* - 緊急のお知らせエリア（スマホ版調整）
---------------------------------------------------------------------- */
#emergency { margin-top: 0; padding: 15px 10px; }

#emergency > .title {
    width: 100%;
    font-size: 1.5rem;
    padding: 10px;
    line-height: 1.2;
    text-align: left;
}

#emergency > .content { width: 100%; }



/* - 今週の注目レースエリア
---------------------------------------------------------------------- */
#thisweek { padding: 15px; background-color: #eee; }

#kaisai_area {
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.1);
    background-color: rgba(255,255,255,0.95);
}

#kaisai_area > .head { background-color: #333; color: #fff; }

#kaisai_area > .head > h2 {
    font-weight: bold;
    line-height: 1.4;
    font-size: 1.5rem;
}

#kaisai_area > .head > h2 a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 6px 10px;
}

#kaisai_area > .head > h2 a i { margin-right: 0.5em; }

#kaisai_area img { width: auto; }

#kaisai_area > .kaisai_block { width: 100%; box-sizing: border-box; }
#kaisai_area > .kaisai_block * { box-sizing: border-box; }

#kaisai_area > .kaisai_block .unit {
    display: table;
    width: 100%;
    border: none;
    margin-top: 0;
}

#kaisai_area > .kaisai_block .unit + .unit { border-top: 1px dotted #ccc; }

#kaisai_area > .kaisai_block .unit > div {
    display: table-cell;
    vertical-align: middle;
    padding: 4px 0 3px 0;
}

#kaisai_area > .kaisai_block .unit > div.head {
    padding: 5px;
    width: 40px;
    text-align: center;
}

#kaisai_area > .kaisai_block .unit.summer > div.head { padding: 3px 0; }

#kaisai_area > .kaisai_block .unit > div.head > span {
    display: inline-block;
    color: #fff;
    border-radius: 2px;
    font-weight: bold;
    font-size: 1.1rem;
    background-color: #555;
    padding: 4px;
}

#kaisai_area > .kaisai_block .unit.summer > div.head img {
    max-width: 24px;
    vertical-align: top;
}

#kaisai_area > .kaisai_block .unit > div.main {  }

#kaisai_area > .kaisai_block .unit > div.main > .line { display: table; width: 100%; height: 24px; }

#kaisai_area > .kaisai_block .unit > div.main > .line > div {
    display: table-cell;
    vertical-align: middle;
    padding: 2px 0;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.date {
    color: #333;
    text-align: right;
    font-size: 1.1rem;
    font-weight: bold;
    width: 90px;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.date span.date {
    font-size: 1rem;
    margin-left: 2px;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.date span.day {
    font-size: 1rem;
    margin-left: 4px;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
    color: #333;
    position: relative;
    top: -1px;
    background-color: #e3e3e3;
    padding: 3px 4px 2px 4px;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.date span.day.sat { background-color: #b3e5fc; }
#kaisai_area > .kaisai_block .unit > div.main > .line > div.date span.day.sun { background-color: #ffccbc; }

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race { padding-left: 6px; }

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race p {
    line-height: 1.2;
    font-size: 1.4rem;
    font-weight: bold;
    display: block;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race a { text-decoration: none; }

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race a:focus {
    text-decoration: underline;
    color: #098825;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race p span.grade {
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
}

#kaisai_area > .kaisai_block .unit > div.main > .line > div.race p span.grade img {
    position: relative;
    top: -1px;
    vertical-align: top;
    display: block;
    max-width: 24px;
}

#kaisai_area > .kaisai_block .unit.summer > div.main a {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.2;
}


/* - ログインエリア
---------------------------------------------------------------------- */
#dento_area { padding: 0 15px 15px 15px; background-color: #eee; }

#login_area {
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    background-color: rgba(255,255,255,0.9);
    text-align: center;
    padding: 10px;
}

#login_area > .title_line {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 100%;
    margin-bottom: 8px;
    color: #333;
}

#login_area > .title_line:before,
#login_area > .title_line:after {
    content: "";
    display: inline;
	flex-grow: 1;
	height: 1px;
	background: #ccc;
	display: block;
}

#login_area > .title_line:before { margin-right: 1em; }
#login_area > .title_line:after { margin-left: 1em; }

#login_area > ul { display: flex; }

#login_area > ul > li { width: 33.333%; }
#login_area > ul > li + li { margin-left: 5px; margin-right: 0; }

#login_area > ul > li > a {
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 66px;
    padding: 0;
}

#login_area > ul > li.pat > a {
    background-color: #2d6fb7;
    border: 1px solid #35629e;
}

#login_area > ul > li.nar > a {
    background-color: #a2593f;
    border: 1px solid #884a34;
}

#login_area > ul > li.direct > a {
    background-color: #0a824c;
    border: 1px solid #097343;
}

#login_area > ul > li > a img { max-width: 100px; }

#login_area .help { margin-top: 10px; }

#login_area .help > ul { display: flex; justify-content: center; align-items: center; }
#login_area .help > ul > li { flex-grow: 1; }
#login_area .help > ul > li.history { /*width: 116px;*/ padding-left: 5px; }

#login_area .help > ul > li > a {
    text-decoration: none;
    
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    line-height: 1.4;
    color: #555;
    background-color: #fff;
    vertical-align: middle;
    box-sizing: border-box;
    font-size: 1.2rem;
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;

    background-color: #2d6fb7;
    color: #fff;

    padding: 0 5px;
    border-radius: 5px;
    min-height: 40px;
}

#login_area .help > ul > li.entry > a {
    background-color: #fff;
    border: 2px solid #2d6fb7;
}

#login_area .help > ul > li > a i { margin-right: 0.3em; color: #fff; }



/* - 指定席ネット予約
---------------------------------------------------------------------- */
#seat_reserve { background-color: #eee; padding: 0 15px 15px 15px; }

#seat_reserve > .content {
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    padding: 15px;
}

#seat_reserve .btn-def {
    display: inline-block;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid #d3d3d3;
	cursor: pointer;
	
    transition: all 140ms ease-in-out;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
	
    line-height: 1.4;
    color: #555;
	background-color: #fff;
	vertical-align: middle;
    box-sizing: border-box;
    
    position: relative;
    top: -1px;
    
    padding: 10px;
    font-size: 1.4rem;
}

#seat_reserve .btn-def.btn-block { display: block; }/* --- blockボタン --- */
#seat_reserve .btn-def.btn-narrow { padding: 12px 10px; }

#seat_reserve .btn-def i { color: #268300; margin-right: 0.5em; }

#seat_reserve .btn-def.gray {
	background-color: #555;
	border: 1px solid #333;
	color: #fff;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.2);
}

#seat_reserve .btn-def.gray i { color: #fff; margin-right: 0.5em; }

#seat_reserve .btn_member_login > a,
#seat_reserve .btn_member_entry > a {
    font-size: 2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    
    border-radius: 5px;
    box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
    
    border: 3px solid #fff;
    background: linear-gradient(170deg, #268300, #1d4f0d);
    transition: all 0.3s ease-in-out;
    
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    
    text-align: center;
    padding: 15px 10px;
}

#seat_reserve .btn_member_login > a > div > span.copy { display: block; font-size: 1.6rem; }

#seat_reserve .btn_member_login > a > div > span.login {
    margin-top: 5px;
    display: inline-block;
    color: #444;
    border-radius: 1em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border: 1px solid #1d4f0d;
    background-color: rgba(255,255,255,0.8);
    font-size: 1.5rem;
    padding: 4px 20px;
    margin-top: 5px;
}

#seat_reserve .btn_member_login > a > div > span.login i { margin-right: 0.5em; }

#seat_reserve .btn_member_entry > a {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}

#seat_reserve .btn_member_entry > a .cap { font-size: 1.4rem; }

#seat_reserve .btn_member_entry > a .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}

#seat_reserve .btn_member_entry > a .inner .cell img {
    max-width: 30px;
    vertical-align: top;
}


/* - UMACAスマート
---------------------------------------------------------------------- */
#umaca_smart { background-color: #eee; padding: 0 15px 15px 15px; }

#umaca_smart > .content {
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    padding: 15px;
}

#umaca_smart .btn_login > a {
    text-decoration: none;
    display: block;
    padding: 20px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #e8e8e8 100%);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    position: relative;
    transition: all 0.3s ease-in-out;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
}

#umaca_smart .btn_login > a:active { box-shadow: none; }

#umaca_smart .btn_login > a::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 3px solid #19a357;
    border-radius: 4px;
    box-sizing: border-box;
    opacity: 0.5;
}

#umaca_smart .btn_login > a .opt {
    color: #555;
    margin-top: 10px;
    background-color: #DCEDC8;
    border-radius: 2em;
    padding: 6px;
    font-size: 1.4rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    border: 1px solid #ccc;
    background: linear-gradient(-15deg, #268300, #1d4f0d);
    color: #fff;
    border: 1px solid #fff;
    max-width: 220px;
    max-width: 240px;
    margin: 10px auto 0 auto;
}

#umaca_smart .btn_login > a .opt i { margin-right: 0.4em; }



/* - JRAニュース
---------------------------------------------------------------------- */
#jra_news { margin-top: 30px; }

#jra_news > .title_line {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    min-width: 100%;
    padding: 0 15px;
}

#jra_news > .title_line:before,
#jra_news > .title_line:after {
    content: "";
    display: inline;
	flex-grow: 1;
	height: 1px;
	background: #ccc;
	display: block;
}

#jra_news > .title_line:before { margin-right: 1em; }
#jra_news > .title_line:after { margin-left: 1em; }

#jra_news > .content { padding: 20px; }

#jra_news > .content > ul > li { padding: 0 0 10px 0; }
#jra_news > .content > ul > li + li { padding: 10px 0; border-top: 1px dotted #ccc; }

#jra_news .news_line > .date { font-size: 1.2rem; }
#jra_news .news_line > .icon { display: none; }

#jra_news .news_line > .txt {
    line-height: 1.5;
	word-wrap:break-word;
	word-break:break-all;
    font-size: 0;
    margin-top: 5px;
}

#jra_news .news_line > .txt > a {
    display: inline-block;
    font-size: 1.2rem;
    vertical-align: middle;
    text-decoration: none;
    color: #06a;
}

#jra_news .news_line > .txt > a > .inner { display: block; }

#jra_news .news_line > .txt > a > .inner > div {
    display: table-cell;
    line-height: 1.5;
    font-size: 1.4rem;
}

#jra_news .news_line > .txt > a > .inner > div.icon { width: 12px; color: #268300; }

#jra_news .news_line > .txt > a > .inner > div.txt i { color: #268300; }
#jra_news .news_line > .txt > a > .inner > div.txt i.fa.fa-external-link-square { margin-left: 5px; }

#jra_news .news_line > .txt > .mov_btn {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    line-height: 1.5;
}

#jra_news .news_line > .txt > a + .mov_btn { margin-left: 10px; }

#jra_news .news_line > .txt > .mov_btn > a {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    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;
    color: #555;
    background-color: #fff;
    vertical-align: middle;
    font-size: 1rem;
    border-radius: 3px;
    padding: 3px 6px;
}

#jra_news .news_line > .txt > .mov_btn > a i { margin-right: 4px; }

#jra_news .news_all { padding: 0 15px; }

#jra_news .btn-def {
    display: inline-block;
	
    text-align: center;
	font-weight: bold;
	text-decoration: none;
	border-radius: 4px;
	border: 1px solid #d3d3d3;
	cursor: pointer;
	
    transition: all 140ms ease-in-out;
	
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
	
    line-height: 1.4;
    padding: 6px 30px;
	
	color: #555;
	background-color: #fff;
	vertical-align: middle;
    box-sizing: border-box;
    
    position: relative;
    top: -1px;
    
    padding: 4px 10px;
    font-size: 1.3rem;
}

#jra_news .btn-def.btn-block { display: block; }/* --- blockボタン --- */
#jra_news .btn-def.btn-narrow { padding: 8px 10px; }

#jra_news .btn-def i { color: #268300; margin-right: 0.5em; }

#jra_news .btn-def.gray {
	background-color: #555;
	border: 1px solid #333;
	color: #fff;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.2);
}

#jra_news .btn-def.gray i { color: #fff; margin-right: 0.5em; }



/* - ピックアップ
---------------------------------------------------------------------- */
#pickup { margin-top: 30px; max-width: 100%; }

#pickup > .title { position: relative; }

#pickup .title_line {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: bold;
    min-width: 100%;
    padding: 0 15px;
}

#pickup .title_line:before,
#pickup .title_line:after {
    content: "";
    display: inline;
	flex-grow: 1;
	height: 1px;
	background: #ccc;
	display: block;
}

#pickup .title_line:before { margin-right: 1em; }
#pickup .title_line:after { margin-left: 1em; }


#pickup > .title .slide_control {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

#pickup > .title .slide_control.off { display: none; }

#pickup > .title .slide_control .count {
    border-radius: 2px;
    color: #fff;
    padding: 0 8px;
    border-radius: 4px;
    background-color: #333;
    display: flex;
    align-items: center;
    height: 20px;
}

#pickup > .title .slide_control .count > span {
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
    color: #eee;
}

#pickup > .title .slide_control .count > span.cap {
    margin: 0 0.3em;
    font-weight: normal;
}

#pickup > .title .slide_control .auto {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 3px;
    border-radius: 4px;
}

#pickup > .title .slide_control .auto .btn > a {
    display: block;
    background-color: #333;
    color: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.3;
    min-width: 22px;
    text-align: center;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pickup > .title .slide_control .auto .btn.on > a { background-color: #e7e7e7; color: #444; }

#pickup > .title .slide_control .auto .btn > a span i {
    font-size: 1rem;
    line-height: 1;
    display: block;
}

#pickup > .title .slide_control .auto .btn > a span.play i { position: relative; left: 1px; }
#pickup > .title .slide_control .auto .btn > a span.play { display: none; }
#pickup > .title .slide_control .auto .btn.on > a span.play { display: block; }
#pickup > .title .slide_control .auto .btn > a span.stop { display: block; }
#pickup > .title .slide_control .auto .btn.on > a span.stop { display: none; }

#pickup > .content { margin-top: 15px; }

#pickup_slide {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#pickup_slide img { vertical-align: top; }

#pickup_slide .slick-slide { padding: 0 10px; }
#pickup_slide .slick-slide img { margin: 0 auto; }

#pickup_slide a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

#pickup_slide a .cap {
    max-width: 280px;
    margin: 10px auto 0;
    font-size: 1.3rem;
    line-height: 1.3;
}

#pickup_slide .slick-arrow {
    position: absolute;
    top: calc(230px/2);
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 2rem;
    text-align: center;
    border-radius: 50%;
    color: #333;
    border:1px solid #555;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#pickup_slide .slick-arrow img { position: absolute; left: 0; top: 0; }
#pickup_slide .slick-arrow.slick-prev { left: 5px; }
#pickup_slide .slick-arrow.slick-prev i { position: relative; left: -1px; }
#pickup_slide .slick-arrow.slick-next { right: 5px; }
#pickup_slide .slick-arrow.slick-next i { position: relative; right: -1px; }





/* - JRAからのお知らせ
---------------------------------------------------------------------- */
#jra_info { padding: 0 15px; margin-top: 30px; }

#jra_info > .title {
    text-align: center;
    background-color: #268300;
    color: #fff;
    padding: 8px 0;
    font-size: 1.5rem;
    font-weight: bold;
}

#jra_info > .content {
    padding: 15px;
    border: 1px solid #ddd;
    margin-top: 0;
    border-top: none;
}

#jra_info > .content > ul {  }
#jra_info > .content > ul > li { font-size: 0; }
#jra_info > .content > ul > li + li { margin-top: 8px; }

#jra_info > .content > ul > li > .link_unit { display: inline-block; font-size: 1.3rem; }
#jra_info > .content > ul > li > .link_unit + .link_unit { margin-left: 20px; }

#jra_info > .content > ul > li > .link_unit > a {
    display: block;
    text-decoration: none;
    color: #444;
}
#jra_info > .content > ul > li > .link_unit > a > .inner { display: table; }

#jra_info > .content > ul > li > .link_unit > a > .inner > span {
    display: table-cell;
    vertical-align: top;
    line-height: 1.4;
}

#jra_info > .content > ul > li > .link_unit > a > .inner > span.icon {
    width: 15px;
    padding-right: 4px;
    text-align: center;
}

#jra_info > .content > ul > li > .link_unit > a:focus > .inner > span.txt {
    text-decoration: underline;
    color: #098825;
}

#jra_info > .content > ul > li > .link_unit > a > .inner > span.txt i { margin-left: 0.2em; }

#jra_info > .content > ul > li > .link_unit > a i { color: #268300; }


/* - JRAのギャンブル等依存症対策 - */
#jra_info .link_izon { margin-top: 15px; }

#jra_info .link_izon > a {
    display: block;
    background-color: #097937;
    border: 1px solid #07692f;
    text-decoration: none;
    color: #fff;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 1px 4px 2px rgba(0,0,0,0.1);
}

#jra_info .link_izon > a > .inner { display: table; }

#jra_info .link_izon > a > .inner > span { display: table-cell; vertical-align: middle; }
#jra_info .link_izon > a > .inner > span.icon { }
#jra_info .link_izon > a > .inner > span.icon img { max-width: 60px; vertical-align: top; }

#jra_info .link_izon > a > .inner > span.txt {
    font-size: 1.6rem;
    font-weight: bold;
    padding-left: 5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
    line-height: 1.3;
}


/* - SNS
---------------------------------------------------------------------- */
#sns { margin-top: 20px; background-color: #eee; padding: 15px; }

#sns > .content { background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }

#sns > .content > h2 {
    padding: 5px 10px;
    line-height: 1.4;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #555;
    color: #fff;
}

#sns ul { display: table; width: 100%; }

#sns ul > li {
    display: table-cell;
    vertical-align: middle;
    width: 33.333%;
}

#sns ul.div4,
#sns ul.div5 { display: flex; align-items:flex-start; }

#sns ul.div4 > li { display: block; width: 25%; }
#sns ul.div5 > li { display: block; width: 20%; }


#sns ul > li + li { border-left: 1px dotted #ccc; }

#sns ul > li a {
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 5px 5px 10px 5px;
}

#sns ul > li a img { max-width: 30px; vertical-align: top; }
#sns ul.div4 > li a img,
#sns ul.div5 > li a img { max-width: 48px; vertical-align: top; }

#sns ul > li a > .grid {  }

#sns ul > li a > .grid > div.icon { padding: 15px; }
#sns ul.div4 > li a > .grid > div.icon,
#sns ul.div5 > li a > .grid > div.icon {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
}

#sns ul > li a > .grid > p {
    color: #333;
    /*font-size: 1.1rem;*/
    font-size: 1rem;
    line-height: 1.3;
    font-weight: bold;
}

#sns ul.div4 > li a > .grid > p,
#sns ul.div5 > li a > .grid > p {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sns ul.div5 > li#twitter a > .grid > p > span > span {
    display: block;
}

/* - レースライブボタン
---------------------------------------------------------------------- */
.live_btn {
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #e7e7e7;
}

.live_btn > a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 1.4rem;
    line-height: 1.3;

    background-color: #E00025;
    border: 1px solid #a2021d;
    color: #fff;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.live_btn > a i { margin-right: 0.5em; }


/* - ロンジンカウントダウンクロック
---------------------------------------------------------------------- */
#jc_longines_area a { text-decoration: none; }


/* - フッター
---------------------------------------------------------------------- */
#footer_sp {
    background-color: #1d4f0d;
    width: 100%;
    position: absolute;
	bottom: 0;
    height: auto;
    min-height: 206px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer_sp .content { padding: 15px 0; }

#footer_sp .content > .grid > .cell { text-align: center; }
#footer_sp .content > .grid > .cell + .cell { margin-top: 20px; }

#footer_sp .content p.copyright {
    color: #fff;
    font-size: 1rem;
    text-align: center;
    margin-top: 15px;
    font-family: "Droid Sans", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', Meiryo,'ＭＳ Ｐゴシック',sans-serif;/* --- android 6.0対策 --- */
}

#footer_sp .content ul { font-size: 0; }

#footer_sp .content ul > li {
    font-size: 1.1rem;
    display: inline-block;
    border-left: 1px solid #999;
    padding: 0 15px;
}

#footer_sp .content ul > li:last-child { border-right: 1px solid #999; }

#footer_sp .content ul > li > a { display: block; text-decoration: none; color: #fff; }
#footer_sp .content ul > li > a:focus { text-decoration: underline; }
#footer_sp .content ul > li > a i { margin-left: 0.3em; }

#footer_sp .content .grid > .cell:last-child ul > li:nth-child(3) { border-right: 1px solid #999; }

#footer_sp .content > .grid > .cell:first-child ul > li { display: block; padding: 0 10px; border: none; }
#footer_sp .content > .grid > .cell:first-child ul > li + li { margin-top: 10px; }
#footer_sp .content > .grid > .cell:first-child ul > li > a { display: inline-block; padding: 2px; }
#footer_sp .content > .grid > .cell:first-child ul > li > a::before { content: '・'; }

#footer_sp .content ul > li.pc,
#footer_sp .content ul > li.english {
    /*margin-top: 15px;*/
    border: none;
    padding: 0 10px;
}

#footer_sp .content ul > li.pc > a,
#footer_sp .content ul > li.english > a {
    display: inline-block;
    border: 1px solid #222;
    background-color: #133508;
    padding: 6px 10px;
}

#footer_sp .content ul > li.pc { display: inline-block; }


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

	汎用クラス

------------------------------------------------------------ */
.mt50 { margin-top: 50px !important; }
.mt40 { margin-top: 40px !important; }
.mt30 { margin-top: 30px !important; }
.mt25 { margin-top: 25px !important; }
.mt20 { margin-top: 20px !important; }
.mt15 { margin-top: 15px !important; }
.mt10 { margin-top: 10px !important; }
.mt5 { margin-top: 5px !important; }

strong { font-weight: bold; }
strong.red { color: #c02; }


/* ------------------------------------------------------------
	アニメーション
------------------------------------------------------------ */

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

@keyframes obj_scale_in {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

@keyframes obj_slide_in {
    from { transform: translateY(-5px); }
    to { transform: translateY(0); }
}

@keyframes obj_slide_down {
    from { max-height: 0; }
    to { max-height: 200vh; }
}


/* ------------------------------------------------------------
	640px以上
------------------------------------------------------------ */
@media only screen and (min-width: 640px) {
    
    /* --- フッター --- */
    #footer_sp .content ul > li.pc, #footer_sp .content ul > li.english { margin-top: 0; }
    
    /* - JRAのギャンブル等依存症対策 - */
    #jra_info .link_izon > a > .inner { margin: 0 auto; }
    

    #sns ul.div5 > li#twitter a > .grid > p > span > span {
        display: inline;
    }
}

/* ------------------------------------------------------------
	440pxから639pxまで
------------------------------------------------------------ */
@media only screen and (min-width: 440px) and (max-width: 639px){
    
    /* - JRAのギャンブル等依存症対策 - */
    #jra_info .link_izon > a > .inner { margin: 0 auto; }
    
}

/* ------------------------------------------------------------
	374px以下
------------------------------------------------------------ */
@media only screen and (max-width: 374px) {
    
    /*#wrapper { padding-bottom: 180px; }*/
    
    /* ----- 注目レース ----- */
    #kaisai_area > .kaisai_block .unit > div.main { padding-left: 5px; }
    #kaisai_area > .kaisai_block .unit > div.main > .line { display: block; height: auto; }
    #kaisai_area > .kaisai_block .unit > div.main > .line > div { display: block; }
    #kaisai_area > .kaisai_block .unit > div.main > .line > div.date { text-align: left; }
    #kaisai_area > .kaisai_block .unit > div.main > .line > div.race { padding-left: 0; }
    
    /* ----- ログイン ----- */
    #login_area .help > ul > li > a { font-size: 1.1rem; }
    
    /* - JRAのギャンブル等依存症対策 - */
    #jra_info .link_izon > a > .inner > span.txt { font-size: 1.5rem; }
}

/* ------------------------------------------------------------
	359px以下
------------------------------------------------------------ */
@media only screen and (max-width: 359px) {
    
    /* ----- ヘッダー ----- */
    #header > .content > .inner > .cell.link .submenu > .cell .header_btn > a { padding: 1px 4px; }
    #header > .content > .inner > .cell.link .submenu > .cell .header_btn > a > .wrap > span.icon i { font-size: 2.6rem; }
    #header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a > .wrap > span.icon i { font-size: 2rem; }
    #header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a > .wrap > span.txt { padding-left: 2px; }
    #header > .content > .inner > .cell.link .submenu > .cell.login .header_btn > a .wrap > span.txt > span.main { font-size: 1rem; }
    
    #header > .content > .inner > .cell.menu { width: 50px; }
    #header > .content > .inner > .cell.menu > .btn > a { padding-left: 0; }
    #header > .content > .inner > .cell.menu > .btn > a > .inner { display: block; }
    #header > .content > .inner > .cell.menu > .btn > a > .inner > .cell { display: block; }
    #header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.txt { padding-left: 0; margin-top: 2px; }
    #header > .content > .inner > .cell.menu > .btn > a > .inner > .cell.icon { margin-top:2px; }
    
    #header > .content > .inner > .cell.menu > .btn > a.active > .inner > .cell.txt { font-size: 1rem; line-height: 1.3; }
    
    #qm_submenu { min-width: 310px; }
    
    /* ----- ログインエリア ----- */
    #login_area > ul > li > a { /*min-height: 80px;*/ padding: 0; }
    #login_area > ul > li > a img { max-width: 100%; }
    #login_area .help > ul { display: block; }
    #login_area .help > ul > li.history { padding-left: 0; margin-top: 10px; }

    /* --- ピックアップ --- */
    #pickup_slide .slider .slick-slide { padding: 0 10px; }
    #pickup_slide .slick-arrow { top: calc(194px/2); }
    
    /* --- フッター --- */
    #footer_sp .content { padding: 15px 5px; }
    
    /* - JRAのギャンブル等依存症対策 - */
    #jra_info .link_izon > a > .inner > span.txt { font-size: 1.6rem; line-height: 1.3; }
    
}