@charset "utf-8";

/*
製品販売事業
/business02/sales/
*/


/*
***********************************************************************************************
アイキャッチ画像
***********************************************************************************************
*/

.eyecatch .bg_eyecatch {

}


/*
***********************************************************************************************
木造大型パネル
***********************************************************************************************
*/

.sec01 {
}

	.sec01 > div {
		background-color: #fff;
		padding: 50px 50px 50px 90px;
		list-style-type: none;
		-webkit-clip-path: url(#mask_box_01);
		clip-path: url(#mask_box_01);
		-webkit-backface-visibility: hidden;
	}

		.viewmode-mobile .sec01 > div {
			-webkit-clip-path: url(#mask_box_v_01);
			clip-path: url(#mask_box_v_01);
		}

	.sec01 h2 {
		text-align: center;
	}

		.viewmode-mobile .sec01 h2 {
		}

		/* 短納期化・高性能化を… */
		.sec01 h2 small {
			display: block;
			font-size: 80%;
		}

			.viewmode-mobile .sec01 h2 small {
			}

			.sec01 h2 small br {
				display: none;
			}

				.viewmode-mobile .sec01 h2 small br {
					display: inline;
				}

	.sec01 ol {
		text-align: center;
		letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
		margin-top: 2em;
		padding: 0;
	}

		.viewmode-mobile .sec01 ol {
		}

		.sec01 ol li {
			display: inline-block;
			letter-spacing: normal; /* 文字間を通常に戻す */
			margin: 0 0;
			text-align: left;
			padding: 0px 15px 0 15px;
			position: relative;
			width: 300px;
			vertical-align: top;
		}

			.tablet .sec01 ol li {
				width: 260px;
			}

			.viewmode-mobile .sec01 ol li {
				display: block;
				margin: 0px auto 0 auto;
				padding: 10px;
				width: 270px;
			}

			.sec01 ol li + li {
				margin-left: 20px;
				position: relative;
			}

				.viewmode-mobile .sec01 ol li + li {
					margin-left: auto;
					margin-top: 40px;
				}

				/* 矢印の飾り */
				.sec01 ol li + li::before {
					color: #999;
					content: '▼';
					display: block;
					font-size: 30px;
					left: -20px;
					line-height: 0;
					position: absolute;
					top: 50%;
					transform: rotate(-90deg) scaleY(.65);
				}

					.viewmode-mobile .sec01 ol li + li::before {
						font-size: 30px;
						left: calc(50% - 15px);
						top: -15px;
						transform: none;
					}

	.sec01 figure {
		background-color: #fff;
		margin: 0;
		padding: 40px 20px;
		-webkit-clip-path: url(#mask_circle_01);
		clip-path: url(#mask_circle_01);
		-webkit-backface-visibility: hidden;
	}

		.tablet .sec01 figure {
			padding: 20px 20px;
		}

		.viewmode-mobile .sec01 figure {
			text-align: center;
		}

		.sec01 li:nth-of-type(2) figure {
			-webkit-clip-path: url(#mask_circle_01a);
			clip-path: url(#mask_circle_01a);
		}

		.sec01 li:nth-of-type(3) figure {
			-webkit-clip-path: url(#mask_circle_01b);
			clip-path: url(#mask_circle_01b);
		}

		.sec01 figure img {
			height: 140px;
			object-fit: contain;
			padding: 0 10px;
			width: 260px;
			vertical-align: top;
		}

			.viewmode-mobile .sec01 figure img {
			}

		.sec01 figcaption {
			text-align: center;
		}


/*
***********************************************************************************************
4面背割り＆4面薄背割り
***********************************************************************************************
*/

.sec02 {
	background-color: #fff;
	display: flex;
	margin-top: 6em;
	padding: 50px;
	-webkit-clip-path: url(#mask_box_01);
	clip-path: url(#mask_box_01);
	-webkit-backface-visibility: hidden;
}

	.viewmode-mobile .sec02 {
		display: block;
		padding: 45px 15px 45px 15px;
		-webkit-clip-path: url(#mask_box_v_01);
		clip-path: url(#mask_box_v_01);
	}

	.sec02 h2 small {
		display: block;
	}

		.viewmode-mobile .sec02 h2 small {
		}

	.sec02 > div {
	}

		.viewmode-mobile .sec02 > div {
		}

		.sec02 > div + div {
			border-left: 1px solid #999;
			margin-left: 30px;
			padding-left: 30px;
		}

			.viewmode-mobile .sec02 > div + div {
				border-left: none;
				margin-top: 3em;
				margin-left: auto;
				padding-left: 0;
			}

	.sec02 h3 {
		text-align: center;
	}

		.viewmode-mobile .sec02 h3 {
		}

	.sec02 figure {
		margin: 2em auto 0 auto;
		text-align: center;
	}

		.viewmode-mobile .sec02 figure {
		}

		.sec02 > div + div figure {
			margin-top: 1em;
		}

			.viewmode-mobile .sec02 > div + div figure {
				margin-top: 2em;
			}

		.sec02 > div figure img {
			max-height: 230px;
			vertical-align: top;
		}

			.sec02 > div + div figure img {
				max-height: 250px;
			}

	.sec02 figcaption {
		font-family: 'Kiwi Maru', serif;
		margin: 1em auto 0 auto;
		text-align: center;
	}

	.sec02 > div > small {
		display: block;
		margin-top: 1.5em;
		text-align: center;
	}

		.viewmode-mobile .sec02 > div > small {
			/*
			text-align: left;
			*/
		}


/*
***********************************************************************************************
その他製品
***********************************************************************************************
*/

.sec03 {
	margin-top: 6em;
	position: relative;
}

	.viewmode-mobile .sec03 {
		margin-top: 4em;
	}

	.sec03 ol {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}

		.viewmode-mobile .sec03 ol {
			display: block;
		}

		.sec03 ol > li {
			border-top: 1px solid #999;
			list-style-type: none;
			padding: 40px 50px;
			width: 50%;
			vertical-align: top;
		}

			.viewmode-mobile .sec03 ol > li {
				padding: 20px 10px;
				width: auto;
			}

			.sec03 ol > li:nth-child(even) {
				border-left: 1px solid #999;
			}

				.viewmode-mobile .sec03 ol > li:nth-child(even) {
					border-left: none;
				}

			.sec03 ol > li + li {
				margin-top: 0;
			}

			.sec03 ol > li:nth-of-type(1),
			.sec03 ol > li:nth-of-type(2) {
				border-top: none;
			}

				.viewmode-mobile .sec03 ol > li:nth-of-type(1),
				.viewmode-mobile .sec03 ol > li:nth-of-type(2) {
					border-top: 1px solid #999;
				}

	.sec03 h3 {
		margin: 0;
		padding: 0;
	}

		.sec03 h3 small {
			display: block;
			font-size: 70%;
			font-weight: normal;
		}

	.sec03 ul {
		/*
		max-width: 450px;
		*/
	}

		.viewmode-mobile .sec03 ul {
			font-size: 90%;
		}

		.sec03 h3 + ul {
			margin-top: 1em;
		}

		.sec03 h3 + p {
			margin-top: .5em;
		}

	/* その他 お問い合わせください */
	.sec03 > ol > li:last-child {
		background-image: url(bg_structural-material_06.svg);
		background-repeat: no-repeat;
		background-position: center center;
		padding-top: 3.8em;
		text-align: center;
	}

		.viewmode-mobile .sec03 > ol > li:last-child {
			background-size: 32%;
			padding-top: 2.5em;
			padding-bottom: 3em;
		}

		.sec03 > ol > li:last-child small {
			display: block;
			font-size: 110%;
			font-weight: bold;
		}

			.viewmode-mobile .sec03 > ol > li:last-child small {
				font-size: 90%;
			}