@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; flex-wrap:wrap; gap: 20px; }
#detail li{ width: calc((100% - 20px)/2); }
#detail li .img{ display: flex; align-items: center; justify-content: center; padding: 15px; border: #e5e5e5 1px solid;}
#detail li .img img{ display: block; max-width: 160px;}
#detail li .blank02{ display: table; margin-top: 10px; padding-right: 20px; font-size: 13px; font-weight: bold; color: #008fe1; text-decoration: underline;}
#detail li a::before{ width: 13px; height: 11px;}


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


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){
	#detail .detail_area{ padding: 60px; }
	#detail ul{ gap: 40px 36px; }
	#detail li{ width: calc((100% - 144px)/5); }
	#detail li .img{ transition: opacity 0.3s ease-in-out 0s; }
	#detail li .img:hover{ opacity: .85;}
	#detail a:hover{ text-decoration: none; }
}