@charset "UTF-8";
/* CSS Document */

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
body{background: #f1f4f8;}
#detail{ padding: 0 10px;}
#detail .detail_area{ background: #fff; padding: 30px 20px; margin-top: 20px; border: #e5e5e5 1px solid; border-radius: 8px;}

#detail ul{ display: flex; justify-content: space-between; flex-wrap:wrap; margin-top: -30px; }
#detail li{ width: 100%; margin-top: 30px; }
#detail li img{ border: #e5e5e5 1px solid;}
#detail li p{ margin: 14px 0 6px; color: #888; font-size: 12px; }
#detail li a{ padding-right: 20px; font-size: 13px; color: #008fe1; text-decoration: underline;}
#detail li a::before{ width: 13px; height: 11px;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px) {
	#detail .detail_area{ padding: 40px;}
	#detail li{ width: 48.6%; }
	#detail li p{ font-size: 13px; }
	#detail li a{ font-size: 15px; }
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){
	#detail .detail_area{ padding: 60px; margin-top: 30px; }
	#detail ul{ margin-top: -40px;}
  #detail li{ width: 31.8%; margin-top: 40px; }

	#detail a:hover{ text-decoration: none; }
}