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

/*-------------------------------------------------------------
 *
 *						style_works.css
 *
 *-------------------------------------------------------------*/
			
	/* ---------- ---------- ---------- ---------- ----------
	 *						works
	 * ---------- ---------- ---------- ---------- ---------- */
	 		#worksList section					{ padding: 38px 45px 50px; height: 400px; text-align: center; }
			#worksList p						{ position: relative; margin-top: 55px; }
			#worksList p img					{ max-width: 100%; }
			#worksList span						{ display: block; margin-bottom: 5px; margin-top: 3px; }
			#worksList span::after,
			.customerInfo span::after			{ content: attr(data-works); margin-left: 15px; }
			#worksList h3						{ line-height: 1.5; font-size: clamp(19px, calc(100vw * 21 / 1300), 21px); }
			#worksList h3::after				{ content: attr(data-sama); margin-left: 10px; }

			/* もっと見るボタン */
			.works button.btn					{ margin: 45px auto 0; clear: both; background-color: transparent; border: none; display: block; }

			/* worksDetails */
			.worksDetails						{  }
			.worksDetails .mainImg				{ margin: 50px auto 100px; text-align: center; }
			.worksDetails .mainImg img			{ max-width: 100%; }
			.worksDetails div:not(.btn)			{ margin-bottom: 70px; margin-left: 30px; }
			.worksDetails div:last-child		{ margin-bottom: 0; }
			.worksDetails .btnArea a			{ margin: 0 auto; }
			.worksDetails .annotation			{ font-size: 90%; }

			.worksDetails .btn					{ font-size: clamp(17px, calc(100vw* 18 / 1300), 18px); }
			.worksDetails .seihin				{ font-size: clamp(19px, calc(100vw * 21 / 1300), 21px); margin-bottom: 15px; }


			.dlType04							{ display:block; overflow:hidden; }
			.dlType04 dt						{ float:left; width:2em; position: relative; }
			.dlType04 dd						{ margin:0 0 0 2em; }

			.customerInfo						{ display: flex; padding: 20px 35px; border-radius: 60px; margin-top: 43px; }
			.customerInfo .customerName			{ width: 266px; margin-right: 15px; }
			.customerInfo h3					{ font-size: 24px; line-height: 1.2; margin-bottom: 3px; margin-top: 9px; }
			.customerInfo h3::after				{ content: attr(data-sama); margin-left: 10px; }

			.customerInfo .customerDl			{ width: 724px; padding-right: 40px; flex: 1; }
			.customerInfo p						{ display: flex; align-items: center; justify-content: center; width: 237px; }
			.customerInfo dl					{ margin-bottom: 30px; }
			.customerInfo dt					{ width: 100px; }
			.customerInfo dd					{ width: calc(100% - 100px); float: left; word-break: break-all; }
			.customerInfo p img					{ width: 100%; height: auto; }

			.customerInfo.case08 dt				{ width: 35%; }
			.customerInfo.case08 dd				{ width: 65%; float: left; }

			.customerInfo .km2					{ position: relative; top:-8px; font-size: 80%; }

			/* works case03*/
			.w_case03							{ display: flex; }
			.w_case03 article + article			{ margin-left: 60px; }

/*-------------------------------------------------------------
 *
 *						style_works.css(ver.SP)
 *
 *-------------------------------------------------------------*/

	@media screen and ( max-width:1150px ) {
		/* ---------- ---------- ---------- ---------- ----------
		*						work
		* ---------- ---------- ---------- ---------- ---------- */
			#worksList section			{ height: auto; }

	 }

	 @media screen and ( max-width:1000px ) {
			.customerInfo				{ display: block; padding-bottom: 50px;  }
			.customerInfo .customerDl	{ width: 100%; padding-right: 0; margin: 30px 0; }
			.customerImg				{ margin: 0 auto; }
	 }

	 @media screen and ( max-width:920px ) {
		/* ---------- ---------- ---------- ---------- ----------
		*						work
		* ---------- ---------- ---------- ---------- ---------- */
			#worksList section			{ padding: 10%; }

	 }


	@media screen and ( max-width:767px ) {
		
		/* ---------- ---------- ---------- ---------- ----------
		*						work
		* ---------- ---------- ---------- ---------- ---------- */
				.works .contentsBox			{ position: relative; }
				#worksList section			{ height: auto; padding: 20px 25px 60px; }
				#worksList p				{ margin-bottom: 30px; }
				#worksList span,
				.worksDetails span			{ font-size: 12px; }
				
				.worksDetails div:not(.btn)	{ margin-bottom: 45px; margin-left: 0; }
				.worksDetails .mainImg		{ margin-bottom: 70px; }


				/* customerInfo がないページの対応 */
				.works06 .worksDetails div.btnArea,
				.works07 .worksDetails div.btnArea,
				.works09 .worksDetails div.btnArea	{ position: relative; bottom: initial;  }


				/* works case03*/
				.w_case03							{ display: block; }
				.w_case03 article + article			{ margin-left: 0px; }

							
	}