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

	JRAレーシングビュアー コンポーネント

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

strong { font-weight: bold; }


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

ul.note_list > li > .inner { display:table; }
ul.note_list > li > .inner > span { display:table-cell; }
ul.note_list > li > .inner > span.cap { white-space:nowrap; }

ul.note_list.txt-sm { font-size: 1.2rem; }

ul.note_list > li {
    margin-top: 8px;
}

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

ul.note_list.strong {
    font-weight: bold;
    font-size: 1.4rem;
}


/* - 共通（あとで結合部分）
---------------------------- */

.btn-def a {
    display: block;
    max-width: 340px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
    background-color: #4a4a4a;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 20px 10px;
    border-radius: 8px;
    transition: 0.3s;
    position: relative;
}

.btn-def.green a {
    background-color: #1eac2f;
    color: #FFF;
}

.btn-def.touroku a {
    color: #FFF;
    background-color: #e43168;
    text-decoration: none;
}

.btn-def a:hover {
    background-color: #004818;
    background-color: #171717;
}

.btn-def.touroku a:hover {
    background-color: #c5164c;

}

.btn-def a:after {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    font-size: 2.2rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f105';
}

.btn-def.right a:after {
    right: 15px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f105';
}

.btn-def.left a:after {
    left: 15px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f104';
}


.btn-def input {
    display: block;
    max-width: 600px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 1.5;
    padding: 20px 25px;
    border-radius: 8px;
    transition: 0.3s;
    position: relative;
    border: none;
}


.btn-def.green input {
    background-color: #1eac2f;
    color: #FFF;
}

.btn-def input:hover {
    background-color: #171717;
    cursor: pointer;
}

.btn-def.green input:hover {
    background-color: #138020;
}


.caution {
    background-color: #efefef;
    border: 1px solid #DDD;
    padding: 14px;
}

.caution.strong {
    background-color: #fff1ea;
}

.caution.narrow {
    padding: 9px;
}

ul.kome > li {
    padding-left: 1em;
    text-indent: -1em;
}

ul.kome.txt-s > li { font-size: 1.3rem; }
ul.kome.txt-xs > li { font-size: 1.2rem; }
ul.kome.txt-xxs > li { font-size: 1.1rem; }

ul.kome > li + li {
    margin-top: 6px;
}


/* - 見出し
---------------------------- */

.section_title {
    font-size: 2rem;
    font-weight: bold;
    background-color: #474A53;
    color: #FFF;
    padding: 15px;
    margin-bottom: 30px;
}
.section_title i {
    font-size: 1.8rem;
    margin-right: 0.5em;
}

.mid-title {
    font-size: 1.6rem;
    font-weight: bold;
}

.mid-title.border {
    border-bottom: 1px dotted #CCC;
    padding-bottom: 5px;
}

.lev-4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.red {
    color: #c00;
}

/* - ドットリスト
---------------------------- */

.dot_list {
    text-indent: -1em;
    padding-left: 1em;
}

.dot_list > li {
    margin-top: 6px;
}

.dot_list > li:first-child {
    margin-top: 0;
}

.dot_list.txt-sm > li {
    font-size: 1.2rem;
}


/* - 注意書き　note
---------------------------- */

.note_block {
    padding: 10px 15px;
    background-color: #efefef;
    /*margin-top: 30px;*/
    font-weight: bold;
    font-size: 1.3rem;
}

.note_block i {
    font-size: 1.2rem;
}

.note_block.caution  {
    background-color: #FDE5E5;
    color: #c00;
}

.note_block p > .inner {
    display: table;
}

.note_block p > .inner > span {
    display: table-cell;
}

.note_block p > .inner > span.cap {
    white-space: nowrap;
    padding-right: 0.5em;
}

.note_block a {
    text-decoration: underline;
    color: #3872B8;
}

.no-touch .note_block a:hover {
    text-decoration: none;
}

/* - 強調
------------------------------------------------------------ */

strong.red{
    color: #c00;
}


.txt-l {
    font-size: 1.6rem;
    line-height: 1.8;
}


/* - リンクリスト
------------------------------------------------------------ */


.link_block {
    padding: 7px;
    background-color: #EFEFEF;
}


.link_block > ul:after {
    content: '';
    display: block;
    clear: both;
}

.link_block > ul > li {
    padding: 3px;
    float: left;
    width: 25%;
}

.link_block > ul.col1 > li { width: 100%; }
.link_block > ul.col2 > li { width: 50%; }
.link_block > ul.col3 > li ,
.link_block > ul.col5 > li ,
.link_block > ul.col6 > li { width: 33.33%; }
.link_block > ul.col4 > li { width: 25%; }

.link_block > ul > li a {
    display: block;
    cursor: pointer;
    background-color: #FFF;
    padding:10px 8px;
    font-size: 1.4rem;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    border: 1px solid #bbb;
    border-radius: 4px;
    font-weight: bold;
    color: #555;
    -webkit-transition:0.3s ease;
  	-moz-transition:0.3s ease;
  	transition:0.3s ease;
}

.no-touch .link_block > ul > li a:hover {
    color: #333;
	border-color: #aaa;
	background-color: #f7f7f7;
}

.link_block > ul > li i {
    margin-right: 0.4em;
    font-size: 1.1rem;
    color: #3B9320;
}

.link_block > ul > li > a .inner {
    display: table;
    margin: 0 auto;
}

.link_block > ul > li > a .inner > span {
    display: table-cell;
}

.link_block > ul > li > a .inner > span.icon {
    white-space: nowrap;
}


/* - モーダル
---------------------------- */
.inline-wrapper {
	position: relative;
	margin:10px auto;
	max-width: 840px;
	background-color:#FFF;
	padding: 15px;
}


.inline-wrapper .image,
.inline-wrapper .popup-modal-dismiss {
	text-align: center;
}

.inline-wrapper .content {
	width:100%;
}



/*表示のエフェクト*/
  .mfp-fade.mfp-bg {
	opacity: 0.001; /* Chrome opacity transition bug */
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
  }
  .mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
  }
  .mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
  }
  .mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
  }
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
  }
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
  }

/* - 基本テーブル
------------------------------------------------------------ */

table.normal {
    border-collapse: collapse;
}

table.normal.w-100 {
    width: 100%;
}

table.normal  .inner > div.main {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
}

table.normal thead tr th {
    padding: 8px 10px;
    font-size: 1.4rem;
    background-color: #474A53;
    border: 1px solid #CCC;
    color: #FFF;
    vertical-align: middle;
}

table.normal tbody tr th {
    padding: 8px 10px;
    background-color: #efefef;
    font-size: 1.4rem;
    border: 1px solid #CCC;
    vertical-align: middle;
}

table.normal tbody tr td {
    padding: 8px 10px;
    font-size: 1.4rem;
    border: 1px solid #CCC;
    vertical-align: middle;
}

table.normal .nw {
    white-space: nowrap;
}


/* --- caption simple --- */
caption.simple > .inner {
	text-align: left;
	display: table;
	width: 100%;
}

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

caption.simple > .inner > div.main {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	padding: 5px 0;
}
div.caution {
	background-color: #f3f3f3;
	padding: 15px;
	border: 1px dashed #ccc;
}

div.caution.narrow { padding: 10px; }/* --- 余白狭め --- */

div.caution > .block_sub_header > h2,
div.caution > .block_sub_header > h3,
div.caution > .block_sub_header > h4,
div.caution > .block_sub_header > h5,
div.caution > .block_sub_header > h6 { padding-top: 0; }


div.caution > .block_header_line { padding-top: 0; }
div.caution.caution-sm {
    font-size: 1.1rem;
}

/* - striped（偶数番目の行の背景色が#f7f7f7）
------------------------------------------------------------ */
table.normal.striped tbody > tr > td{
    padding: 15px 10px;
}
table.normal.striped tbody > tr:nth-child(even) > td {background-color: #f7f7f7; }
table.normal.simple.striped tbody > tr:nth-child(even) > th { background-color: #f7f7f7; }

/* - 画像の真ん中寄せ
------------------------------------------------------------ */
.img_center{

    text-align: center;
}

.img_center img{
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* - テーブルスクロールの注意書き
------------------------------------------------------------ */
.scr_caution {
    text-align: left;
    display: none;
}

table.normal > caption.simple > .scr_caution { margin-bottom: 15px; }

/* - ドロップダウン
------------------------------------------------------------ */
.dropdown {
	display: inline-block;
	position: relative;
	overflow: hidden;
	border-radius: 3px;
    background-color: #fff;
    border: 1px solid #999;
	vertical-align: middle;
	width: 150px;
	height: 32px;
}

.dropdown.block { display:block; }/* --- ブロック表示 --- */


.dropdown:before,
.dropdown:after {
	content: '';
	position: absolute;
	z-index: 2;
	right: 10px;
	width: 0;
	height: 0;
	border: 4px dashed;
	pointer-events: none;
	top: 10px;
    border-color: #777 transparent;
}

.dropdown:before {
	border-bottom-style: solid;
	border-top: none;
}
.dropdown:after {
	margin-top: 7px;
	border-top-style: solid;
	border-bottom: none;
}

.dropdown-select {
	position: relative;
	margin: 0;
	padding: 6px 8px 6px 10px;
	text-shadow: 0 1px white;
	background: #f2f2f2;
    background: #fff;
	background: rgba(0, 0, 0, 0) !important;
	border: 0;
	border-radius: 0;
	-webkit-appearance: none;
    appearance: none;
    color: #333;
	line-height: 1.4;
	height: 30px;
	font-size: 1.3rem;
    width: 140%;
}

.dropdown-select:focus {
	z-index: 3;
	width: 100%;
	color: #394349;
	outline: 2px solid #49aff2;
	outline: 2px solid -webkit-focus-ring-color;
	outline-offset: -2px;
}
.dropdown-select > option {
	margin: 3px;
	padding: 6px 8px;
	text-shadow: none;
	border-radius: 3px;
	cursor: pointer;
    background-color: #fff;
    color: #333;
}

/* - SSL証明
------------------------------------------------------------ */

.ssl {
    display: table;
    margin: 0 auto;
    margin-top: 40px;
    border: 1px solid #CCC;
    padding: 15px;
}

.ssl > div {
    display: table-cell;
    vertical-align: top;
}

.ssl > div.seal {
    width: 76px;
}

.ssl > div.seal a {
    display:block;
}

.ssl > div.right {
    padding-left: 25px;
}

.ssl > div.right dl dt {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 5px;
}


/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() {
	.dropdown-select { padding-left: 6px; }
}


/* - 2024/12追記　GⅠ調教コメント　バナー追加
------------------------------------------------------------ */
a{
    cursor: pointer;
}

.reporter_comment_area,
.reporter_comment_area + .content {
    margin-top: 30px;
}

.reporter_comment_area .banner a{

    display: block;
    padding: 10px;
    justify-content: center;
    border-radius: 4px;
    font-size: 1.7rem;
    font-weight: bold;;
    background-color: #397e28;
    color: #fff;
    transition: 0.2s;

    & p{
        display: flex;
        gap: 2px 8px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    & p.col1 {
        flex-direction: column;
        text-align: center;
    }

    & span:not(.bold) {
        font-weight: normal;
        font-size: 1.5rem;
    }

    & span.sm {
        font-size: 1.3rem;
    }

}

@media (hover: hover) {

    .reporter_comment_area .banner a:hover {
        filter: brightness(92%);
    }

}


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

.link_block > ul > li { width: 50%; }
.link_block > ul.col4 > li { width: 50%; }

}


@media screen and (max-width: 639px){

.link_block > ul.col3 > li ,
.link_block > ul.col5 > li ,
.link_block > ul.col6 > li { width: 50%; }

/* 表のスクロール */
    div.scr { width: 100%; overflow-x: auto; }
    div.scr > table.normal { width: 768px; }
    div.scr .scr_caution { display: block; }

}


@media screen and (max-width: 479px){

.txt-l {
    font-size: 1.5rem;
}


.link_block > ul > li a {
    font-size: 1.2rem;
}

.link_block > ul > li > a .inner {
    margin: 0;
}

.section_title {
    font-size: 1.8rem;
    padding: 10px 15px;
    margin-bottom: 20px;
}

.section_title i {
    font-size: 1.6rem;
}

.mid-title {
    font-size: 1.5rem;
}


.sample_btn a {
    padding: 10px;
}


table.normal thead tr th {
    padding: 8px;
}

table.normal tbody tr th {
    padding: 8px;
}

table.normal tbody tr td {
    padding: 8px;
}



}