
/* ----------------------------------------------------------------------
	
	お知らせ - 馬主の方へ
	
---------------------------------------------------------------------- */

/* - お知らせトップ　リンクボタンユニット
-------------------------------------------------- */
div.link_block {
	
}

div.link_block > ul {
	background-color: #ebebeb;
	padding: 5px;
}

div.link_block > ul > li {
	padding: 5px;
}

div.link_block > ul > li > a {
	display: block;
	text-decoration: none;
	padding: 10px;
	background-color: #fff;
	border-radius: 4px;
	color: #333;
	font-size: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	font-weight: bold;
}

div.link_block > ul > li > a:hover {
	background-color: #fff8e1;
}

div.link_block > ul > li > a i {
	margin-right: 0.5em;
	color: #188542;
}

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

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

/* - 馬主記章の表
-------------------------------------------------- */
table.badge_list {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	table-layout: fixed;
}

table.badge_list caption {
	font-size: 1.4rem;
	font-weight: bold;
	
	background-color: #1b521f;
	color: #fff;
	padding: 5px 0;
}

table.badge_list.old caption {
	background-color: #666;
}

table.badge_list thead > tr th {
	font-weight: bold;
	padding: 10px;
	border: 1px solid #ddd;
	text-align: center;
	font-size: 1.3rem;
	
	background-color: #f1f1f1;
	color: #444;
}

table.badge_list thead > tr th:first-child { width: 30%; }


table.badge_list tbody tr td {
	vertical-align: middle;
	border: 1px solid #ddd;
	padding: 20px 0;
	text-align: center;
}

table.badge_list tbody tr td ul {
	font-size: 0;
}

table.badge_list tbody tr td ul > li {
	font-size: 1.3rem;
	display: inline-block;
	padding: 0 10px;
}

table.badge_list tbody tr td ul > li > p {
	font-size: 1.2rem;
}

p.sp_line { display: none; }

/* --- 2021コンポーネントベースに変更 --- */
table.badge_list.old.basic > caption { padding: 0; color: #333; background: none; }

table.badge_list.basic.old > caption.simple > .inner > div.main {
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	background-color: #666;
}

table.basic.badge_list thead > tr > th { background-color: #f1f1f1; color: #444; }

table.basic.badge_list tbody > tr > td { padding: 20px 0; }


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

h5.level3,
h6.level3 {
	font-size: 1.4rem;
	font-weight: bold;
}


/* - リンクボタン
-------------------------------------------------- */

div.col_btn_1 > ul > li { width: 100%; } /* -- ボタン1つ -- */
div.col_btn_2 > ul > li { width: 50%; } /* -- ボタン2つ -- */
div.col_btn_3 > ul > li { width: 33.33%; } /* -- ボタン3つ -- */
div.col_btn_4 > ul > li { width: 25%; } /* -- ボタン4つ -- */



/* - コンテンツユニット
-------------------------------------------------- */

p.sp_line { display: none; }



/* - テーブル
-------------------------------------------------- */

table.basic {
	width: 100%;
	margin-top: 20px;
	table-layout: fixed;
}

table.basic > caption {
	font-size: 1.5rem;
	font-weight: bold;
	padding: 8px 0;
}

table.basic > caption > span {
	/*display: block;*/
	font-size: 1.2rem;
}


table.basic thead > tr > th {
	background-color: #1b521f;
	color: #fff;
	font-weight: bold;
	padding: 10px 5px;
	font-size: 1.3rem;
	border: 1px solid #ccc;
	vertical-align: middle;
}

table.basic thead > tr > th.red {
	background-color: #C62828;
	color: #fff;
}

table.basic tbody > tr > th,
table.basic tbody > tr > td {
	border: 1px solid #ccc;
	padding: 10px;
	font-size: 1.3rem;
	vertical-align: middle;
}

table.basic tbody > tr > th {
	/*background-color: #f7f7f7;*/
}

table.basic tbody.td_center > tr > td { text-align: center; }
table.basic tbody > tr > td.center { text-align: center; }
table.basic tbody > tr > td.right { text-align: right; }

table.basic tbody > tr > td.on {
	background-color: #f7f7f7;
}



/* - 強調表現：赤
-------------------------------------------------- */

strong.red {
	color: #C62828;
}



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

	979px以下

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


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

	767px以下

------------------------------------------------------------ */
@media screen and (max-width : 767px) {
	
	div.col_btn_2 > ul >li { width: 100%; }
	div.col_btn_3 > ul >li { width: 50%; }
}


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

	639px以下

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


	div.col_btn_3 > ul >li { width: 100%; }
	div.col_btn_4 > ul >li { width: 50%; }
	
	
	/* - 馬主記章テーブル
	---------------------------------------------------------------------- */
	div.badge_block {
		width: 100%;
		overflow-x: auto;
		padding-bottom: 10px;
	}
	
	table.badge_list { width: 640px; }
	
	p.sp_line { display: block; }
	
	
	
	
	div.link_block > ul > li > a {
		font-size: 1.4rem;
	}
	
	div.scr {
		width: 100%;
		overflow-x: auto;
		padding-bottom: 10px;
	}
	
	table.basic {
		width: 640px;
		margin-top: 0;
	}
	
	table.basic > caption > span {
		display: block;
	}
	
}


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

	479px以下

------------------------------------------------------------ */
@media screen and (max-width : 479px) {
	
	div.col_btn_4 > ul >li { width: 100%; }
		
	table.basic > caption {
		text-align: left;
		font-size: 1.4rem;
	}
	
	table.basic > caption > span { display: inline; }
	
	table.basic thead > tr > th {
		font-size: 1.2rem;
	}
	
	table.basic tbody > tr > th {
		/*white-space: nowrap;*/
	}
	
	table.basic tbody > tr > th,
	table.basic tbody > tr > td {
		font-size: 1.2rem;
		padding: 5px;
	}
	
}

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

	359px以下

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



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

	モジュール用

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

h3.module { 
	font-size: 2.0rem;
    font-weight: bold;
    color: #388e3c;
}

h4.module { 
	font-size: 1.6rem;
	font-weight: bold;
}

table.usage_list th,
table.usage_list td {
    padding: 10px;
    text-align: left;
    font-size: 1.2rem;
    border: 1px solid #ddd;
}
