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

	主要国 WEBサイトの歩き方　香港　競走馬プロフィールの調べ方

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

#profile ul.step_list > li:last-child {
	padding-left: 0;
}

/* ---- STEP4：プロフィール リスト ---- */
div.list_detail > div.grid {
	display: table;
	table-layout: fixed;
	width: 100%;
}

div.list_detail > div.grid > div {
	display: table-cell ;
	width: 50% ;
}

div.list_detail > div.grid > div.left { width: 55% ;}
div.list_detail > div.grid > div.right { width: 45% ;}

div#method2 > div.list_detail > div.grid > div.left { width: 50% ;}
div#method2 > div.list_detail > div.grid > div.right { width: 50% ;}
	
div.list_detail > div.grid > div > ul li {
	width: 100%;
}

div.list_detail > div.grid > div.right > ul,
div.list_detail > ul.wide { border-right: 1px solid #ddd; }
	
div.list_detail > div.grid > div > ul li,
div.list_detail > ul.wide  li {
	display: table;
	border: 1px solid #ddd;
	border-right: none;
	border-bottom: none;
}

div.list_detail > ul.wide li { width: 100%; }

div.list_detail > div.grid > div > ul li:last-child,
div.list_detail > ul.wide li:last-child { border-bottom: 1px solid #ddd; }

div.list_detail ul li p {
	display: table-cell;
	padding: 6px 10px;
}

div.list_detail p.title {
	    background-color: #f4f6e3;
		width: 150px;
		border-right: 1px solid #ddd;
}

div#method2 div.right > ul li p.title {
		width: 240px;
}

div.list_detail > ul.wide li  p.title {
		width: 300px;
}

/* ---- STEP4：プロフィール リスト 補足説明部分 ---- */

div.method_unit > ul.opt_txt > li {
	/*padding: 2px;*/
	font-size: 1.2rem;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
} 



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

	979px以下

------------------------------------------------------------ */
@media screen and ( max-width : 979px ) {
	
	div.list_detail > div.grid > div.left { width: 68% ;}
	div.list_detail > div.grid > div.right { width: 32% ;}

	div#method2 > div.list_detail > div.grid > div.left { width: 35% ;}
	div#method2 > div.list_detail > div.grid > div.right { width: 70% ;}
	
}



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

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
	
		/* プロフィール
---------------------------------------------------------------------- */

/* ---- STEP4：プロフィール リスト ---- */

	
	div.list_detail > div.grid > div.left > ul li {
    	border-right: 1px solid #ddd;
	}
	
	div.list_detail > div.grid > div.left > ul li:last-child {
    	border-bottom: none;
	}
	
	div#method2 div.left > ul li p.title {
    	width: 240px;
	}
	
	div.list_detail > ul.wide li p.title {
    	width: 240px;
	}
	
	div.list_detail > div.grid > div { 
		display: block;
	}
	
	div.list_detail > div.grid > div.left,
	div.list_detail > div.grid > div.right,
	div#method2 > div.list_detail > div.grid > div.left,
	div#method2 > div.list_detail > div.grid > div.right { 
		width: 100%;
	}
	
	div.list_detail > div.grid > div ul li { 
		width: 100%;
	}
	
	div.list_detail > div.grid > div.left > ul li:last-child {
    	border-bottom: none;
	}
	
}


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

	639px以下

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


@media screen and ( max-width : 479px ) {
	
	div.list_detail ul li p {
    	display: block;
	}
	
	
	div.list_detail ul li p.title,
	div#method2 div.left > ul li p.title,
	div#method2 div.right > ul li p.title,
	div.list_detail > ul.wide li p.title {
    	width: 100%;
		border-right: none;
	}
	
}

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


