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

	base conponents

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

/* ------------------------------------------------------------
1：全共通
2：コンテンツヘッダーエリア
3：見出し
4：ナビゲーション
5：ボタン
6：ボタングループ
7：ページャー
8：リンクリスト
9：cautionブロック
10：「・」リスト
11：表
12：パネル
13：重賞アイコン
14：フォームパーツ
15：collapse
16：強調
17：略称リスト
18：汎用クラス
19：Acrobat Reader ヘルプ
20：馬アイコン（マル外｜カク外｜マル地｜カク地）
21：注釈・備考リスト
22：発売要項（競馬場・ウインズ・J-PLACE）
23：よくあるご質問
24：コロン（：）リスト
25：リンクリスト（div版）
26：ブロックスキップ
27：画像リスト
28：データリスト
29：タブ切り替え
30：画像リスト（flex）
31：flexアイテムリスト
32：AppStore/GooglePlayリンク
------------------------------------------------------------ */


/* ------------------------------------------------------------
    1：全共通
------------------------------------------------------------ */
strong { font-weight:bold; }
/*a { color: #06a; }*/

table { font-size:inherit; }

button,
html input[type="button"],
html input[type="submit"]{
    -webkit-appearance: button;
    cursor: pointer;
}


/* ------------------------------------------------------------
    2：コンテンツヘッダーエリア
------------------------------------------------------------ */
div.header_line {
	color: #fff;
	width: 100%;
	background-color: #333;
	background-color: #004d40;
	margin-bottom: 30px;
    
    box-sizing: border-box;/* - 2018.09.08追加 -*/
}

div.header_line.no-mb { margin-bottom: 0; }/* --- margin-bottom無し --- */

div.header_line > div.content {
	max-width: 940px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	height: auto;
	display: block;
	width: 100%;
	padding: 20px 0;
	overflow: hidden;
}

div.header_line > div.content > h1,
div.header_line > div.content > p {
	font-size: 2rem;
	font-weight: bold;
    line-height: 1.4;
}

div.header_line > div.content > h1 > span.opt,
div.header_line > div.content > p > span.opt {
	display: block;
	font-size: 1.2rem;
	line-height: 1.3;
}


/* ----- アイコンあり ----- */
div.header_line > div.content > h1 > span.inner,
div.header_line > div.content > p > span.inner { display: table; }

div.header_line > div.content > h1 > span.inner > span,
div.header_line > div.content > p > span.inner > span {
	display: table-cell;
	vertical-align: middle;
}

div.header_line > div.content > h1 > span.inner > span.icon > img,
div.header_line > div.content > p > span.inner > span.icon > img {
	vertical-align: top;
	max-width: 40px;
	height: auto;
}

div.header_line > div.content > h1 > span.inner > span.txt,
div.header_line > div.content > p > span.inner > span.txt { padding-left: 15px; }

div.header_line > div.content > h1 > span.inner > span.txt span.opt,
div.header_line > div.content > p > span.inner > span.txt span.opt {
	display: block;
	font-size: 1.2rem;
	line-height: 1.3;
}


/* - 競馬メニュー 関連メニュー
-------------------------------------------------- */
#keiba_related_menu {
    /*border-top: 1px dashed #444;
    border-top: 1px solid #444;*/
    /*padding: 8px 0;*/
    background-color: #333;
    margin-bottom: 30px;
}

#keiba_related_menu.no-mb { margin-bottom: 0; }

#keiba_related_menu > div.content {
    max-width: 940px;
    margin: 0 auto;
}

#keiba_related_menu > div.content > p.menu_btn { display: none; }
#keiba_related_menu.on > div.content > p.menu_btn { display: none; }

#keiba_related_menu > div.content > p.menu_btn > a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    font-size: 1.2rem;
}

#keiba_related_menu > div.content > p.menu_btn > a i { margin-right: 0.3em; }

#keiba_related_menu > div.content > ul {
    display: block;
    padding: 5px 0 7px 0;
}

#keiba_related_menu > div.content > ul:after { content: ''; display: block; clear: both; }

#keiba_related_menu > div.content > ul > li {
    float: left;
    display: block;
    /*margin-left: 5px;*/
    /*margin: 2px 0 0 1px;*/
    /*margin-left: 1px;*/
    margin: 2px 0 0 1px;
}

#keiba_related_menu > div.content > ul > li:first-child { margin-left: 0; }

#keiba_related_menu > div.content > ul > li > a {
    display: block;
    text-decoration: none;
    color: #eee;
    font-size: 1.2rem;
    line-height: 1.4;
    padding: 5px 10px;
    transition: all 0.2s ease-in-out;
    border-radius: 2px;
}

#keiba_related_menu > div.content > ul > li > a i { margin-right: 0.3em; }

#keiba_related_menu > div.content > ul > li > a:hover {
    /*background-color: #00695C;*/
    background-color: #004d40;
    background-color: #455a64;
    color: #fff;
}

#keiba_related_menu > div.content > ul > li.current > a {
    background-color: #455a64;
    color: #fff;
    /*text-shadow: 1px 1px 2px rgba(0,0,0,0.3);*/
}


#keiba_related_menu > div.content > p.menu_btn > a i.fa.fa-chevron-circle-down {
    display: inline-block;
}

#keiba_related_menu.on > div.content > p.menu_btn > a i.fa.fa-chevron-circle-down {
    display: none;
}

#keiba_related_menu > div.content > p.menu_btn > a i.fa.fa-chevron-circle-up {
    display: none;
}

#keiba_related_menu.on > div.content > p.menu_btn > a i.fa.fa-chevron-circle-up {
    display: inline-block;
}









/* ------------------------------------------------------------
    3：見出し
------------------------------------------------------------ */

/* - コンテンツヘッダー（大見出し）
------------------------------------------------------------ */
.contents_header {
	border-top: 4px solid #1fac37;
	border-bottom: 1px solid #e2e2e2;
}

.contents_header > h1,
.contents_header > h2,
.contents_header > h3,
.contents_header > h4,
.contents_header > h5,
.contents_header > h6 {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	padding: 12px 8px;
}


/* --- オプション有り --- */
.contents_header.opt { /*position: relative;*/ }

.contents_header.opt > .inner {
	display: table;
	width: 100%;
}

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

.contents_header.opt > .inner > div.main > h1,
.contents_header.opt > .inner > div.main > h2,
.contents_header.opt > .inner > div.main > h3,
.contents_header.opt > .inner > div.main > h4,
.contents_header.opt > .inner > div.main > h5,
.contents_header.opt > .inner > div.main > h6 {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	padding: 12px 8px;
}

.contents_header.opt > .inner > div.opt {
	text-align: right;
	padding-right: 8px;
}

.contents_header.opt > .inner > div.opt.nowrap { white-space: nowrap; }

.contents_header.opt > .inner > div.opt > a > i {
	margin-right: 0.3em;
	color: #188542;
}


/* - コンテンツ内ヘッダー（中見出し）
------------------------------------------------------------ */
.block_header {
	padding-bottom: 4px;
	border-bottom: 2px solid #e2e2e2;
	position: relative;
}

.block_header:after {
	position: absolute;
	left: 0;
	bottom: -2px;
	content: "";
	width: 120px;
	border-bottom: 2px solid #0cae2f;
}

.block_header > .content { display: block; }

.block_header > .content > h1,
.block_header > .content > h2,
.block_header > .content > h3,
.block_header > .content > h4,
.block_header > .content > h5,
.block_header > .content > h6 {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	line-height: 1.4;
	padding: 4px 0;
}

.block_header.opt > .content > div.main > h1,
.block_header.opt > .content > div.main > h2,
.block_header.opt > .content > div.main > h3,
.block_header.opt > .content > div.main > h4,
.block_header.opt > .content > div.main > h5,
.block_header.opt > .content > div.main > h6 {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	line-height: 1.4;
	padding: 4px 8px 4px 0;
}

.block_header.opt > .content {
	display: table;
	width: 100%;
}

.block_header.opt > .content > div {
	display: table-cell;
	vertical-align: middle;
}

.block_header.opt > .content > div.opt {
	text-align: right;
	padding-right: 8px;
}

.block_header.opt > .content > div.opt.nowrap { white-space: nowrap; }

.block_header.opt > .content > div.opt > a i {
	margin-right: 0.3em;
	color: #188542;
}


/* - コンテンツ内サブヘッダー（小見出し）
------------------------------------------------------------ */
h1.block_header_line,
h2.block_header_line,
h3.block_header_line,
h4.block_header_line,
h5.block_header_line,
h6.block_header_line {
    border-bottom: 1px dotted #ccc;
    color: #444;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
	padding: 5px 0;
}


/* - コンテンツ内サブヘッダー（小見出し ベタ塗り）
------------------------------------------------------------ */
h1.sub_header,
h2.sub_header,
h3.sub_header,
h4.sub_header,
h5.sub_header,
h6.sub_header {
	background-color: #1b521f;
	color: #fff;
	font-weight: bold;
	font-size: 1.3rem;
	padding: 6px 12px;
}

/* --- ベタ塗り 余白広め・フォントサイズ大きめ --- */
h1.sub_header.lg,
h2.sub_header.lg,
h3.sub_header.lg,
h4.sub_header.lg,
h5.sub_header.lg,
h6.sub_header.lg {
	padding: 10px;
    font-size: 1.4rem;
}


/* - コンテンツ内サブヘッダー（小見出し h5スタイル）
------------------------------------------------------------ */
h1.lv5,h2.lv5,h3.lv5, h4.lv5, h5.lv5, h6.lv5 {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 0.4em;
	color: #388e3c;
	color: #028708;
	background: none;
	padding: 0;
}

/* --- フォントサイズ（小） --- */
h1.lv5.lv5-sm, h2.lv5.lv5-sm, h3.lv5.lv5-sm,
h4.lv5.lv5-sm, h5.lv5.lv5-sm, h6.lv5.lv5-sm { font-size: 1.4rem; }


/* - コンテンツ内サブヘッダー（小見出し h6スタイル）
------------------------------------------------------------ */
h1.lv6, h2.lv6, h3.lv6, h4.lv6, h5.lv6, h6.lv6 {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.4em;
	background: none;
	padding: 0;
	color: #444;
}

/* --- フォントサイズ（小） --- */
h1.lv6.lv6-sm, h2.lv6.lv6-sm, h3.lv6.lv6-sm,
h4.lv6.lv6-sm, h5.lv6.lv6-sm, h6.lv6.lv6-sm { font-size: 1.4rem; }


/* ------------------------------------------------------------
    4：ナビゲーション
------------------------------------------------------------ */

/* - タブ
------------------------------------------------------------ */
ul.nav.tab {
	display: table;
	width: 100%;
	table-layout: fixed;
}

ul.nav.tab > li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-left: 1px solid #fff;
}

ul.nav.tab > li:first-child { border-left: none; }

ul.nav.tab > li > a {
	display: block;
	background-color: #e7e7e7;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	padding: 12px 8px;
    
    font-size: 1.4rem;
}
 
ul.nav.tab > li > a:hover { background-color: #dcedc8; }

ul.nav.tab > li.current > a {
	background-color: #268300;
	color: #fff;
}

ul.nav.tab > li.current > a:hover { background-color: #268300; }

ul.nav.tab > li.current > a {
	position: relative;
	background: #268300;
}

ul.nav.tab > li.current > a:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(38, 131, 0, 0);
	border-top-color: #268300;
	border-width: 10px;
	margin-left: -10px;
    top: 99%;
}

/* --- 幅自動 --- */
ul.nav.tab.auto { width: auto; }
ul.nav.tab.auto:after { content: ''; display: block; clear: both; }

ul.nav.tab.auto > li { float: left; }
ul.nav.tab.auto > li > a { padding: 12px; }

ul.nav.tab.auto > li.current > a:after {
	border-width: 8px;
	margin-left: -8px;
}



/* - タブ（div版）
------------------------------------------------------------ */
div.nav.tab {
	display: table;
	width: 100%;
	table-layout: fixed;
}

div.nav.tab > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-left: 1px solid #fff;
    background-color: #f5f5f5;
}

div.nav.tab > div:first-child { border-left: none; }

div.nav.tab > div > a {
	display: block;
	background-color: #e7e7e7;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	padding: 12px 8px;
    font-size: 1.4rem;
}
 
div.nav.tab > div > a:hover { background-color: #dcedc8; }

div.nav.tab > div.current > a {
	background-color: #268300;
	color: #fff;
}

div.nav.tab > div.current > a:hover { background-color: #268300; }

div.nav.tab > div.current > a {
	position: relative;
	background: #268300;
}

div.nav.tab > div.current > a:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(38, 131, 0, 0);
	border-top-color: #268300;
	border-width: 10px;
	margin-left: -10px;
    top: 99%;
}

/* --- 幅自動 --- */
div.nav.tab.auto { width: auto; }
div.nav.tab.auto:after { content: ''; display: block; clear: both; }

div.nav.tab.auto > div { float: left; }
div.nav.tab.auto > div > a { padding: 12px; }

div.nav.tab.auto > div.current > a:after {
	border-width: 8px;
	margin-left: -8px;
}



/* - ボタンメニュー
------------------------------------------------------------ */
ul.nav.blocks {
	display: table;
	width: 100%;
	table-layout: fixed;
	
	background-color: #ebebeb;
	padding: 2px;
}

ul.nav.blocks > li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 2px;
}

ul.nav.blocks > li > a {
	display: block;
	background-color: #fff;
	padding: 5px;
	line-height: 1.4;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	text-decoration: none;
	color: #444;
	color: #06a;
}

ul.nav.blocks > li > a:hover {
	background-color: #fff8e1;
}


ul.nav.blocks > li.current > a {
	background-color: #1976D2;
	background-color: #268300;
	background-color: #444;
	color: #fff;
	font-weight: bold;
	
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* --- 幅自動 --- */
ul.nav.blocks.narrow {
	display: inline-block;
	width: auto;
}

ul.nav.blocks.narrow:after { content: ''; display: block; clear: both; }

ul.nav.blocks.narrow > li {
	float: left;
	font-size: 1.3rem;
}

ul.nav.blocks.narrow > li > a { padding: 5px 8px; }/* --- 余白狭い --- */



/* - カプセルメニュー
------------------------------------------------------------ */
ul.nav.pills {
	display: table;
	width: 100%;
	table-layout: fixed;
	background-color: #ebebeb;
    padding: 4px;
}

ul.nav.pills > li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
    padding: 4px;
}

ul.nav.pills > li > a {
	display: block;
	background-color: #fff;
	padding: 7px 5px;
	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.3rem;
}

/* --- メニュー内フォントサイズ --- */
ul.nav.pills.pills-lg > li > a { font-size: 1.5rem; }
ul.nav.pills.pills-sm > li > a { font-size: 1.2rem; }
ul.nav.pills.pills-xs > li > a { font-size: 1.1rem; }

ul.nav.pills > li > a i {
    margin-right: 0.3em;
    color: #188542;
}

ul.nav.pills > li > a:hover { background-color: #fff8e1; }

ul.nav.pills > li.current > a {
	background-color: #1976D2;
	background-color: #268300;
	background-color: #444;
	color: #fff;
	font-weight: bold;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

ul.nav.pills > li.current > a i { color: #fff; }


/* --- 幅自動 --- */
ul.nav.pills.auto {
	display: inline-block;
	width: auto;
}

ul.nav.pills.auto:after { content: ''; display: block; clear: both; }

ul.nav.pills.auto > li {
	float: left;
	font-size: 1.3rem;
}

ul.nav.pills.auto > li > a { padding: 7px 8px; }



/* - カプセルメニュー（div版）
------------------------------------------------------------ */
div.nav.pills {
	display: table;
	width: 100%;
	table-layout: fixed;
	background-color: #ebebeb;
	padding: 4px;
}

div.nav.pills > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 4px;
}

div.nav.pills > div > a {
	display: block;
	background-color: #fff;
	padding: 7px 5px;
	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.3rem;
}

/* --- メニュー内フォントサイズ --- */
div.nav.pills.pills-lg > div > a { font-size: 1.5rem; }
div.nav.pills.pills-sm > div > a { font-size: 1.2rem; }
div.nav.pills.pills-xs > div > a { font-size: 1.1rem; }

div.nav.pills > div > a i {
    margin-right: 0.3em;
    color: #188542;
}

div.nav.pills > div > a:hover { background-color: #fff8e1; }

div.nav.pills > div.current > a {
	background-color: #1976D2;
	background-color: #268300;
	background-color: #444;
	color: #fff;
	font-weight: bold;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

div.nav.pills > div.current > a i { color: #fff; }


/* --- 幅自動 --- */
div.nav.pills.auto {
	display: inline-block;
	width: auto;
}

div.nav.pills.auto:after { content: ''; display: block; clear: both; }

div.nav.pills.auto > div {
	float: left;
	font-size: 1.3rem;
}

div.nav.pills.auto > div > a { padding: 7px 8px; }





/* - カプセルメニュー（div版｜折り返しあり版）
------------------------------------------------------------ */
div.nav.pills.flap {
	width: 100%;
	background-color: #ebebeb;
	padding: 4px;
    display: block;
    font-size: 0;
}

div.nav.pills.flap > div {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	padding: 4px;
}

div.nav.pills.flap.div2 > div { width: 50% }
div.nav.pills.flap.div3 > div { width: 33.333% }
div.nav.pills.flap.div4 > div { width: 25% }
div.nav.pills.flap.div5 > div { width: 20% }
div.nav.pills.flap.div6 > div { width: 16.667% }


div.nav.pills.flap > div > a {
	display: block;
	background-color: #fff;
	padding: 7px 10px;
	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.3rem;
}

/* --- メニュー内フォントサイズ --- */
div.nav.pills.flap.pills-lg > div > a { font-size: 1.5rem; }
div.nav.pills.flap.pills-sm > div > a { font-size: 1.2rem; }
div.nav.pills.flap.pills-xs > div > a { font-size: 1.1rem; }

div.nav.pills.flap > div > a i {
    margin-right: 0.3em;
    color: #188542;
}

div.nav.pills.flap > div > a:hover { background-color: #fff8e1; }

div.nav.pills.flap > div.current > a {
	background-color: #1976D2;
	background-color: #268300;
	background-color: #444;
	color: #fff;
	font-weight: bold;
	box-shadow: 0 0 0 rgba(0,0,0,0);
}

div.nav.pills.flap > div.current > a i { color: #fff; }


div.nav.pills.flap > div > a i.fa.fa-chevron-circle-right { display: inline-block; }
div.nav.pills.flap > div.current > a i.fa.fa-chevron-circle-right { display: none; }
div.nav.pills.flap > div > a i.fa.fa-chevron-circle-down { display: none; }
div.nav.pills.flap > div.current > a i.fa.fa-chevron-circle-down { display: inline-block; }









/* ------------------------------------------------------------
   5：ボタン
------------------------------------------------------------ */
.btn-def {
	display: inline-block;
	color: #555;
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	text-decoration: none;
	/*white-space: nowrap;*/
	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);
	
    line-height: 1.4;
    padding: 6px 30px;
	
	color: #555;
	background-color: #fff;
	vertical-align: middle;
    box-sizing: border-box;
    
    position: relative;
    top: -1px;
}

.btn-def.btn-block { display: block; }/* --- blockボタン --- */
.btn-def.btn-wn { font-weight: normal; }/* --- weight normal --- */
.btn-def.wrap { white-space: normal; }/* --- 改行 --- */
.btn-def.left { text-align: left; }/* --- 左寄せ --- */


/* - ボタンサイズバリエーション
------------------------------------------------------------ */
.btn-def.btn-lg { font-size: 1.8rem; }

.btn-def.btn-sm {
	font-size: 1.1rem;
    padding: 4px 15px;
}

.btn-def.btn-xs {
	font-size: 1rem;
	border-radius: 3px;
    padding: 4px 10px;
}

.btn-def > i {
	margin-right: 0.3em;
	color: #188542;
}


.btn-def.btn-narrow { padding: 6px 15px; }
.btn-def.btn-lg.btn-narrow { padding: 6px 15px; }
.btn-def.btn-sm.btn-narrow { padding: 4px 10px; }
.btn-def.btn-xs.btn-narrow { padding: 4px 6px; }

.btn-def.btn-fat { padding: 10px 15px; }
/*.btn-def.btn-lg.btn-fat { padding: 10px 15px; }
.btn-def.btn-sm.btn-fat { padding: 8px 10px; }
.btn-def.btn-xs.btn-fat { padding: 8px 6px; }*/



/* - ボタン内テキストバリエーション
------------------------------------------------------------ */
.btn-def.txt-left { text-align: left; }


/* - ボタン内オプションテキスト
------------------------------------------------------------ */
.btn-def > .opt { font-size: 1.2rem; }
.btn-def > .opt.opt-sm { font-size: 1.1rem; }
.btn-def > .opt.opt-xs { font-size: 1rem; }
.btn-def > .opt.block { display: block;}


/* - ボタンカラーバリエーション
------------------------------------------------------------ */
.btn-def.blue {
	color: #fff;
	background-color: #0f75da;
	border: 1px solid #0c63b9;
}

.btn-def.green {
	color: #fff;
	background-color: #3f8514;
	border: 1px solid #316510;
}

.btn-def.gray {
	background-color: #555;
	border: 1px solid #333;
	color: #fff;
}

.btn-def:hover {
	color: #333;
	border-color: #888;
	background-color: #f7f7f7;
}

.btn-def.blue:hover {
	background-color: #0d68c2;
    border: 1px solid #0a56a1;
    color: #fff;
}

.btn-def.green:hover {
	background: #387611;
    border: 1px solid #336d10;
	border: 1px solid #2e630f;
    color: #fff;
}

.btn-def.gray:hover {
	background: #222;
    border: 1px solid #111;
    color: #fff;
}

.btn-def.blue > i,
.btn-def.green > i,
.btn-def.gray > i { color: #fff !important; }



/* ------------------------------------------------------------
    6：ボタングループ
------------------------------------------------------------ */
.btn-group {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
}

.btn-group.block { display: block; }

.btn-group > .btn-def {
	display: inline-block;
	font-size: 1.3rem;
	margin-left: -1px;
	border-radius: 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 2px rgba(0, 0, 0, .075);
    
    line-height: 1.4;
}

.btn-group > .btn-def:first-child {
	margin-left: 0;
	/*border-radius: 4px 0 0 4px;*/
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group > .btn-def:last-child {
    /*border-radius: 0 4px 4px 0;*/
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*.btn-group > .btn-def > a { display: block; }*/

.btn-group > .btn-def:focus {
    position: relative;
    z-index: 15;
}


.btn-group.blue > .btn-def {
	background-color: #0f75da;
	border: 1px solid #0c63b9;
	color: #fff;
}

.btn-group.green > .btn-def {
	background-color: #3f8514;
	border: 1px solid #316510;
	color: #fff;
}

.btn-group.gray > .btn-def {
	background-color: #555;
	border: 1px solid #333;
	color: #fff;
}

.btn-group > .btn-def:hover {
	position: relative;
	z-index: 10;
}

/* - ボタングループ カラーバリエーション
------------------------------------------------------------ */
/* --- 青ボタングループ --- */
.btn-group.blue > .btn-def:hover {
	background-color: #0d68c2;
    border: 1px solid #0a56a1;
    color: #fff;
}

/* --- グリーンボタングループ --- */
.btn-group.green > .btn-def:hover {
	background-color: #387611;
	border: 1px solid #2e630f;
    color: #fff;
}

/* --- グレーボタン --- */
.btn-group.gray > .btn-def:hover {
	background-color: #222;
    border: 1px solid #111;
    color: #fff;
}


/* - ボタングループ サイズバリエーション
------------------------------------------------------------ */
.btn-group.btn-group-lg > .btn-def { font-size: 1.6rem; }

.btn-group.btn-group-sm > .btn-def {
	font-size: 1.1rem;
    padding: 4px 15px;
}

.btn-group.btn-group-xs > .btn-def {
	font-size: 1rem;
    padding: 4px 10px;
}


/* - ボタングループ 横余白狭く
------------------------------------------------------------ */
.btn-group.btn-group-narrow > .btn-def { padding: 6px 15px; }
.btn-group.btn-group-lg.btn-group-narrow > .btn-def { padding: 6px 15px; }
.btn-group.btn-group-sm.btn-group-narrow > .btn-def { padding: 4px 10px; }
.btn-group.btn-group-xs.btn-group-narrow > .btn-def { padding: 4px 6px; }




/* ------------------------------------------------------------
    7：ページャー
------------------------------------------------------------ */
div.pager {
	display: inline-block;
	vertical-align: middle;
}

div.pager.block { display: block; }

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

div.pager > ul > li {
	float: left;
	margin-left: -1px;
}

div.pager > ul > li:first-child { margin-left: 0; }

div.pager > ul > li > a {
	display: block;
	border-radius: 0;
	/*box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 2px rgba(0, 0, 0, .075);*/
	
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 2px rgba(0, 0, 0, .075);
	
	height: 32px;
	padding: 0 15px;
	color: #555;
	text-align: center;
	font-size: 1.3rem;
	line-height: 3.1rem;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid #ddd;
	cursor: pointer;
	box-sizing: border-box;
	
	transition: all 140ms ease-in-out;
	color: #06a;
}

div.pager.gray > ul > li > a {
	background-color: #555;
	border: 1px solid #333;
	color: #fff;
}


/* - ページャー サイズバリエーション
------------------------------------------------------------ */
div.pager.pager-sm > ul > li > a {
	font-size: 1.1rem;
	height: 28px;
	line-height: 2.7rem;
	padding: 0 10px;
}

div.pager.pager-xs > ul > li > a {
	font-size: 1rem;
	height: 24px;
	line-height: 2.3rem;
	padding: 0 8px;
}

/*
div.pager.pager-lg > ul > li > a {
	font-size: 1.5rem;
	height: 36px;
	line-height: 3.5rem;
}
*/

div.pager > ul > li > a i { color: #188542; }
div.pager.gray > ul > li > a i { color: #eee; }

div.pager > ul > li:first-child > a { border-radius: 4px 0 0 4px; }
div.pager > ul > li:first-child > a i { margin-right: 0.3em; }

div.pager > ul > li:last-child > a { border-radius: 0 4px 4px 0; }
div.pager > ul > li:last-child > a i { margin-left: 0.3em; }

div.pager > ul > li > a:hover {
	background-color: #eee;
	color: #333;
	position: relative;
	z-index: 10;
}

div.pager.gray > ul > li > a:hover {
	background-color: #222;
    border: 1px solid #111;
    color: #fff;
}

div.pager > ul > li.current > a {
	color: #fff;
	font-weight: bold;
	background-color: #1976D2;
	position: relative;
	z-index: 15;
}

div.pager.gray > ul > li.current > a {
	background-color: #999;
	color: #111;
}

div.pager > ul > li.current > a:hover { z-index: 15; }

div.pager > ul > li.disabled > a {
	color: #999;
	border: 1px solid #e7e7e7;
	cursor: not-allowed;
}

div.pager.gray > ul > li.disabled > a { border: 1px solid #666; }

div.pager > ul > li.disabled > a:hover { background-color: #fff; }

div.pager.gray > ul > li.disabled > a:hover {
	background-color: #555;
	border: 1px solid #333;
	color: #999;
}

div.pager > ul > li.disabled > a i { color: #999; }


/* ------------------------------------------------------------
    8：リンクリスト
------------------------------------------------------------ */
ul.link_list {
	background-color: #ebebeb;
	padding: 5px;
}

ul.link_list > li { padding: 5px; }

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

/* --- current表示（バックナンバーコンポーネントで使用） --- */
ul.link_list > li.current > a {
    background-color: #444;
    color: #fff;
}

ul.link_list.narrow > li > a { padding: 10px; }/* --- 余白狭い --- */
ul.link_list.max-narrow > li > a { padding: 6px 8px; }/* --- 余白さらに狭い --- */
ul.link_list.mid > li > a { font-size: 1.3rem; }/* --- フォントサイズ小 --- */
ul.link_list.wn > li > a { font-weight: normal;}/* --- ボールド無し --- */

ul.link_list > li > a:hover { background-color: #fff8e1; }
ul.link_list > li.current > a:hover { background-color: #444; }

ul.link_list > li > a > i {
	margin-right: 0.3em;
	color: #188542;
}

ul.link_list > li.current > a > i { color: #fff; }

/* --- オプションテキスト ---*/
ul.link_list > li > a span.opt { font-size: 1.2rem; }
ul.link_list > li > a span.opt.opt-xs { font-size: 1.1rem; }/* --- フォントサイズ小 --- */
ul.link_list > li > a span.opt.block { display: block;}/* --- ブロック表示 --- */


/* --- ボタン内テキストセンタリング --- */
ul.link_list.center > li > a { text-align: center; }


/* - テキスト複数行パターン
------------------------------------------------------------ */
ul.link_list > li > a > .inner { display: table; }

ul.link_list.center > li > a > .inner {
    display: table;
    margin: 0 auto;
    width: auto;
}

ul.link_list > li > a > .inner > span {
    display: table-cell;
    vertical-align: middle;
}

ul.link_list > li > a > .inner > span.icon {
    padding-right: 0.5em;
    color: #188542;
}

ul.link_list > li > a > .inner > span.icon {  }
ul.link_list > li > a > .inner > span.txt {  }


/* - 複数カラム（2列・3列・4列・5列）
------------------------------------------------------------ */
ul.link_list.multi:after { content: ''; display: block; clear: both; }
ul.link_list.multi > li { float: left; }/* --- 複数カラム（+.multi） --- */

ul.link_list.multi.div2 > li { width: 50%; }
ul.link_list.multi.div3 > li { width: 33.33%; }
ul.link_list.multi.div4 > li { width: 25%; }
ul.link_list.multi.div5 > li { width: 20%; }





/* ------------------------------------------------------------
    25：リンクリスト（div版）
------------------------------------------------------------ */
div.link_list {
	background-color: #ebebeb;
	padding: 5px;
}

div.link_list > div { padding: 5px; }

div.link_list > div > a {
	display: block;
	background-color: #fff;
    padding: 15px;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	text-decoration: none;
	color: #333;
	line-height: 1.4;
	font-size: 1.4rem;
	font-weight: bold;
	color: #06a;
}

/* --- current表示（バックナンバーコンポーネントで使用） --- */
div.link_list > div.current > a {
    background-color: #444;
    color: #fff;
}

div.link_list.narrow > div > a { padding: 10px; }/* --- 余白狭い --- */
div.link_list.max-narrow > div > a { padding: 6px 8px; }/* --- 余白さらに狭い --- */
div.link_list.mid > div > a { font-size: 1.3rem; }/* --- フォントサイズ小 --- */
div.link_list.wn > div > a { font-weight: normal; }/* --- ボールド無し --- */

div.link_list > div > a:hover { background-color: #fff8e1; }
div.link_list > div.current > a:hover { background-color: #444; }

div.link_list > div > a > i {
	margin-right: 0.3em;
	color: #188542;
}

div.link_list > div.current > a > i { color: #fff; }

/* --- オプションテキスト ---*/
div.link_list > div > a span.opt { font-size: 1.2rem; }
div.link_list > div > a span.opt.opt-xs { font-size: 1.1rem; }/* --- フォントサイズ小 --- */
div.link_list > div > a span.opt.block { display: block;}/* --- ブロック表示 --- */


/* --- ボタン内テキストセンタリング --- */
div.link_list.center > div > a { text-align: center; }


/* - テキスト複数行パターン
------------------------------------------------------------ */
div.link_list > div > a > .inner { display: table; }

div.link_list.center > div > a > .inner {
    display: table;
    margin: 0 auto;
    width: auto;
}

div.link_list > div > a > .inner > span {
    display: table-cell;
    vertical-align: middle;
}

div.link_list > div > a > .inner > span.icon {
    padding-right: 0.5em;
    color: #188542;
}

div.link_list > div > a > .inner > span.icon {  }
div.link_list > div > a > .inner > span.txt {  }


/* - 複数カラム（2列・3列・4列・5列）
------------------------------------------------------------ */
div.link_list.multi:after { content: ''; display: block; clear: both; }
div.link_list.multi > div { float: left; }/* --- 複数カラム（+.multi） --- */

div.link_list.multi.div2 > div { width: 50%; }
div.link_list.multi.div3 > div { width: 33.33%; }
div.link_list.multi.div4 > div { width: 25%; }
div.link_list.multi.div5 > div { width: 20%; }






/* ------------------------------------------------------------
    9：cautionブロック（注意書きなど）
------------------------------------------------------------ */
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.strong { background-color: #FFF3E0; }/* --- 強めの注意喚起背景 --- */
div.caution.caution-sm { font-size: 1.1rem; }/* --- フォントサイズ小 --- */



/* ------------------------------------------------------------
    10：「・」リスト
------------------------------------------------------------ */
ul.dot_list {  }

ul.dot_list > li { display: table; }

ul.dot_list > li > span {
	display: table-cell;
	vertical-align: top;
	padding: 2px 0;
	line-height: 1.5;
}

ul.dot_list.sm > li > span { font-size: 1.2rem; }/* --- フォントサイズ小 --- */

ul.dot_list > li > span.dot { width: 1em; }
ul.dot_list > li > span.txt { padding-left: 0.2em; }


/* ----- div版 ---- */
ul.dot_list > li > div {
	display: table-cell;
	vertical-align: top;
	padding: 2px 0;
	line-height: 1.5;
}

ul.dot_list.sm > li > div { font-size: 1.2rem; }/* --- フォントサイズ小 --- */

ul.dot_list > li > div.dot { width: 1em; }
ul.dot_list > li > div.txt { padding-left: 0.2em; }





/* ------------------------------------------------------------
    11：表
------------------------------------------------------------ */
table.basic { width: 100%; }
table.basic.auto { width: auto; }/*　---　幅自動　---　*/
table.basic.fixed { table-layout: fixed; }/* --- 均等割 --- */


/* - caption要素
------------------------------------------------------------ */
table.basic > caption { margin-bottom: 15px; }
table.basic > caption.simple { margin-bottom: 0; }

/* --- caption 省略パターン（caption.simpleとセットでmargin-bottomも省略） --- */
table.basic > caption.transparent .inner {
    position: absolute;
    left: -9999px;
}

/* --- 見出しh3スタイルcaption --- */
caption.h3, caption.h4,
caption.h5, caption.simple { text-align: left; }

/*
caption.h3 > .inner {
	border-top: 4px solid #1fac37;
	border-bottom: 1px solid #e2e2e2;
	text-align: left;
	display: table;
	width: 100%;
}

caption.h3 > .inner > div,
caption.h4 > .heading > .inner > div,
caption.h5 > .inner > div {
	display: table-cell;
	vertical-align: middle;
}

caption.h3 > .inner > div.main {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	padding: 12px 8px;
}

caption.h4 > .heading > .inner > div.main {
	font-size: 1.6rem;
	font-weight: bold;
	color: #444;
	padding: 4px 8px 4px 0;
}

caption.h5 > .inner > div.main {
	font-size: 1.4rem;
	font-weight: bold;
	color: #444;
	padding: 5px 8px 5px 0;
}
*/


/* --- captionオプションエリア --- */
/*
caption.h3 > .inner > div.opt {
	text-align: right;
	padding-right: 8px;
}

caption.h4 > .heading > .inner > div.opt,
caption.h5 > .inner > div.opt {
	text-align: right;
	padding: 5px 0;
}

caption.h3 > .inner > div.opt.nowrap,
caption.h4 > .heading > .inner > div.opt.nowrap,
caption.h5 > .inner > div.opt.nowrap { white-space: nowrap; }

caption.h3 > .inner > div.opt > a i,
caption.h4 > .heading > .inner > div.opt > a i,
caption.h5 > .inner > div.opt > a i {
	margin-right: 0.4em;
	color: #188542;
}
*/


/* ----- 見出しh4スタイルcaption ----- */
/*
caption.h4 > .heading {
	padding-bottom: 4px;
	border-bottom: 2px solid #e2e2e2;
	position: relative;
}

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

caption.h4 > .heading > .inner,
caption.h5 > .inner {
	text-align: left;
	display: table;
	width: 100%;
}
*/

/* --- 見出しh5スタイルcaption --- */
/*
caption.h5 {  }
caption.h5 > .inner { border-bottom: 1px dotted #ccc; }
*/


/* --- 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;
}

/*
caption.nb > .inner > div.main {
    font-weight: normal;
}
*/

caption.simple.title-s > .inner > div.main { font-size: 1.3rem; }/* --- フォントサイズ小 --- */

/* --- 背景色付き --- */
caption.simple.bg {
    background-color: #ebebeb;
    padding: 5px 10px;
    background-color: #f3f3f3;
    border-top: 2px solid #ddd;
}

caption.simple.bg > .inner > div.main {  }

/* --- captionオプションエリア --- */
caption.simple > .inner > div.opt {
	text-align: right;
	padding: 5px 0;
}

caption.simple > .inner > div.opt.nowrap { white-space: nowrap; }/* --- オプション折り返しなし --- */

caption.simple > .inner > div.opt > a i {
	margin-right: 0.4em;
	color: #188542;
}


/* ----- 追加キャプションスタイル ----- */
/*
table.basic > caption.heading-style .left-line {
    border-left: 3px solid var(--main-color);
    padding-left: 0.5em;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: left;
}

table.basic > caption.heading-style .left-line.h2 { font-size: 2rem; }
table.basic > caption.heading-style .left-line.h3 { font-size: 1.8rem; }
table.basic > caption.heading-style .left-line.h4 { font-size: 1.6rem; }
table.basic > caption.heading-style .left-line.h5 { font-size: 1.4rem; }
table.basic > caption.heading-style .left-line.h6 { font-size: 1.3rem; }
table.basic > caption.heading-style .left-line + .caution { margin-top: 10px; }

table.basic > caption.heading-style .under-line {
    border-bottom: 3px solid var(--main-color);
    padding-bottom: 0.3em;
    font-size: 2.4rem;
    font-weight: bold;
    text-align: left;
}

table.basic > caption.heading-style .under-line.h2 { font-size: 2rem; }
table.basic > caption.heading-style .under-line.h3 { font-size: 1.8rem; }
table.basic > caption.heading-style .under-line.h4 { font-size: 1.6rem; }
table.basic > caption.heading-style .under-line.h5 { font-size: 1.4rem; }
table.basic > caption.heading-style .under-line.h6 { font-size: 1.3rem; }
table.basic > caption.heading-style .under-line + .caution { margin-top: 10px; }
*/


/* - 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;
}

table.basic thead.normal > tr > th { font-weight: normal; }/* weight normal */
table.basic thead.left > tr > th { text-align: left; }/* 左寄せ（thead内のth全て） */
table.basic thead.right > tr > th { text-align: right; }/* 右寄せ（thead内のth全て） */
table.basic thead > tr > th.left { text-align: left; }/* 左寄せ（thead内の指定のth） */
table.basic thead > tr > th.right { text-align: right; }/* 右寄せ（thead内の指定のth） */


/* - tfoot
------------------------------------------------------------ */
table.basic tfoot > 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;
}

table.basic tfoot.normal > tr > th { font-weight: normal; }/* weight normal */
table.basic tfoot.left > tr > th { text-align: left; }/* 左寄せ（thead内のth全て） */
table.basic tfoot.right > tr > th { text-align: right; }/* 右寄せ（thead内のth全て） */
table.basic tfoot > tr > th.left { text-align: left; }/* 左寄せ（thead内の指定のth） */
table.basic tfoot > tr > th.right { text-align: right; }/* 右寄せ（thead内の指定のth） */



/* - 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;
}

/* --- 全てのtdのvertical-alignをtopに --- */
table.basic tbody.td-v-top > tr > td { vertical-align: top; }

/* --- 全ての th または td を左寄せ --- */
table.basic tbody.th_left > tr > th { text-align: left; }
table.basic tbody.td_left > tr > td { text-align: left; }

/* --- thの左・右・中央寄せ --- */
table.basic tbody > tr > th.left { text-align:left; }
table.basic tbody > tr > th.right { text-align:right; }
table.basic tbody > tr > th.center { text-align:center; }

/* --- tdの左・右・中央寄せ --- */
table.basic tbody > tr > td.left { text-align:left; }
table.basic tbody > tr > td.right { text-align:right; }
table.basic tbody > tr > td.center { text-align:center; }


/* - セル余白（padding）
------------------------------------------------------------ */
/* --- 縦padding狭い --- */
table.basic.narrow thead > tr > th,
table.basic.narrow tfoot > 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 tfoot > 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; }


/* - simple（thead thの背景色無し）テーブル
------------------------------------------------------------ */
table.basic.simple thead > tr > th,
table.basic.simple tfoot > tr > th {
	background-color: #f7f7f7;
	color: #444;
}
table.basic.simple tbody > tr > th { background-color: #fff; }


/* - ボーダーのみテーブル
------------------------------------------------------------ */
table.basic.simple-b thead > tr > th,
table.basic.simple-b tfoot > tr > th {
	background-color: #fff;
	color: #444;
}

table.basic.simple-b tbody > tr > th { background-color: #fff; }


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


/* - 縦striped（偶数列・奇数列のtdの背景色が#e0f2f1）
------------------------------------------------------------ */
/*table.basic.v-striped tbody > tr > td:nth-child(even) { background-color: #f7f7f7; }*/
table.basic.v-striped tbody > tr > td:nth-child(even) { background-color: #e0f2f1; }

table.basic.v-striped.odd tbody > tr > td:nth-child(even) { background-color: #fff; }
table.basic.v-striped.odd tbody > tr > td:nth-child(odd) { background-color: #e0f2f1; }



/* - セルの背景色（red｜blue｜green｜yellow）
------------------------------------------------------------ */
table.basic tbody > tr.red,
table.basic tbody > tr.red > td,
table.basic tbody > tr > th.red,
table.basic tbody > tr > td.red,
table.basic.striped tbody > tr:nth-child(even) > td.red,
table.basic.striped tbody > tr:nth-child(even).red > td,
table.basic.v-striped tbody > tr > td.red,
table.basic.v-striped tbody > tr.red > td,
table.basic.v-striped.odd tbody > tr > td.red,
table.basic.v-striped.odd tbody > tr.red > td {
	background-color: #f5e0e0;
}

table.basic tbody > tr.blue,
table.basic tbody > tr.blue > td,
table.basic tbody > tr > th.blue,
table.basic tbody > tr > td.blue,
table.basic.striped tbody > tr:nth-child(even) > td.blue,
table.basic.striped tbody > tr:nth-child(even).blue > td,
table.basic.v-striped tbody > tr > td.blue,
table.basic.v-striped tbody > tr.blue > td,
table.basic.v-striped.odd tbody > tr > td.blue,
table.basic.v-striped.odd tbody > tr.blue > td {
	background-color: #d7ecf6;
}

table.basic tbody > tr.green,
table.basic tbody > tr.green > td,
table.basic tbody > tr > th.green,
table.basic tbody > tr > td.green,
table.basic.striped tbody > tr:nth-child(even) > td.green,
table.basic.striped tbody > tr:nth-child(even).green > td,
table.basic.v-striped tbody > tr > td.green,
table.basic.v-striped tbody > tr.green > td,
table.basic.v-striped.odd tbody > tr > td.green,
table.basic.v-striped.odd tbody > tr.green > td {
	background-color: #dcf0d4;
}

table.basic tbody > tr.yellow,
table.basic tbody > tr.yellow > td,
table.basic tbody > tr > th.yellow,
table.basic tbody > tr > td.yellow,
table.basic.striped tbody > tr:nth-child(even) > td.yellow,
table.basic.striped tbody > tr:nth-child(even).yellow > td,
table.basic.v-striped tbody > tr > td.yellow,
table.basic.v-striped tbody > tr.yellow > td,
table.basic.v-striped.odd tbody > tr > td.yellow,
table.basic.v-striped.odd tbody > tr.yellow > td {
	background-color: #f9f5de;
}

/* --- tbody > tr > thも含めて行の背景色を指定 --- */
table.basic tbody > tr.red-all,
table.basic tbody > tr.red-all > th,
table.basic tbody > tr.red-all > td,
table.basic.striped tbody > tr:nth-child(even).red-all > th,
table.basic.striped tbody > tr:nth-child(even).red-all > td,
table.basic.v-striped tbody > tr.red-all > th,
table.basic.v-striped tbody > tr.red-all > td,
table.basic.v-striped.odd tbody > tr.red-all > th,
table.basic.v-striped.odd tbody > tr.red-all > td {
	background-color: #f5e0e0;
}

table.basic tbody > tr.blue-all,
table.basic tbody > tr.blue-all > th,
table.basic tbody > tr.blue-all > td,
table.basic.striped tbody > tr:nth-child(even).blue-all > th
table.basic.striped tbody > tr:nth-child(even).blue-all > td,
table.basic.v-striped tbody > tr.blue-all > th,
table.basic.v-striped tbody > tr.blue-all > td,
table.basic.v-striped.odd tbody > tr.blue-all > th,
table.basic.v-striped.odd tbody > tr.blue-all > td {
	background-color: #d7ecf6;
}

table.basic tbody > tr.green-all,
table.basic tbody > tr.green-all > th,
table.basic tbody > tr.green-all > td,
table.basic.striped tbody > tr:nth-child(even).green-all > th,
table.basic.striped tbody > tr:nth-child(even).green-all > td,
table.basic.v-striped tbody > tr.green-all > th,
table.basic.v-striped tbody > tr.green-all > td,
table.basic.v-striped.odd tbody > tr.green-all > th,
table.basic.v-striped.odd tbody > tr.green-all > td {
	background-color: #dcf0d4;
}

table.basic tbody > tr.yellow-all,
table.basic tbody > tr.yellow-all > th,
table.basic tbody > tr.yellow-all > td,
table.basic.striped tbody > tr:nth-child(even).yellow-all > th,
table.basic.striped tbody > tr:nth-child(even).yellow-all > td,
table.basic.v-striped tbody > tr.yellow-all > th,
table.basic.v-striped tbody > tr.yellow-all > td,
table.basic.v-striped.odd tbody > tr.yellow-all > th,
table.basic.v-striped.odd tbody > tr.yellow-all > td {
	background-color: #f9f5de;
}


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

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


/* ------------------------------------------------------------
    12：パネル（.panel）
------------------------------------------------------------ */
.panel {  }

.panel > .content {
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
}

.panel.narrow > .content { padding: 10px; }/* --- 余白狭い版 --- */

.panel.no-padding > .content { padding:0; }/* --- 余白無し --- */
.panel.no-border > .content { border:none; }/* --- ボーダー無し --- */

/* --- パネルコンポーネント内の最初の見出しpadding調整 --- */
.panel > .content > h2.block_header_line:first-of-type,
.panel > .content > h3.block_header_line:first-of-type,
.panel > .content > h4.block_header_line:first-of-type,
.panel > .content > h5.block_header_line:first-of-type,
.panel > .content > h6.block_header_line:first-of-type { padding-top: 0; }


/* ------------------------------------------------------------
    13：重賞アイコン（「重賞」や「新設重賞」は.grade_iconのみ）
------------------------------------------------------------ */
.grade_icon {
	border-radius: 2px;
	font-size: 1rem;
	text-decoration: none;
	margin: 0 4px;
	position: relative;
	top: -1px;
	min-width: 24px;
	display: inline-block;
	text-align: center;
	line-height: 1;
	line-height: 1.4;
	padding: 2px 3px 1px 4px;
    padding: 2px 4px 1px 4px;
    
    background-color: #555;
    color: #fff;
}

.grade_icon.g1, .grade_icon.g2, .grade_icon.g3 {
    padding: 2px 2px 1px 4px;
}

.grade_icon.wb { font-weight: bold; }
.grade_icon.wn { font-weight: normal; }

/* --- GI｜J・GI --- */
.grade_icon.g1 {
	background-color: #1976D2;
	color: #fff;
}

/* --- GII｜J・GII --- */
.grade_icon.g2 {
	background-color: #B71C1C;
	background-color: #d71a1a;
	color: #fff;
}

/* --- GIII｜J・GIII --- */
.grade_icon.g3 {
	background-color: #268300;
	color: #fff;
}

.grade_icon > span {
    letter-spacing: -0.2em;
    margin-left: -0.2em;
}


/* - 画像版
-------------------------------------------------- */
.grade_icon.img {
    padding: 0;
    background: none;
    border-radius: none;
}

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

.grade_icon.lg img {
    max-width: 36px;
}



/* ------------------------------------------------------------
    14：フォームパーツ
------------------------------------------------------------ */

/* - ドロップダウン
------------------------------------------------------------ */
.dropdown {
	display: inline-block;
	position: relative;
	overflow: hidden;
	height: 28px;
	width: 150px;
	background: #f2f2f2;
	border: 1px solid;
	border-color: white #f7f7f7 #f5f5f5;
	border-radius: 3px;
	/*
    background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
	background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
	background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	*/
    
    background-color: #fff;
    border: 1px solid #666;
    border: 1px solid #999;
    
	width: 120px;
	box-sizing: border-box;
	height: 32px;
	vertical-align: middle;
	
	width: 150px;
	height: 34px;
	height: 32px;
}

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


.dropdown:before,
.dropdown:after {
	content: '';
	position: absolute;
	z-index: 2;
	top: 9px;
	right: 10px;
	width: 0;
	height: 0;
	border: 4px dashed;
	border-color: #888 transparent;
	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;
	width: 130%;
	margin: 0;
	padding: 6px 8px 6px 10px;
	color: #62717a;
	text-shadow: 0 1px white;
	/* Fallback for IE 8 */
	background: #f2f2f2;
    background: #fff;
	/* "transparent" doesn't work with Opera */
	background: rgba(0, 0, 0, 0) !important;
	border: 0;
	border-radius: 0;
	-webkit-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;
	background: #f2f2f2;
	border-radius: 3px;
	cursor: pointer;
    
    background: #fff;
    background-color: #fff;
    color: #333;
}

/* Fix for IE 8 putting the arrows behind the select element. */
/*.lt-ie9 .dropdown { z-index: 1; }
.lt-ie9 .dropdown-select { z-index: -1; }
.lt-ie9 .dropdown-select:focus { z-index: 3; }*/

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

/* ----- 黒バージョン ----- */
.dropdown-dark {
	background: #444;
	border-color: #111 #0a0a0a black;
	background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
	background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
	background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
	background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.dropdown-dark:before { border-bottom-color: #aaa; }
.dropdown-dark:after { border-top-color: #aaa; }
.dropdown-dark .dropdown-select {
	color: #aaa;
	text-shadow: 0 1px black;
	/* Fallback for IE 8 */
	background: #444;
	color: #eee;
}
.dropdown-dark .dropdown-select:focus { color: #ccc; }
.dropdown-dark .dropdown-select > option {
	/*
    background: #444;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
    */
    
    
    background-color: #fff;
    color: #333;
    
}


/* ------------------------------------------------------------
    15：collapse コンポーネント（オープン・クローズ）
------------------------------------------------------------ */
.collapse i {
    transition: transform 0.2s ease-in-out;
}

.collapse-target {
    display: none;
    opacity: 0;
}

/*
.collapse-target.on {
    display: block;
    opacity: 1;
    animation: obj_fade_in 0.5s ease-in-out;
}
*/

.collapse-target.show {
    display: block;
    opacity: 1;
    animation: obj_fade_in 0.5s ease-in-out;
}

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


/* ------------------------------------------------------------
    16：強調
------------------------------------------------------------ */
strong { font-weight: bold; }
strong.red { color: #c02; }
strong.blue { color: #3b4df7; }
strong.green { color: #098256; }

strong.empL {
    font-size: larger;
    font-weight: bold;
}

strong.nb { font-weight: normal; }



/* ------------------------------------------------------------
    17：略称リストブロック（#abbr_list）
------------------------------------------------------------ */
#abbr_list .content > .layout_grid {
    display: table;
    width: 100%;
}

#abbr_list .content > .layout_grid > div {
    display: table-cell;
    vertical-align: top;
}

#abbr_list .content > .layout_grid > div.left {
    padding-right: 15px;
    width: 58%;
}

#abbr_list .content > .layout_grid > div.right {
    padding-left: 15px;
    width: 42%;
}

#abbr_list .content .block_sub_header > h4 { padding-top: 0; }
#abbr_list .content .block_sub_header > h4 > span { font-size: 1.2rem; }

#abbr_list .content ul.word_list:after { content: ''; display: block; clear: both; }

#abbr_list .content ul.word_list > li {
    padding: 4px;
    float: left;
}

#abbr_list .content ul.word_list > li dl {
    background-color: #727272;
    border-radius: 2px;
}

#abbr_list .content ul.word_list > li dl > dt {
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    padding: 5px 8px;
    border-right: 1px dotted #ccc;
    font-size: 1.2rem;
    color: #fff;
    color: #fffde7;
}

#abbr_list .content ul.word_list > li dl > dd {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 8px;
    font-size: 1.2rem;
    color: #fff;
}

#abbr_list .content .collapse-close-btn {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #e3e3e3;
}

/* ----- クラス版（ページ内に複数配置の場合） ----- */
.abbr_list .content > .layout_grid {
    display: table;
    width: 100%;
}

.abbr_list .content > .layout_grid > div {
    display: table-cell;
    vertical-align: top;
}

.abbr_list .content > .layout_grid > div.left {
    padding-right: 15px;
    width: 58%;
}

.abbr_list .content > .layout_grid > div.right {
    padding-left: 15px;
    width: 42%;
}

.abbr_list .content .block_sub_header > h4 { padding-top: 0; }
.abbr_list .content .block_sub_header > h4 > span { font-size: 1.2rem; }

.abbr_list .content ul.word_list:after { content: ''; display: block; clear: both; }

.abbr_list .content ul.word_list > li {
    padding: 4px;
    float: left;
}

.abbr_list .content ul.word_list > li dl {
    background-color: #727272;
    border-radius: 2px;
}

.abbr_list .content ul.word_list > li dl > dt {
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    padding: 5px 8px;
    border-right: 1px dotted #ccc;
    font-size: 1.2rem;
    color: #fff;
    color: #fffde7;
}

.abbr_list .content ul.word_list > li dl > dd {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 8px;
    font-size: 1.2rem;
    color: #fff;
}

.abbr_list .content .collapse-close-btn {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #e3e3e3;
}




/* ------------------------------------------------------------
    18：バックナンバー
------------------------------------------------------------ */
/* ----- ドロップダウンスタイル ----- */
.year_select_area {
    background-color: #eee;
    padding: 7px;
    display: inline-block;
}

.year_select_area.no_bg {
    background: none;
}

div.year_select_area label {
    vertical-align:  middle;
    font-size: 1rem;
    line-height: 1.4;
    padding: 10px;
    vertical-align: middle;
    background-color: #555;
    color: #fff;
}

div.year_select_area label.wrap {
    background: none;
    padding: 0;
}


#btn_year_link {
    font-size: 1rem;
    padding: 8px 10px;
}



/* ------------------------------------------------------------
    19：Acrobat Reader ヘルプ
------------------------------------------------------------ */
#acrobat_help {  }

#acrobat_help > .block_header_line { padding-top: 0; }

#acrobat_help .layout_grid { display: table; }

#acrobat_help .layout_grid > div.col {
    display: table-cell;
    vertical-align: middle;
}

#acrobat_help .layout_grid > div.col img { vertical-align: top; }

#acrobat_help .layout_grid > div.col.right { padding-left: 20px; }

#acrobat_help .layout_grid > div.col.right p {
    font-size: 1.2rem;
    line-height: 1.5;
}


/* ------------------------------------------------------------
    20：馬アイコン（マル外｜カク外｜マル地｜カク地）
------------------------------------------------------------ */
.horse_icon {
	font-size: 1rem;
    display: inline-block;
    font-weight: bold;
    margin-right: 0.2em;
    vertical-align: middle;
    margin-right: 4px;
}

.horse_icon > span {
    display: block;
    border: 2px solid #999;
    background-color: #fff;
    color: #555;
    
    text-align: center;
    line-height: 1.2;
    min-height: 16px;
    min-width: 18px;
    padding: 1px 0;
}

.horse_icon.maru > span { border-radius: 1.8em; }
.horse_icon.kaku > span {  }


/* ----- ブリンカーアイコン ----- */
.horse_icon.blinker {
    margin: 0;
    margin: 0 auto;
}

.horse_icon.blinker > span {
    padding: 1px 0 0 0;
    line-height: 1.4;
    background-color: #6b461a;
    color: #fff;
    border: 1px solid #5a3409;
    display: block;
    min-width: 16px;
    text-align: center;
}

/* --- 画像版 --- */
.horse_icon > img {
    vertical-align: middle;
    max-width: 14px;
}

.horse_icon.blinker > img {
    max-width: 15px;
}



/* ------------------------------------------------------------
    xx（特化型）：月アンカーブロック
------------------------------------------------------------ */
ul.year_link_list {
    background-color: #ebebeb;
	padding: 4px;
}

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

ul.year_link_list > li {
    padding: 2px;
    float: left;
    width: 16.667%;
}

ul.year_link_list > li > a {
    display: block;
	background-color: #fff;
	padding: 6px 8px;
	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.2rem;
	font-weight: bold;
	color: #06a;
    text-align: center;
}

/* --- current表示（バックナンバーコンポーネントで使用） --- */
ul.year_link_list > li.current > a {
    background-color: #444;
    color: #fff;
}

ul.year_link_list > li > a:hover { background-color: #fff8e1; }
ul.year_link_list > li.current > a:hover { background-color: #444; }

ul.year_link_list > li > a > i {
	margin-right: 0.3em;
	color: #188542;
}

ul.year_link_list > li.current > a > i { color: #fff; }


/*
ul.year_link_list > li.disabled > a {
    color: #999;
	border: 1px solid #e7e7e7;
	cursor: not-allowed;
}

ul.year_link_list > li.disabled > a:hover { background-color: #fff; }
ul.year_link_list > li.disabled > a i { color: #999; }
*/


/* --- 無効化状態 --- */
ul.year_link_list > li.disabled > span {
    display: block;
	background-color: #fff;
	padding: 6px 8px;
	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.2rem;
	font-weight: bold;
	color: #06a;
    text-align: center;
    
    color: #999;
	/*border: 1px solid #e7e7e7;*/
	cursor: not-allowed;
    display: block;
}

ul.year_link_list > li.disabled > span:hover {
    background-color: #fff;
}

ul.year_link_list > li.disabled > span i {
    color: #999;
    margin-right: 0.3em;
}





/* ------------------------------------------------------------
    xx（特化型）：ユニットリスト ソート
------------------------------------------------------------ */
ul.unit_list {
    
}

ul.unit_list.unit-reverse {
    /* - liを逆順に - */
}







/* ------------------------------------------------------------
    18：汎用クラス
------------------------------------------------------------ */
.mt100 { margin-top: 100px !important; }
.mt90 { margin-top: 90px !important; }
.mt80 { margin-top: 80px !important; }
.mt70 { margin-top: 70px !important; }
.mt60 { margin-top: 60px !important; }
.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; }
.mt0 { margin-top: 0 !important; }

/*.clearfix { overflow: hidden; }*/
.clearfix:after { content: ''; display: block; clear: both; }



/* --- 文章の折り返しを指定する --- */
.b_word {
    word-wrap:break-word;
    overflow-wrap:break-word;
}


/* ------------------------------------------------------------
    21：注釈・備考リスト
------------------------------------------------------------ */

ul.note_list {}

ul.note_list > li {
	display:table;
	margin-top:5px;
}

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

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

ul.note_list > li > span {
    display: table-cell;
    vertical-align: top;
    padding: 1px 0;
}

ul.note_list > li > span.cap { white-space: nowrap; }
ul.note_list > li > span.txt {}

ul.note_list.note_sm > li > span { font-size: 1.2rem; }
ul.note_list.note_xs > li > span { font-size: 1.1rem; }

ul.note_list.cap_pad_wide > li > span.cap { padding-right: 1em; }
ul.note_list.cap_pad_narrow > li > span.cap { padding-right: 0.5em; }

/* ----- div版 ----- */
ul.note_list > li > div {
    display: table-cell;
    vertical-align: top;
    padding: 1px 0;
}

ul.note_list > li > div.cap { white-space: nowrap; }
ul.note_list > li > div.txt {}

ul.note_list.note_sm > li > div { font-size: 1.2rem; }
ul.note_list.note_xs > li > div { font-size: 1.1rem; }

ul.note_list.cap_pad_wide > li > div.cap { padding-right: 1em; }
ul.note_list.cap_pad_narrow > li > div.cap { padding-right: 0.5em; }



/* ------------------------------------------------------------
    22：発売要項（競馬場・ウインズ・J-PLACE）
------------------------------------------------------------ */
/* ----- 発売要項 - 競馬場・ウインズ ----- */

.yoko_unit {  }

.yoko_unit > .sub_header { padding: 10px; }

.yoko_unit > .sub_header > span.inner {
    display: table;
    width: 100%;
}

.yoko_unit > .sub_header > span.inner > .cell {
    display: table-cell;
    vertical-align: middle;
}

.yoko_unit > .sub_header > span.inner > .cell.main {
    font-size: 1.5rem;
}

.yoko_unit > .sub_header > span.inner > .cell.opt {
    text-align: right;
}

.yoko_unit > .sub_header > span.inner > .cell.opt span.ex {
    margin-right: 20px;
    font-size: 1.2rem;
}

.yoko_unit > .sub_header > span.inner > .cell.opt .btn-def.btn-xs.btn-narrow {
    padding: 2px 6px;
    line-height: 1.4;
}

.yoko_unit > .sub_header > span.inner > .cell.opt .friday_icon {
    background-color: #fbc67a;
    color: #303030;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 1rem;
    
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    
    vertical-align: middle;
    line-height: 1.3;
    
    /*display: inline-block;*/
    padding: 2px 3px;
}

.yoko_unit ul.link_list > li > a {
    font-size: 1.3rem;
    position: relative;
    /*padding: 10px 8px;*/
    padding-right: 6px;
}


.yoko_unit ul.link_list > li > a > .inner > span.icon {
    /*padding-right: 2px;*/
    padding-right: 0.4em;
    /*vertical-align: top;*/
}

.yoko_unit ul.link_list > li > a > .friday_icon {
    display: block;
    position: absolute;
    right: 4px;
    right: 2px;
    top: 0;
    
    background-color: #fbc67a;
    color: #303030;
    padding: 2px 4px;
    border-radius: 0 0 3px 3px;
    font-size: 1rem;
    
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.yoko_unit ul.link_list > li > a > i {
    margin-right: 0.3em;
}

.yoko_unit ul.link_list > li > a span.opt {
    font-size: 1.1rem;
    /*margin-left: 0.2em;*/
    /*margin-top: 2px;*/
    
    font-size: 1rem;
    /*margin-top: 2px;*/
    margin-top: 0.1em;
}

.yoko_unit ul.link_list > li > a span.day {
    font-size: 1.1rem;
}


/* --- 発売要項 - J-PLACE --- */
.yoko_block ul.link_list > li > a span.day { font-size: 1.1rem; }
/*.yoko_block ul.link_list > li > a span.opt { font-size: 1.1rem; }*/

.yoko_block ul.link_list > li > a span.opt {
    font-size: 1rem;
    margin-top: 0.1em;
}


/* ------------------------------------------------------------
    23：よくあるご質問
------------------------------------------------------------ */
.panel.faq_unit {  }

.panel.faq_unit > .sub_header {
    background-color: #1b521f;
    color: #fff;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 6px 12px;
    
    font-size: 1.5rem;
    padding: 8px 12px;
}


.panel.faq_unit > .content > ul.qa_list {
    
}

.panel.faq_unit > .content > ul.qa_list > li {
    margin-top: 20px;
}

.panel.faq_unit > .content > ul.qa_list > li:first-child {
    margin-top: 0;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 6px;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading {
    display: table;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span {
    display: table-cell;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.icon {
    display: table-cell;
    vertical-align: middle;
    
    vertical-align: top;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.icon > span.inner {
    background-color: #188542;
    border-radius: 2px;
    display: block;
    padding: 4px 0;
    
    padding: 2px 0;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.icon > span.inner > span {
    font-weight: bold;
    color: #fff;
    padding: 0 10px;
    font-size: 1.3rem;
    line-height: 1.4;
    position: relative;
    background: #188542;
    white-space: nowrap;
    
    font-size: 1.8rem;
    line-height: 1.3;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.icon > span.inner > span:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(24, 133, 66, 0);
    border-left-color: #188542;
    border-width: 5px;
    margin-top: -5px;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.txt {
    font-size: 1.5rem;
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
    font-weight: bold;
    color: #444;
    line-height: 1.4;
    padding: 2px 0;
    padding-left: 15px;
    padding-left: 10px;
}

.panel.faq_unit > .content > ul.qa_list > li .qa_unit > .txt {
    margin-top: 10px;
}



/* ------------------------------------------------------------
    24：コロン（：）リスト
------------------------------------------------------------ */
dl.colon_list { display: table; }

dl.colon_list > dt {
    display: table-cell;
    vertical-align: top;
    position: relative;
    white-space: nowrap;
}

dl.colon_list > dt:after { content: '：' }

dl.colon_list > dt span.opt { font-size: 1.2rem; }

dl.colon_list > dd {
    display: table-cell;
    vertical-align: top;
}

dl.colon_list > dd span.opt { font-size: 1.2rem; }



/* ------------------------------------------------------------
    26：ブロックスキップ
------------------------------------------------------------ */
.block_skip {
    background-color: #222;
    color: #fff;
    display: block;
    position: relative;
    margin: 5px 0;
}

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

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

.block_skip > p > a {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    padding: 10px;
}

.block_skip > p > a i {
    margin-right: 0.3em;
}


/* ------------------------------------------------------------
    27：画像リスト
------------------------------------------------------------ */
.img_line_list {
    display: block;
    font-size: 0;
}

.img_line_list img {
    vertical-align: top;
    max-width: 100%;
}

.img_line_list.center { text-align: center; }/* - アイテム全体の中央揃え（並列配置のみ） - */

.img_line_list.v-center { align-items: center; }/* - アイテムの縦中央揃え - */
.img_line_list.v-bottom { align-items: flex-end; }/* - アイテムの縦下揃え - */

.img_line_list > .item {
    padding: 5px;
    text-align: center;
    font-size: 0;
    
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}

.img_line_list.v-center > .item { vertical-align: middle; }
.img_line_list.v-bottom > .item { vertical-align: bottom; }

.img_line_list.no-padding > .item { padding: 0; }/* - padding無し（並列配置） - */

/* - 均等配置 - */
.img_line_list.col5, .img_line_list.col4,
.img_line_list.col3, .img_line_list.col2,
.img_line_list.col1 { width: 100%; }

.img_line_list.col5.no-padding > .item,
.img_line_list.col4.no-padding > .item,
.img_line_list.col3.no-padding > .item,
.img_line_list.col2.no-padding > .item,
.img_line_list.col1.no-padding > .item { padding: 0; }/* - padding無し（均等配置） - */


/* - アイテムの縦中央揃え - */
.img_line_list.col5.v-center, .img_line_list.col4.v-center,
.img_line_list.col3.v-center, .img_line_list.col2.v-center,
.img_line_list.col1.v-center { align-items: center; }

/* - アイテムの縦下揃え - */
.img_line_list.col5.v-bottom, .img_line_list.col4.v-bottom,
.img_line_list.col3.v-bottom, .img_line_list.col2.v-bottom,
.img_line_list.col1.v-bottom { align-items: flex-end; }


.img_line_list.col5 > .item,
.img_line_list.col4 > .item,
.img_line_list.col3 > .item,
.img_line_list.col2 > .item,
.img_line_list.col1 > .item {
    padding: 5px;
    text-align: center;
    font-size: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: inline-block;
}

.img_line_list.col5 > .item { width: 20%; }
.img_line_list.col4 > .item { width: 25%; }
.img_line_list.col3 > .item { width: 33.333%; }
.img_line_list.col2 > .item { width: 50%; }
.img_line_list.col1 > .item { width: 100%; }


/* ----- 画像リスト用 ----- */
.img_line_list > .item .wrap {
    display: inline-block;
    max-width: 100%;
    font-size: 1.3rem;
}

.img_line_list > .item .img {
    width: 100%;/* for IE */
    max-width: 100%;
}

.img_line_list > .item .img img {
    max-width: 100%;
    height: auto;
}

/* --- アイテム内の.wrap要素をブロック（display:block）にする --- */
.img_line_list.img_block > .item > .wrap { display: block; }


/* --- 画像キャプション（上下） --- */
.img_line_list > .item .wrap .cap {
    text-align: left;
    margin-top: 0;
    margin-bottom: 5px;
    position: relative;
    
    word-wrap:break-word;
    overflow-wrap:break-word;
}

.img_line_list > .item .wrap .img + .cap {
    margin-top: 5px;
    margin-bottom: 0;
}

/* - キャプション縦マージン無し - */
.img_line_list.cap-nm > .item .wrap .cap { margin-bottom: 0; }
.img_line_list.cap-nm > .item .wrap .img + .cap { margin-top: 0; }

/* - キャプション水平方向揃え（全体：デフォルトは左揃え） - */
.img_line_list.cap-left > .item .wrap .cap { text-align: left; }
.img_line_list.cap-center > .item .wrap .cap { text-align: center; }
.img_line_list.cap-right > .item .wrap .cap { text-align: right; }

/* - キャプション水平方向揃え（個別） - */
.img_line_list > .item .wrap .cap.left { text-align: left; }
.img_line_list > .item .wrap .cap.center { text-align: center; }
.img_line_list > .item .wrap .cap.right { text-align: right; }

/* - キャプションフォントサイズ（全体） - */
.img_line_list.cap-sm > .item .wrap .cap { font-size: 1.2rem; }
.img_line_list.cap-xs > .item .wrap .cap { font-size: 1rem; }

/* - キャプションフォントサイズ（個別） - */
.img_line_list > .item .wrap .cap.cap-sm { font-size: 1.2rem; }
.img_line_list > .item .wrap .cap.cap-xs { font-size: 1rem; }

/* - キャプション垂直方向中央寄せ - */
/*
.img_line_list.cap-v-center > .item .wrap .cap > p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
*/

.img_line_list.cap-v-center > .item .wrap .cap {
    display: flex;
    align-items: center;
}

/* - キャプション垂直方向・水平方向 中央寄せ - */
.img_line_list.cap-center.cap-v-center > .item .wrap .cap {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* - キャプション垂直方向 中央寄せ・水平方向 右寄せ - */
.img_line_list.cap-right.cap-v-center > .item .wrap .cap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}






/*
.img_line_list.cap-v-center > .item .wrap .cap .v-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
*/



/* ------------------------------------------------------------
    28：データリスト
------------------------------------------------------------ */
ul.data_line_list { }
ul.data_line_list > li { margin-top: 2px; }
ul.data_line_list > li:first-child { margin-top: 0; }

ul.data_line_list > li .data_list_unit {
    display: table;
    width: 100%;
}

ul.data_line_list > li .data_list_unit > div {
    display: table-cell;
    vertical-align: middle;
}

/* - 見出しブロック - */
ul.data_line_list > li .data_list_unit > div.head {
    padding: 15px 10px;
    font-weight: bold;
    font-size: 1.4rem;
    position: relative;
    text-align: center;
    background-color: #eaeade;
    color: #444;
    border-right: 2px solid #dfdfd3;
    width: 100px;
    padding: 12px;
}

ul.data_line_list.nb_head > li .data_list_unit > div.head {
    font-weight: normal;
}

/* - コンテンツブロック - */
ul.data_line_list > li .data_list_unit > div.content {
    background-color: #f5f5f5;
    color: #444;
    border-left: 1px solid #fff;
    background-color: #f7f7f7;
    padding: 12px;
}

/* - 見出しブロック - ワイド版（140px） - */
ul.data_line_list.wide > li .data_list_unit > div.head { width: 140px; }

/* - 角丸オプション - */
ul.data_line_list.round > li:first-child .data_list_unit > div.head { border-top-left-radius: 4px; }
ul.data_line_list.round > li:last-child .data_list_unit > div.head { border-bottom-left-radius: 4px; }
ul.data_line_list.round > li:first-child .data_list_unit > div.content { border-top-right-radius: 4px; }
ul.data_line_list.round > li:last-child .data_list_unit > div.content { border-bottom-right-radius: 4px; }

/* - .cautionブロック色変更 - */
ul.data_line_list > li .data_list_unit > div.content .caution { background-color: #fff; }



/* - データリスト flex版
------------------------------------------------------------ */
ul.data_line_list.flex { width: 100%; }
ul.data_line_list.flex > li { margin-top: 2px; }
ul.data_line_list.flex > li:first-child { margin-top: 0; }

ul.data_line_list.flex > li .data_list_unit {
    display: flex;
    width: 100%;
}

ul.data_line_list.flex > li .data_list_unit > div {
    display: block;
    max-width: 100%;
    flex-grow: 0;
    flex-basis: auto;
}

/* - 見出しブロック - */
ul.data_line_list.flex > li .data_list_unit > div.head {
    padding: 15px 10px;
    font-weight: bold;
    font-size: 1.4rem;
    position: relative;
    text-align: center;
    background-color: #eaeade;
    color: #444;
    border-right: 2px solid #dfdfd3;
    /*width: 100px;*/
    width: auto;
    min-width: 130px;
    padding: 12px;
    
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    
    /* - 要素天地左右中央寄せ（flex入れ子） - */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

ul.data_line_list.flex > li .data_list_unit > div.head > span {  }

/* - head font-weight normal - */
ul.data_line_list.flex.nb_head > li .data_list_unit > div.head { font-weight: normal; }

/* - コンテンツブロック - */
ul.data_line_list.flex > li .data_list_unit > div.content {
    background-color: #f5f5f5;
    color: #444;
    border-left: 1px solid #fff;
    background-color: #f7f7f7;
    padding: 12px;
    
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    
    max-width: 100%;
}

/* - 角丸オプション - */
ul.data_line_list.round > li:first-child .data_list_unit > div.head { border-top-left-radius: 4px; }
ul.data_line_list.round > li:last-child .data_list_unit > div.head { border-bottom-left-radius: 4px; }
ul.data_line_list.round > li:first-child .data_list_unit > div.content { border-top-right-radius: 4px; }
ul.data_line_list.round > li:last-child .data_list_unit > div.content { border-bottom-right-radius: 4px; }

/* - .cautionブロック色変更 - */
ul.data_line_list > li .data_list_unit > div.content .caution { background-color: #fff; }


/* ------------------------------------------------------------
    29：タブ切り替え
------------------------------------------------------------ */
.tab_content { display: none; }

.tab_content.on {
    display: block;
    animation: obj_fade_in 0.3s ease-in-out;
}



/* ------------------------------------------------------------
    30：画像リスト（flex）
------------------------------------------------------------ */
.img_flex_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* - 1枚センタリング - */
.img_flex_list.center { justify-content: center; }

/* - 縦配置 - */
.img_flex_list.v-bottom { align-items: flex-end; }
.img_flex_list.v-center { align-items: center; }

/*.img_flex_list.wrap { flex-wrap: wrap; }*/

/* - アイテム - */
.img_flex_list > div { margin-bottom: 30px; /*text-align: center;*/ }

.img_flex_list.col2 > div {
	width: 50%;
	flex-basis: calc((100% - 30px) / 2);
	max-width: calc((100% - 30px) / 2);
    margin-bottom: 30px;
}

.img_flex_list.col3 > div {
	width: 33.333%;
	flex-basis: calc((100% - 40px) / 3);
	max-width: calc((100% - 40px) / 3);
    margin-bottom: 20px;
}

.img_flex_list.col4 > div {
	width: 25%;
	flex-basis: calc((100% - 45px) / 4);
	max-width: calc((100% - 45px) / 4);
    margin-bottom: 15px;
}

.img_flex_list.col5 > div {
	width: 20%;
	flex-basis: calc((100% - 60px) / 5);
	max-width: calc((100% - 60px) / 5);
    margin-bottom: 15px;
}

.img_flex_list > div.empty { height: 0; margin: 0; }

.img_flex_list > div a { display: block; text-decoration: none; color: #333; }

.img_flex_list.nowrap { flex-wrap: nowrap; }
.img_flex_list.nowrap > div { margin-bottom: 0; }

.img_flex_list > div .img { text-align: center; }
.img_flex_list > div .img img { vertical-align: top; max-width: 100%; }

/* --- 画像キャプション --- */
.img_flex_list > div .cap { line-height: 1.4; }
.img_flex_list > div .img + .cap { margin-top: 5px; }
.img_flex_list > div .cap + .img { margin-top: 5px; }

.no-touch .img_flex_list > div a:hover .cap,
.img_flex_list > div a:focus .cap { text-decoration: underline; }

.img_flex_list > div a .cap i { margin-right: 0.3em; }

.img_flex_list > div .cap { text-align: left; }
.img_flex_list.cap-center > div .cap { text-align: center; }
.img_flex_list.cap-right > div .cap { text-align: right; }

/* - キャプション フォントサイズ - */
.img_flex_list.cap-lg > div .cap { font-size: 1.4rem;}
.img_flex_list.cap-sm > div .cap { font-size: 1.2rem;}
.img_flex_list.cap-xs > div .cap { font-size: 1.1rem;}

/* - キャプション背景 - */
.img_flex_list.cap-bg > div .cap { background-color: #333; color: #fff; padding: 8px 6px; transition: all 0.3s ease-in-out; }
.img_flex_list.cap-bg > div .img + .cap { margin-top: 0; }
.img_flex_list.cap-bg > div .cap + .img { margin-top: 0; }

.no-touch .img_flex_list.cap-bg > div a:hover .cap,
.img_flex_list.cap-bg > div a:focus .cap { background-color: #ddd; color: #333; text-decoration: none; }

/* - キャプション縦センター - */
.img_flex_list.cap-v-center > div .cap { display: flex; align-items: center; }
.img_flex_list.cap-v-center.cap-center > div .cap { justify-content: center; }
.img_flex_list.cap-v-center.cap-right > div .cap { justify-content: flex-end; }



/* ------------------------------------------------------------
    31：flexアイテムリスト
------------------------------------------------------------ */
.item_flex_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* - 1列センタリング - */
.item_flex_list.center { justify-content: center; }

/* - 縦配置 - */
.item_flex_list.v-bottom { align-items: flex-end; }
.item_flex_list.v-center { align-items: center; }

/* - アイテム - */
.item_flex_list > div { margin-bottom: 30px; /*text-align: center;*/ }

.item_flex_list.col2 > div {
	width: 50%;
	flex-basis: calc((100% - 40px) / 2);
	max-width: calc((100% - 40px) / 2);
    margin-bottom: 30px;
}

.item_flex_list.col3 > div {
	width: 33.333%;
	flex-basis: calc((100% - 60px) / 3);
	max-width: calc((100% - 60px) / 3);
    margin-bottom: 30px;
}

.item_flex_list.col4 > div {
	width: 25%;
	flex-basis: calc((100% - 90px) / 4);
	max-width: calc((100% - 90px) / 4);
    margin-bottom: 30px;
}

.item_flex_list.col5 > div {
	width: 20%;
	flex-basis: calc((100% - 120px) / 5);
	max-width: calc((100% - 120px) / 5);
    margin-bottom: 30px;
}

.item_flex_list > div.empty { height: 0; margin: 0; }
.item_flex_list > div a { display: block; text-decoration: none; color: #333; }
.item_flex_list > div img { vertical-align: top; max-width: 100%; }


/* ------------------------------------------------------------
    32：AppStore/GooglePlayリンク
------------------------------------------------------------ */
a.sp-os-check.off { display: none; }




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

	979px以下

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

@media screen and ( max-width : 979px ) {
	
	#contentsBody {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 10px 40px 10px;
	}
	
	/* - コンテンツヘッダーエリア
	---------------------------------------------------------------------- */
	div.header_line { padding: 0 10px; }
	
    
    /* - 22：発売要項（競馬場・ウインズ・J-PLACE）
	---------------------------------------------------------------------- */
    .yoko_unit ul.link_list.multi.div4 > li { width: 33.33%; }
    
    /* --- 発売要項 - J-PLACE --- */
    .yoko_block ul.link_list.multi.div4 > li { width: 33.33%; }
    
}



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

	939px以下

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

@media screen and ( max-width : 939px ) {
    
    /* - 表スクロール（large device）
    ---------------------------------------------------------------------- */
    div.scr-lg { width: 100%; overflow-x: auto; }
    div.scr-lg > table.basic { width: 940px; }
    div.scr-lg .scr_caution { display: block; }
    
    
    /* - 競馬メニュー 関連メニュー
    -------------------------------------------------- */
    #keiba_related_menu { padding: 10px; }
    #keiba_related_menu > div.content { max-width: 100%; }
    #keiba_related_menu > div.content > ul {}
    #keiba_related_menu > div.content > ul > li {}
    

    /* - 30：画像リスト（flex）
	---------------------------------------------------------------------- */
    .img_flex_list.col5 > div {
        width: 25%;
        flex-basis: calc((100% - 60px) / 4);
        max-width: calc((100% - 60px) / 4);
        margin-bottom: 20px;
    }

    .img_flex_list > div.empty { margin: 0; }


    /* - 31：flexアイテムリスト
	---------------------------------------------------------------------- */
    .item_flex_list.col2 > div,
    .item_flex_list.col3 > div,
    .item_flex_list.col4 > div,
    .item_flex_list.col5 > div {
        width: 50%;
        flex-basis: calc((100% - 30px) / 2);
        max-width: calc((100% - 30px) / 2);
    }

    .item_flex_list > div.empty { margin: 0; }
    
}


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

	768px以下

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

@media screen and ( max-width : 767px ) {
	
    /* - 競馬メニュー 関連メニュー
    -------------------------------------------------- */
    #keiba_related_menu > div.content {
        background-color: #546E7A;
        padding: 5px 10px;
        border-radius: 4px;
    }
    
    #keiba_related_menu > div.content > ul {
        display: none;
        border-top: 1px solid #455A64;
    }
    
    #keiba_related_menu.on > div.content > ul { display: block; }
    
    #keiba_related_menu > div.content > p.menu_btn { display: block; }
    #keiba_related_menu.on > div.content > p.menu_btn { display: block; }
    
    #keiba_related_menu > div.content > p.menu_btn.on > a i.fa.fa-chevron-circle-down { display: none; }
    #keiba_related_menu > div.content > p.menu_btn.on > a i.fa.fa-chevron-circle-up { display: inline-block; }
    
    #keiba_related_menu > div.content > p.menu_btn > a:hover {}
    
    #keiba_related_menu > div.content > ul > li {
        display: block;
        float: none;
        margin-left: 0;
    }
    
    /* ----- 見出し ----- */
    .contents_header.opt > .inner > div.opt { padding: 8px; }
    
    /* ----- リンクリスト：複数カラム（2列・3列・4列・5列） ----- */
	/*ul.link_list.multi.div2 > li { width: 50%; }*/
    ul.link_list.multi.div2 > li { width: 100%; }
	ul.link_list.multi.div3 > li { width: 33.33%; }
	ul.link_list.multi.div4 > li { width: 25%; }
	ul.link_list.multi.div5 > li { width: 33.33%; }
    
    /* ----- リンクリスト（div版）：複数カラム（2列・3列・4列・5列） ----- */
	/*div.link_list.multi.div2 > div { width: 50%; }*/
    div.link_list.multi.div2 > div { width: 100%; }
	div.link_list.multi.div3 > div { width: 33.33%; }
	div.link_list.multi.div4 > div { width: 25%; }
	div.link_list.multi.div5 > div { width: 33.33%; }
	
    /* ----- タブ ----- */
    ul.nav.tab { display: block; }
    
    ul.nav.tab > li {
        display: block;
        border-left: none;
        border-bottom: 1px solid #fff;
    }
    
    ul.nav.tab > li.current > a:after { display: none; }
    
    ul.nav.tab.auto {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
	
    ul.nav.tab.auto > li {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-left: 1px solid #fff;
        border-bottom: none;
    }
    
    ul.nav.tab.auto > li.current > a:after { display: block; }
    
    
    /* ----- タブ（div版） ----- */
    div.nav.tab { display: block; }
    
    div.nav.tab > div {
        display: block;
        border-left: none;
        border-bottom: 1px solid #fff;
    }
    
    div.nav.tab > div.current > a:after { display: none; }
    
    div.nav.tab.auto {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
	
    div.nav.tab.auto > div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border-left: 1px solid #fff;
        border-bottom: none;
    }
    
    div.nav.tab.auto > div.current > a:after { display: block; }
    
    
    /* ---- カプセルメニュー ---- */
    ul.nav.pills { display: block; }
    ul.nav.pills > li { display: block; }
    
    /* ---- カプセルメニュー（div版） ---- */
    div.nav.pills { display: block; }
    div.nav.pills > div { display: block; }
    
    /* ---- カプセルメニュー（flap） ---- */
    div.nav.pills.flap.div2 > div { width: 50% }
    div.nav.pills.flap.div3 > div { width: 33.333% }
    div.nav.pills.flap.div4 > div { width: 50% }
    div.nav.pills.flap.div5 > div { width: 33.333% }
    div.nav.pills.flap.div6 > div { width: 25% }
    
    
    /* - 略称リストブロック（#abbr_list）
    ---------------------------------------------------------------------- */
    #abbr_list .content > .layout_grid > div.left { width: 50%; }
    #abbr_list .content > .layout_grid > div.right { width: 50%; }
    
    /* --- クラス版 --- */
    .abbr_list .content > .layout_grid > div.left { width: 50%; }
    .abbr_list .content > .layout_grid > div.right { width: 50%; }
    
    
    /* - 表
    ---------------------------------------------------------------------- */
    div.scr-md { width: 100%; overflow-x: auto; }
    div.scr-md > table.basic { width: 768px; }
    div.scr-md .scr_caution { display: block; }
    div.scr-sp .scr_caution { display: none; }
    
    
    /* - 月アンカーブロック
    ---------------------------------------------------------------------- */
    ul.year_link_list > li { width: 25%; }
    
    
    /* - バックナンバー
    ---------------------------------------------------------------------- */
    .year_select_area { padding: 0; }
    
    
    /* - 22：発売要項（競馬場・ウインズ・J-PLACE）
	---------------------------------------------------------------------- */
    .yoko_unit > .sub_header > span.inner {
        width: 100%;
        display: block;
    }

    .yoko_unit > .sub_header > span.inner > .cell { display: block; }
    
    .yoko_unit > .sub_header > span.inner > .cell.opt {
        margin-top: 5px;
        text-align: left;
        padding-top: 8px;
        border-top: 1px dashed #222;
    }
    
    
    /* - 27：画像リスト
	---------------------------------------------------------------------- */
    /*.img_line_list.col5 > .item { width: 25%; }*/
    .img_line_list.col5 > .item { width: 33.33%; }
    .img_line_list.col4 > .item { width: 33.33%; }
    
    
    /* - 28：データリスト FLEX版
	---------------------------------------------------------------------- */
    ul.data_line_list.flex > li .data_list_unit { display: block; }
    ul.data_line_list.flex > li .data_list_unit > div { display: block; }
    
    ul.data_line_list.flex > li .data_list_unit > div.head {
        min-width: inherit !important;
        display: block;
        text-align: left;
        
        width: auto;
        border-right: none;
        border-bottom: 2px solid #dfdfd3;
        text-align: left;
        padding: 10px;
        font-size: 1.3rem;
        padding: 6px 10px;
    }
    
    ul.data_line_list.flex > li .data_list_unit > div.head br.sp { display: none; }
    

    /* - 30：画像リスト（flex）
	---------------------------------------------------------------------- */
    .img_flex_list.col4 > div,
    .img_flex_list.col5 > div {
        width: 33.333%;
        flex-basis: calc((100% - 45px) / 3);
        max-width: calc((100% - 45px) / 3);
        margin-bottom: 15px;
    }

    .img_flex_list > div.empty { margin: 0; }


    /* - 31：flexアイテムリスト
	---------------------------------------------------------------------- */
    /*.item_flex_list.col3 > div,
    .item_flex_list.col4 > div,
    .item_flex_list.col5 > div {
        width: 50%;
        flex-basis: calc((100% - 30px) / 2);
        max-width: calc((100% - 30px) / 2);
    }

    .item_flex_list > div.empty { margin: 0; }
    */

    .item_flex_list { display: block; }
    .item_flex_list.col2 > div,
    .item_flex_list.col3 > div,
    .item_flex_list.col4 > div,
    .item_flex_list.col5 > div { width: 100%; flex-basis: auto; max-width: 100%; }
    .item_flex_list > div.empty { height: 0; margin: 0; }

}



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

	639px以下

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

@media screen and ( max-width : 639px ) {
	
    /* - コンテンツヘッダーエリア
	---------------------------------------------------------------------- */
    div.header_line > div.content > h1 > span.inner > span.txt { line-height: 1.2; }
    div.header_line > div.content > h1 > span.inner > span.txt > span.opt { line-height: 1.5; }
    
    /*ul.link_list.multi.div5 > li { width: 50%; }*/
	
    /* ----- リンクリスト：複数カラム（2列・3列・4列・5列） ----- */
    ul.link_list.multi.div2 > li { width: 100%; }
    ul.link_list.multi.div3 > li { width: 50%; }
    ul.link_list.multi.div4 > li { width: 50%; }
    ul.link_list.multi.div5 > li { width: 50%; }
    
    /* ----- リンクリスト（div版）：複数カラム（2列・3列・4列・5列） ----- */
    div.link_list.multi.div2 > div { width: 100%; }
    div.link_list.multi.div3 > div { width: 50%; }
    div.link_list.multi.div4 > div { width: 50%; }
    div.link_list.multi.div5 > div { width: 50%; }
    
    
    /* ----- タブ ----- */
    ul.nav.tab > li > a,
    ul.nav.tab.auto > li > a { padding: 8px; }
    
    ul.nav.tab.auto { display: block; }
    
    ul.nav.tab.auto > li {
        display: block;
        border-left: none;
        border-bottom: 1px solid #fff;
        float: none;
    }
    
    ul.nav.tab.auto > li.current > a:after { display: none; }
    
    
    /* ----- タブ（div版） ----- */
    div.nav.tab > div > a,
    div.nav.tab.auto > div > a { padding: 8px; }
    
    div.nav.tab.auto { display: block; }
    
    div.nav.tab.auto > div {
        display: block;
        border-left: none;
        border-bottom: 1px solid #fff;
        float: none;
    }
    
    div.nav.tab.auto > div.current > a:after { display: none; }
    
    
    /* ---- カプセルメニュー（flap） ---- */
    div.nav.pills.flap.div2 > div { width: 50% }
    div.nav.pills.flap.div3 > div { width: 50% }
    div.nav.pills.flap.div4 > div { width: 50% }
    div.nav.pills.flap.div5 > div { width: 50% }
    div.nav.pills.flap.div6 > div { width: 50% }
    
    
    /* - 表
    ---------------------------------------------------------------------- */
    div.scr { width: 100%; overflow-x: auto; }
    div.scr > table.basic { width: 768px; }
    
    .scr_caution { display: block; }
    
    div.scr-sp .scr_caution { display: none; }
    
    
    /* - 略称リストブロック（#abbr_list）
    ---------------------------------------------------------------------- */
    #abbr_list .content > .layout_grid { display: block; }
    #abbr_list .content > .layout_grid > div { display: block; }
    
    #abbr_list .content > .layout_grid > div.left {
        width: auto;
        padding-right: 0:
    }

    #abbr_list .content > .layout_grid > div.right {
        width: auto;
        padding-left: 0;
        margin-top: 20px;
    }
    
    /* --- クラス版 --- */
    .abbr_list .content > .layout_grid { display: block; }
    .abbr_list .content > .layout_grid > div { display: block; }
    
    .abbr_list .content > .layout_grid > div.left {
        width: auto;
        padding-right: 0:
    }

    .abbr_list .content > .layout_grid > div.right {
        width: auto;
        padding-left: 0;
        margin-top: 20px;
    }
    
    
    /* - バックナンバー
    ---------------------------------------------------------------------- */
    .year_select_area { padding: 0; }
    
    
    /* - Acrobat Reader ヘルプ
    ---------------------------------------------------------------------- */
    #acrobat_help .layout_grid { display: block; }
    #acrobat_help .layout_grid > div.col { display: block; }
    
    #acrobat_help .layout_grid > div.col.right {
        padding-left: 0;
        padding-top: 10px;
    }
    
    
    /* - 22：発売要項（競馬場・ウインズ・J-PLACE）
	---------------------------------------------------------------------- */
    .yoko_unit ul.link_list.multi.div4 > li { width: 50%; }
    
    /* --- 発売要項 - J-PLACE --- */
    .yoko_block ul.link_list.multi.div4 > li { width: 50%; }
    
    
    /* - 23：よくあるご質問
	---------------------------------------------------------------------- */
    .panel.faq_unit > .content > ul.qa_list > li .qa_unit > .qa_header > .heading > span.txt {
        font-size: 1.4rem;
        padding-left: 10px;
        line-height: 1.3;
    }
    
    
    /* - 27：画像リスト
	---------------------------------------------------------------------- */
    /*.img_line_list.col5 > .item { width: 33.33%; }*/
    .img_line_list.col5 > .item { width: 50%; }
    .img_line_list.col4 > .item { width: 50%; }
    .img_line_list.col3 > .item { width: 50%; }
    
    
    /* - 28：データリスト
    ------------------------------------------------------------ */
    ul.data_line_list > li { margin-top: 10px; }
    ul.data_line_list > li .data_list_unit { display: block; }
    ul.data_line_list > li .data_list_unit > div { display: block; }
    
    ul.data_line_list > li .data_list_unit > div.head {
        width: auto;
        border-right: none;
        border-bottom: 2px solid #dfdfd3;
        text-align: left;
        padding: 10px;
        font-size: 1.3rem;
        padding: 6px 10px;
    }
    
    ul.data_line_list.wide > li .data_list_unit > div.head { width: auto; }
    
    ul.data_line_list > li .data_list_unit > div.head br.sp { display: none; }
    
    ul.data_line_list.round > li:first-child .data_list_unit > div.head { border-top-left-radius: 0; }
    ul.data_line_list.round > li:last-child .data_list_unit > div.head { border-bottom-left-radius: 0; }
    ul.data_line_list.round > li:first-child .data_list_unit > div.content { border-top-right-radius: 0; }
    ul.data_line_list.round > li:last-child .data_list_unit > div.content { border-bottom-right-radius: 0; }
    

    /* - 30：画像リスト（flex）
	---------------------------------------------------------------------- */
    .img_flex_list.col3 > div,
    .img_flex_list.col4 > div,
    .img_flex_list.col5 > div {
        width: 50%;
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
        margin-bottom: 20px;
    }

    .img_flex_list > div.empty { margin: 0; }


    /* - 31：flexアイテムリスト
	---------------------------------------------------------------------- */
    .item_flex_list { display: block; }
    .item_flex_list.col2 > div,
    .item_flex_list.col3 > div,
    .item_flex_list.col4 > div,
    .item_flex_list.col5 > div { width: 100%; flex-basis: auto; max-width: 100%; }
    .item_flex_list > div.empty { height: 0; margin: 0; }
    
}


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

	479px以下

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

@media screen and ( max-width : 479px ) {
	
	/* - 見出し
	---------------------------------------------------------------------- */
    .contents_header.opt > .inner { display: block; }
    
    .contents_header.opt > .inner > div { display: block; }
    
    .contents_header.opt > .inner > div.main > h1,
    .contents_header.opt > .inner > div.main > h2,
    .contents_header.opt > .inner > div.main > h3,
    .contents_header.opt > .inner > div.main > h4,
    .contents_header.opt > .inner > div.main > h5,
    .contents_header.opt > .inner > div.main > h6 { padding: 10px 8px; }
    
    .contents_header.opt > .inner > div.opt {
        text-align: left;
        border-top: 1px dashed #ddd;
        font-size: 1.1rem;
        padding: 8px;
    }
    
    
    /* - cautionブロック（注意書きなど）
	---------------------------------------------------------------------- */
	div.caution { padding: 10px; }
	
	
	/* - 「・」リスト
	---------------------------------------------------------------------- */
	ul.dot_list > li > span { font-size: 1.2rem; }
	ul.dot_list.sm > li > span { font-size: 1.1rem; }
    
    ul.dot_list > li > div { font-size: 1.2rem; }
	ul.dot_list.sm > li > div { font-size: 1.1rem; }
	
	
    /* - リンクリスト
	---------------------------------------------------------------------- */
	ul.link_list.multi > li { float: none; }
	
	ul.link_list.multi.div2 > li { width: 100%; }
	ul.link_list.multi.div3 > li { width: 100%; }
	ul.link_list.multi.div4 > li { width: 100%; }
	ul.link_list.multi.div5 > li { width: 100%; }
    
    ul.link_list.center > li > a { text-align: left; }
    ul.link_list.center > li > a > .inner { margin: 0; }
    
    /* - リンクリスト（div版）
	---------------------------------------------------------------------- */
	div.link_list.multi > div { float: none; }
	
	div.link_list.multi.div2 > div { width: 100%; }
	div.link_list.multi.div3 > div { width: 100%; }
	div.link_list.multi.div4 > div { width: 100%; }
	div.link_list.multi.div5 > div { width: 100%; }
    
    div.link_list.center > div > a { text-align: left; }
    div.link_list.center > div > a > .inner { margin: 0; }
    
	
    /* - 表
    ---------------------------------------------------------------------- */
    div.scr-sp { width: 100%; overflow-x: auto; }
    div.scr-sp > table.basic { width: 480px; }
    div.scr-sp .scr_caution { display: block; }
    
    
    /* - パネル
    ---------------------------------------------------------------------- */
    .panel > .content { padding: 10px; }
    
    
    /* - 略称リストブロック（#abbr_list）
    ---------------------------------------------------------------------- */
    #abbr_list .content .block_sub_header > h4 { font-size: 1.3rem; }
    
    #abbr_list .content ul.word_list > li { padding: 4px 2px; }
    
    #abbr_list .content ul.word_list > li dl > dt {
        font-size: 1.1rem;
        padding: 4px 8px;
    }
    
    #abbr_list .content ul.word_list > li dl > dd {
        font-size: 1.1rem;
        padding: 4px 8px;
    }
    
    #abbr_list .content .collapse-close-btn { padding-top: 10px; }
    
    /* --- クラス版 --- */
    .abbr_list .content .block_sub_header > h4 { font-size: 1.3rem; }
    
    .abbr_list .content ul.word_list > li { padding: 4px 2px; }
    
    .abbr_list .content ul.word_list > li dl > dt {
        font-size: 1.1rem;
        padding: 4px 8px;
    }
    
    .abbr_list .content ul.word_list > li dl > dd {
        font-size: 1.1rem;
        padding: 4px 8px;
    }
    
    .abbr_list .content .collapse-close-btn { padding-top: 10px; }
    
    
    /* - 22：発売要項（競馬場・ウインズ・J-PLACE）
	---------------------------------------------------------------------- */
    .yoko_unit ul.link_list.multi.div4 > li { width: 100%; }
    .yoko_unit ul.link_list > li > a { font-size: 1.4rem; }
    /*.yoko_unit ul.link_list > li > a span.opt { font-size: 1.2rem; }*/
    
    .yoko_unit ul.link_list > li > a span.opt.block,
    .yoko_block ul.link_list > li > a span.opt.block {
        display: inline;
        font-size: 1.1rem;
        margin-top: 0;
        padding-left: 5px;
        margin-left: 5px;
        border-left: 1px dashed #ddd;
    }
    
    .yoko_unit ul.link_list > li > a span.day,
    .yoko_block ul.link_list > li > a span.day { font-size: 1.2rem; }
    
    
    /* --- 発売要項 - J-PLACE --- */
    .yoko_block ul.link_list.multi.div4 > li { width: 100%; }
    
    
    /* - 23：よくあるご質問
	---------------------------------------------------------------------- */
    .panel.faq_unit > .content > ul.qa_list > li .qa_unit > .txt { font-size: 1.2rem; }
    
    
    /* - 24：コロン（：）リスト
    -------------------------------------------------- */
    dl.colon_list { display: block; }
    
    dl.colon_list > dt {
        white-space: normal;
        display: block;
        padding: 4px 8px;
        background-color: #e3e3e3;
    }
    
    dl.colon_list > dt:after { display: none; }
    
    dl.colon_list > dt span.opt.flap { display: block; }
    
    dl.colon_list > dd {
        display: block;
        padding: 4px;
    }
    
    dl.colon_list > dd span.opt.flap { display: block; }
    
    
    /* - 26：ブロックスキップ
    -------------------------------------------------- */
    .block_skip > p > a {
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.4;
    }
    
    /* - 27：画像リスト
	---------------------------------------------------------------------- */
    .img_line_list.col5 > .item { width: 100%; }
    .img_line_list.col4 > .item { width: 100%; }
    .img_line_list.col3 > .item { width: 100%; }
    .img_line_list.col2 > .item { width: 100%; }
    

    /* - 30：画像リスト（flex）
	---------------------------------------------------------------------- */
    .img_flex_list { display: block; }
	/*.img_flex_list > div { margin-bottom: 30px; }*/

    .img_flex_list.col2 > div,
    .img_flex_list.col3 > div,
    .img_flex_list.col4 > div,
    .img_flex_list.col5 > div { width: 100%; flex-basis: auto; max-width: 100%; margin-bottom: 20px; }
    
    .img_flex_list > div.empty { height: 0; margin: 0; }

}


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

	359px以下

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

@media screen and ( max-width : 359px ) {
	
    /* - 表
    ------------------------------------------------------------ */
    /* --- 縦padding狭い --- */
    table.basic.narrow tbody > tr > th,
    table.basic.narrow tbody > tr > td { padding: 5px; }
        
    /* --- 縦横padding狭い --- */
    table.basic.narrow-xy thead > tr > th { padding: 5px; }
    table.basic.narrow-xy tfoot > tr > th { padding: 5px; }
    table.basic.narrow-xy tbody > tr > th,
    table.basic.narrow-xy tbody > tr > td { padding: 5px; }
    
    
    /* - 22：発売要項（競馬場・ウインズ・J-PLACE）
	---------------------------------------------------------------------- */
    .yoko_unit > .sub_header > span.inner > .cell.main { font-size: 1.4rem; }
    
    .yoko_unit ul.link_list > li > a span.opt.block,
    .yoko_block ul.link_list > li > a span.opt.block {
        display: block;
        margin-top: 0.1em;
        padding-left: 0;
        margin-left: 0;
        border-left: none;
    }
    
    /* - 26：ブロックスキップ
    -------------------------------------------------- */
    .block_skip > p > a {
        text-align: left;
        font-size: 1.3rem;
        line-height: 1.4;
    }
    
    
    /* - 27：画像リスト
	---------------------------------------------------------------------- */
    /*.img_line_list.col5 > .item { width: 100%; }
    .img_line_list.col4 > .item { width: 100%; }
    .img_line_list.col3 > .item { width: 100%; }
    .img_line_list.col2 > .item { width: 100%; }*/
}