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

/*-------------------------------------------------------------
 *
 *						style_event_seminar.css
 *
 *-------------------------------------------------------------*/
			
	/* ---------- ---------- ---------- ---------- ----------
	 *					event/seminar index
	 * ---------- ---------- ---------- ---------- ---------- */
	
			.event_seminar .contentsBox > div	{ margin-bottom: 90px; }
			.event_seminar .contentsBox > div:last-child	{ margin-bottom: 0; }
			.event_seminarSubTitle				{ font-size: clamp(19px, calc(100vw * 21 / 1300), 21px); margin-bottom: 10px; position: relative; }
			.event_seminar span					{ margin-bottom: 10px; display: block; }


			/* event_seminarPlan */
			.event_seminarPlan							{ max-width: 1000px; margin: 0 auto; }
			.event_seminarPlan section					{ border-width: 1px 0 0 0; box-sizing: border-box; padding: 15px 0; overflow: hidden; }
			.event_seminarPlan section:hover .event_seminarSubTitle			{ text-decoration: underline; }
			.event_seminarPlan section:last-child		{ border-width: 1px 0 1px 0; }
			.event_seminarPlan section a				{ display: flex; justify-content: space-between; align-items: end; text-decoration: none; }
			.event_seminarPlan .event_seminarPlan-detail			{ line-height: 1.5; }
			.event_seminarPlan .event_seminarPlan-detail span.event_seminarSubTitle-sub,
			.event_seminarPlan .event_seminarPlan-detail .detail	{ font-size: 12px; margin-bottom: 0; }
			.event_seminarPlan .event_seminarSubTitle	{ font-size: 18px; }
			.event_seminarPlan .event_seminarPlan-detail .date,
			.event_seminarPlan .event_seminarPlan-detail .place	{ font-size: 16px; }
			.planImg									{ width: 260px; text-align: center; }
			.planImg img								{ width: 100%; max-width: fit-content; }
			
			/* event_seminarNow */
			.event_seminarNow					{ display: flex; justify-content: space-between; }
			.event_seminarNow section			{ box-sizing: border-box; width: calc((100% - 35px) / 2); position: relative; display: flex; border-radius: 50px; padding: 23px 30px; flex-direction: column; }

			.event_seminarNow .event_seminarSubTitle.reception::after	{ content: "申込み受付中"; color: #fff; background: #000; font-size: 12px; padding: 1px 14px; position: absolute; right: 0; top:7px; letter-spacing: 0.2px; }
			.event_seminarNow div				{ flex-grow: 1; line-height: 23px; }
			.event_seminarNow .nowImg			{ text-align: center; margin: 10px 0 20px; }
			.event_seminarNow .btn				{ margin-left: 0; }

			
			/* event_seminarReportList */
			#event_seminarReportList section	{ display: flex; flex-direction: column; padding: 28px 40px 50px; }
			#event_seminarReportList h3			{ font-size: clamp(18px, calc(100vw * 20 / 1300), 20px); line-height: 1.2; }
			#event_seminarReportList span		{ margin-bottom: 13px; display: block; margin-top: 13px; }

			#event_seminarReportList article	{ line-height: 1.7; margin-bottom: 30px; }
			#event_seminarReportList .reportImg	{ margin-top: auto; margin-bottom: 0; }
			.reportImg img						{ width: 100%; max-width: fit-content; }

			

	/* ---------- ---------- ---------- ---------- ----------
	 *					event/seminar nowDetails
	 * ---------- ---------- ---------- ---------- ---------- */
	 		.nowDetails							{ margin-top: 44px; }
	 		.nowDetails .nowImg					{ margin-bottom: 30px; }
			.nowDetails .nowImg img				{ display: block; margin: 0 auto; }
			.nowDetails span.colBlack			{ color: #000; display: block; margin-bottom: 26px; }
			.nowDetails .btn + .btn				{ margin-top: 20px; }

	/* ---------- ---------- ---------- ---------- ----------
	 *					event/seminar case
	 * ---------- ---------- ---------- ---------- ---------- */

			/* イベントレポート */
			#reportCaption						{ margin-bottom: 88px; margin-top: 44px; }
			.reportDetails #reportCaption section		{ box-sizing: border-box; padding: 26px 30px; margin-bottom: 20px; overflow: hidden; display: flex; border-radius: 60px; flex-direction: row-reverse; }
			#reportCaption section p			{ font-size: 14px; }
			#reportCaption section h3			{ font-size: 24px; margin-bottom: 20px; line-height: 1.3; }
			#reportCaption section div:first-child	{ width: 450px; margin-left: 5%; display: flex; align-items: center; }
			#reportCaption section div:last-child	{ width: calc(100% - 450px); }
			#reportCaption dl					{ line-height: 1.75; }
			#reportCaption dt					{ width: 50px; }
			#reportCaption dd					{ width: calc(100% - 50px); float: left; }

			.report-padding						{ padding: 0 31px; }

			#reportCaption dl.w65 dt			{ width: 65px; }
			#reportCaption dl.w65 dd			{ width: calc(100% - 65px); }

			.reportList							{ margin-bottom: 45px; }
			.reportList ul						{ display: block; font-size: clamp(16px, calc(100vw * 18 / 1300), 18px); line-height: 1.7; }

			.reportDetails article.mainImg		{ margin-bottom: 100px; text-align: center; }
			.reportDetails article.mainImg img	{ display: block; margin: 0 auto; }
			.reportDetails article.mainImg img + img	{ margin-top: 30px; }

			.reportDetails .reportBox			{ display: flex; border-radius: 55px; padding: 24px 30px; box-sizing: border-box; justify-content: space-between; }
			.reportDetails .reportBox h5		{ font-size: clamp(21px, calc(100vw * 24 / 1300), 24px); font-weight: normal; line-height: 1.3; }
			.reportDetails .reportBox p.colBrown			{ font-size: clamp(17px, calc(100vw * 18 / 1300), 18px); margin-bottom: 5px; }
			.reportDetails .reportBox article	{ width: calc((100% - 30px) / 2 ); }
			.reportDetails .reportBox article img	{ width: 100%; }
			.reportDetails .reportBox article img + img	{ margin-top: 20px; }

			.reportDetails .reportBox + #event_seminarReportArea	{ margin-top: 100px; }

			.reportDetails article.mainImg > .mov	{ display: inline-block; }
			a.movOpen:hover	{ opacity:0.8; }

			/* イベント・セミナー　レポート　case03 */
			.case03Box							{ margin-bottom: 60px; margin-top: -50px; }
			.case03Box p.bold					{ color: #000; font-size: 16px; }

			/* イベント・セミナー case40 */
			.linkcol							{ color: #a98667; text-decoration: underline; }

			/* イベント・セミナー case45 */
			.MarginT20							{ margin-top: 20px; }
			.MarginT30							{ margin-top: 30px; }

			/* 参考出展 */
			.report .reference-exhibit			{ font-size: 75%; margin-left: 15px; color: red; background-color: rgb(248, 211, 219); padding: 3px 10px; display: inline-block; }


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

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

	/* ---------- ---------- ---------- ---------- ----------
	 *						event/seminar
	 * ---------- ---------- ---------- ---------- ---------- */
			.event_seminarNow .event_seminarSubTitle					{ margin-bottom: 60px; }
			.event_seminarNow .event_seminarSubTitle.reception::after	{ left: 0; right: initial; bottom: -40px; top: initial; }
			.event_seminarNow .nowImg img								{ width: 100%; height: auto; max-width: fit-content; }

			.reportDetails article img						{ width: 100%; height: auto; max-width: fit-content; }

	 }

	 @media screen and ( max-width:980px ) {
	/* ---------- ---------- ---------- ---------- ----------
	 *						event/seminar
	 * ---------- ---------- ---------- ---------- ---------- */
			.reportDetails #reportCaption section div		{ width: 100%; justify-content: center; }

	 }

	@media screen and ( max-width:767px ) {
		
								
		/* ---------- ---------- ---------- ---------- ----------
		*						event/seminar
		* ---------- ---------- ---------- ---------- ---------- */
				.event_seminarNow								{ display: block; box-sizing: border-box; }
				.event_seminarNow section 						{ width: 100%; }
				.event_seminarNow section + section				{ margin-top: 20px; }

				.report-padding									{ padding: 0 21px; }

				.event_seminarPlan section a					{ display: block; }
				.planImg										{ margin-top: 35px; width: 100%; text-align: left; }

				.reportDetails #reportCaption section			{ flex-direction: column-reverse; }
				#reportCaption section div:first-child			{ margin-left: 0; margin-top: 25px; }
				.reportDetails .reportBox						{ display: block; }
				.reportDetails .reportBox article				{ width: 100%; }
				.reportDetails .reportBox article + article		{ margin-top: 20px; }

				.planBlueBox									{ padding: 30px 15px; margin-top: 20px; }
				.planBlueBox p									{ font-size: 17px; }
			
	}			

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

		/* ---------- ---------- ---------- ---------- ----------
		*						event/seminar
		* ---------- ---------- ---------- ---------- ---------- */

				.reportImg img 				{ width: 100%; height: auto; }
				#reportCaption dt			{ width: 25%; }
				#reportCaption dd			{ width: 75%; }

	}