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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
#generation,
#image,
#method{ padding:0 10px;}

article .secTit{ font-size: 24px;}


/* generation
**********************************************************************/
#generation{ background: #f5fafa; }
#generation .detail{ align-items: flex-start; justify-content: space-between; flex-direction: row-reverse;}

#generation li{ margin-top: 16px; }
#generation li:first-child h3{ margin-top: 0;}

#generation h3{ margin-bottom: 4px; font-size: 16px; font-weight: bold; color: #1e9696;}
#generation p{ letter-spacing: 0;}

#generation .detail img{ display: block; max-width: 440px; margin: 0 auto 40px;}


/* flow
**********************************************************************/
#flow img{ display: block; max-width: 805px; margin:0 auto;}


/* method
**********************************************************************/
#method{ background: #f5fafa; }
#method ul{ background: #fff; }
#method li{ background-size: 60px!important; padding:30px 30px 30px 100px; border-top: #eee 1px solid;}
#method li:first-child{ border-top: none;}

#method li:nth-child(1){ background: url("img/method_img01.png")no-repeat 20px 30px;}
#method li:nth-child(2){ background: url("img/method_img02.png")no-repeat 20px 30px;}
#method li:nth-child(3){ background: url("img/method_img03.png")no-repeat 20px 30px;}

#method h3{ margin-bottom: 7px; font-size: 20px; font-weight: bold; color: #1e9696;}
#method h3 span{ font-size: 14px; letter-spacing: 0px;}
#method p{ letter-spacing: 0;}

#method .attention{ display: block; margin-top: 2px; font-size: 12px; color: #666;}


/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){

	/* method
	**********************************************************************/
	#method ul{ display:flex; }
	#method li{ background-size: 80px!important; width: 33.33%; padding:130px 30px 30px; border-left: #eee 1px solid; border-top:none;}
	#method li:first-child{ border-left: none;}

	#method li:nth-child(1){ background: url("img/method_img01.png")no-repeat center 34px;}
	#method li:nth-child(2){ background: url("img/method_img02.png")no-repeat center 34px;}
	#method li:nth-child(3){ background: url("img/method_img03.png")no-repeat center 34px;}

	#method h3{ margin-bottom: 14px; text-align: center;}
}


/*************************************************************************************************************************
* 980px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:980px){

	/* generation
	**********************************************************************/
	#generation .detail{ display:flex; }
	#generation ul{ width: 55%;}
	#generation .detail img{ width: 39%; max-width: 440px; margin: -28px 0 0;}


	/* method
	**********************************************************************/
	#method li{ background-size: 100px!important; padding:160px 30px 30px; }

	#method li:nth-child(1){ background: url("img/method_img01.png")no-repeat center 40px;}
	#method li:nth-child(2){ background: url("img/method_img02.png")no-repeat center 40px;}
	#method li:nth-child(3){ background: url("img/method_img03.png")no-repeat center 40px;}
}