


article.research-intro{
	/*text-align: center;*/
	max-width:1100px;
	margin:0 auto 80px;
	/*border-radius:12px;*/
	/*padding: 40px 50px;*/
	/*border:1px solid #ddd;*/

	@media screen and (max-width: 768px) {
		padding: 30px 40px;
		margin-bottom: 40px;
	}

	.intro-view-box{
		display: flex;
	}

	.intro-head-box{

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 40px;

		@media screen and (max-width: 768px) {
			padding-bottom: 20px;
		}


		.subject-box{
			font-weight: 700;
			font-size: 24px;
			line-height: 30px;
			color: #000;

			@media screen and (max-width: 768px) {
				font-size: 20px;
			}
		}

		.ic{

			&.ic-intro{
				background: url("../img/sub6_intro.jpg") no-repeat center / cover;
				width: 118px;
				height: 96px;
			}

		}
	}

	.intro-txt-box{

		font-size: 16px;
		line-height: 24px;
		text-align: left;
		font-weight: 500;

		.fc-red{
			color: red;
		}

		.fc-skyblue{
			color: #86cce6;
		}
	}
}

section.page-intro-view{
	padding-bottom: 80px;

	&.top-position{
		padding-top: 80px;
	}

	@media screen and (max-width: 768px) {
		padding-bottom: 60px;
	}

	.intro-wrap{
		display: flex;
		gap: 40px;
		border-bottom:1px solid #ddd;
		padding-bottom: 60px;

		@media screen and (max-width: 768px) {
			flex-direction: column;
			padding-bottom: 40px;
		}

		.view-box{
			width: 40%;
			display: inline-flex;

			@media screen and (max-width: 768px) {
				width: 100%;
			}


			img{
				width: 100%;
				object-fit: cover;
			}
		}

		.contents-box{
			flex:1;
			min-width:0;
			
			.txt-box{
				padding: 25px 0;
				font-size: 20px;
				line-height: 32px;
				font-weight: 500;
				color: #000;

				@media screen and (max-width: 768px) {
					padding: 0;
					font-size: 18px;
					line-height: 28px;
				}
			}
		}
	}


}

article.sub-contents-group{
	padding-top: 80px;

	.contents-group-msg{
		padding-top: 36px;

		.msg-box{
			font-size: 18px;
			line-height: 26px;
			font-weight: 500;
			color: #333;
		}
	}
	
	.contents-group-list{
		display: flex;
		gap: 40px;

		@media screen and (max-width: 768px) {
			flex-direction: column;
		}
		.contents-group-box{
			width: 100%;
			display: flex;
			flex-direction: column;

			& + .contents-group-box{
				margin:0;
			}

			.group-head-box{
				flex:1;
				min-height: 0;
			}
		}

	}

	.contents-group-box{

		& + .contents-group-box{
			margin-top: 60px;

			@media screen and (max-width: 768px) {
				margin-top: 40px;
			}
		}

		.group-head-box{
			padding-bottom: 30px;

			@media screen and (max-width: 768px) {
				padding-bottom: 20px;
			}

			.main-box{
				display: flex;
				align-items: center;

				.num-box{
					margin-right: 4px;
					color: #000;
					font-weight: 700;
					font-size: 24px;

					@media screen and (max-width: 768px) {
						font-size: 18px;
					}
				}
				.txt-box{
					font-weight: 700;
					color: #000;
					font-size: 24px;

					@media screen and (max-width: 768px) {
						font-size: 18px;
					}

				}
			}

			.sub-box{
				padding-top: 14px;

				@media screen and (max-width: 768px) {
					padding-top: 10px;
				}

				.sub-txt{
					color: #333;
					font-size: 18px;
					line-height: 28px;

					@media screen and (max-width: 768px) {
						font-size: 16px;
					}
				}

			}
		}
	}

}

article.contents-group-layout1{



	.img-list{
		display: flex;
		justify-content: center;
		gap: 60px;

		@media screen and (max-width: 768px) {
			gap: 40px;
			flex-direction: column;
		}

		.img-item{
			width: 100%;
			display: inline-flex;
			flex-direction: column;
			align-items: center;

			@media screen and (max-width: 768px) {
				width: 100%;
			}

			.img-box{
				display: flex;

				@media screen and (max-width: 768px) {
					width: 100%;
				}

				img{
					max-width:100%;

					@media screen and (max-width: 768px) {
						width: 100%;
					}
				}
			}

			.caption-box{
				padding-top: 12px;
				color: #000;
				font-size: 18px;
				line-height: 24px;
				font-weight: 500;
			}
		}
	}
}

section.page-content-layout1{

	.page-intro-box{
		display: flex;
		justify-content: center;

		.img-box{
			display: flex;

			&.small{
				max-width:380px;
				margin:0 auto;

			}
			img{
				max-width:100%;

			}

		}
	}
}

article.table-view-layout1{

	.table-box{
		max-width:1100px;
		margin:0 auto;

		table{
			border-collapse: collapse;
			border-spacing: 0;
			width: 100%;
			border:1px solid #ccc;

			th{
				background-color: #f5f5f5;
				height: 40px;
				font-size: 18px;
				font-weight: 700;
				line-height: 28px;
				color: #000;
				padding: 20px;
				border:1px solid #ccc;


			}


			td{
				border:1px solid #ccc;

				padding: 20px;
				font-size: 18px;
				font-weight: 500;
				line-height: 28px;
				color: #000;

			}

			.solution-box{
				text-align: center;
				font-size: 18px;
				font-weight: 700;
				line-height: 28px;
				color: #000;
			}

		}

		.txt-list{

			.txt-item{
				padding-left: 20px;
				text-indent: -20px;
			}

		}
	}

}

article.consulting-guide-view{
	margin-bottom: -60px;

	@media screen and (max-width: 768px) {
		margin-bottom: -40px;
		padding: 0 20px;
	}

	.view-box{
		max-width:900px;
		margin:0 auto;
	}

	.step-box{
		margin-bottom: 20px;
		display: flex;
		justify-content: center;

		.step-txt{
			border:2px solid #de2941;
			padding: 24px 44px;
			border-radius:8px;
			font-size: 18px;
			color: #000;
			font-weight: 500;
			line-height: 26px;

		}
	}

	.note-box{
		max-width:800px;
		margin:0 auto;
		text-align: center;
		font-size: 18px;
		line-height: 28px;
		color: #000;
	}



}

.main-contact{
	max-width:850px;
	margin:0 auto;

	#section-inquiry > .innerContainer {
		width: 100%;
		padding-top: 0;
		margin-top: 0;
	}
}

article.before-after-list{

	.list-wrap{

		ul{
			display: flex;
			flex-direction: column;
			gap: 24px;


			@media screen and (max-width: 768px) {
				gap: 18px;
			}

			li{

				.item-wrap{
					display: flex;
					align-items: center;
					gap: 32px;

					@media screen and (max-width: 768px) {
						gap: 18px;
					}

					.before-box{
						align-self: stretch;
						text-align: center;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						padding: 20px;
						width: 200px;
						background-color: red;
						border:1px solid #000;
						color: #eaeaea;
						font-size: 18px;
						line-height: 24px;
						font-weight: 400;

						@media screen and (max-width: 768px) {
							font-size: 16px;
							padding: 24px 18px;
						}
					}

					.arrow-box{
						font-size: 28px;
						color: #000;
						font-weight: 700;

						@media screen and (max-width: 768px) {
							font-size: 24px;
						}
					}
					.after-box{
						align-self: stretch;
						text-align: center;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						padding: 32px 24px;
						width: 200px;
						background-color: #fff;
						border:2px solid red;
						font-size: 18px;
						line-height: 24px;
						color: #000;
						font-weight: 700;

						@media screen and (max-width: 768px) {
							font-size: 16px;
							padding: 24px 18px;
						}

					}
				}
			}
		}
	}
}