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

	フリーエリア・緊急エリア カスタマイズ用

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


/* - 「緊急のお知らせ」エリア
---------------------------------------------------------------------- */
#emergency { margin-top: 20px; }

#emergency > .title {
    width: 940px;
    margin: 0 auto;
    background-color: #B71C1C;
    color: #fff;
    font-size: 2.4rem;
    padding: 5px;
    text-align: center;
    color: #FFF9C4;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

#emergency > .title i { margin-right: 0.3em; }

#emergency > .content {
    width: 940px;
    margin: 0 auto;
    border: 4px solid #B71C1C;
    border-top: none;
    padding: 15px;
}

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

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

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

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

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

#emergency > .content > ul > li > a span.inner > span {
    display: table-cell;
    vertical-align: top;
}

#emergency > .content > ul > li > a span.inner > span.icon { padding-right: 0.4em; }
#emergency > .content > ul > li > a span.inner > span.icon i { color: #268300; }

.no-touch #emergency > .content > ul > li > a:hover span.inner > span.txt { text-decoration: underline; }

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


/* --- 青枠 --- */
#emergency.bluewaku > .title { background-color: #3b4df7; }
#emergency.bluewaku > .content { border: 4px solid #3b4df7; }
#emergency.bluewaku.narrow > .content { padding: 8px; }
#emergency.bluewaku > .content p.title { color: #3b4df7; }
#emergency.bluewaku > .content p > strong.nb { font-weight: normal; }

/* --- 赤枠（見出し無し） --- */
#emergency.redwaku > .title { background-color: #B71C1C; }
#emergency.redwaku > .content { border: 4px solid #B71C1C; }
#emergency.redwaku.narrow > .content { padding: 8px; }
#emergency.redwaku > .content p.title { color: #B71C1C; }
#emergency.redwaku > .content p > strong.nb { font-weight: normal; }

/* --- 青枠2(通常の見出しありの赤枠と見出し無しの青枠併記用) --- */
#emergency2 { margin-top: 0; padding: 5px 10px 15px 10px; }

#emergency2 > .content {
    width: 100%;
    margin: 0 auto;
    border: 4px solid #3b4df7;
    border-top: none;
    padding: 15px;
}

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

#emergency2.bluewaku > .title { background-color: #3b4df7; }
#emergency2.bluewaku > .content { border: 4px solid #3b4df7; }
#emergency2.bluewaku.narrow > .content { padding: 12px; }
#emergency2.bluewaku > .content p.title { color: #3b4df7; }
#emergency2.bluewaku > .content > p { line-height: 1.6; }
#emergency2.bluewaku > .content p > strong.nb { font-weight: normal; }


/* - 上部フリーエリア（クイックメニュー下）（#free_area）
---------------------------------------------------------------------- */
#free_area > .content {
    width: 940px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f5f5f5;/* --- 仮背景色 --- */
}




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






.race_info {
	max-width: 940px;
	margin: 0 auto;
	margin-top: 20px;
}

.race_info > .inner {
	width: 100%;
	display: table;
	table-layout: fixed;
}

.race_info > .inner > .header {
	display: table-cell;
	position: relative;
	background: #e4a346;
	background-color: #efb571;
	color: #fff;
	color: #6a0606;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
	vertical-align: middle;
	width: 180px;

}

.race_info > .inner > .header > span {
	left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(228, 163, 70, 0);
    border-width: 10px;
    margin-top: -10px;
    border-color: rgba(207, 64, 20, 0);
    border-color: rgba(165, 104, 17, 0);
    border-left-color: #e4a346;
	border-left-color: #efb571;
}


.race_info > .inner > .txt {
	display: table-cell;
	padding-left: 20px;
	vertical-align: middle;
	border: 1px dotted #ccc;
	border: 1px solid #ddd;
	border-left: none;
	padding: 10px;
	padding: 8px;
	padding-left: 20px;
	background-color: #f9eedf;
	box-sizing: border-box;
}

.race_info > .inner > .txt > p {
	font-size: 1.3rem;
	line-height: 1.4;
}


.race_info > .inner > .num_date {
	display: table-cell;
	padding-left: 20px;
	vertical-align: middle;
	border: 1px dotted #ccc;
	border: 1px solid #ddd;
	border-left: none;
	padding: 10px;
	padding: 8px;
	padding-left: 20px;
	background-color: #f9eedf;
	box-sizing: border-box;
}

.race_info > .inner > .num_date > ul {

	overflow: hidden;
}

.race_info > .inner > .num_date > ul:after {
	content: '';
	display: block;
	clear: both;
}

.race_info > .inner > .num_date > ul > li {
	float: left;
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: bold;
	margin-right: 10px;
}

.race_info > .inner > .num_date > ul > li > span {
	margin-right: 10px;
	font-weight: normal;
	font-size: 1.2rem;
}


.race_info > .inner > .num_date > p {
	font-size: 108%;
	font-size: 123.1%;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}







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

	855px以下

------------------------------------------------------------ */
@media screen and ( max-width : 855px ) {

.race_info > .inner > .num_date > ul > li {
	margin-right: 20px;
}

.race_info > .inner > .num_date > ul > li > span {
	display: block;
}






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

	639px以下

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

/*--20200227追記　緊急エリア用--*/
#emergency > .title { font-size: 1.8rem; }

.race_info > .inner,
.race_info > .inner > .header,
.race_info > .inner > .num_date {
	display: block; }

.race_info > .inner > .header {
	width: 100%;
	padding: 8px;
}

.race_info > .inner > .header > span {
	display: none;
}

.race_info > .inner > .header:after {
	left: 50%;
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(228, 163, 70, 0);
	border-top-color: #e4a346;
	border-top-color: #efb571;
	border-width: 6px;
	margin-top: 0px;
	margin-left: -6px;
}

.race_info > .inner > .num_date{
	border: 1px solid #ddd;
	border-top: none;
	padding-left: 10px;
}

.race_info > .inner > .num_date > ul > li {
	font-size: 1.3rem;
	margin-right: 0;
	margin-top: 0.4rem;
}

.race_info > .inner > .num_date > ul > li > span {
	display: inline;
}