@charset "utf-8";

/*
 ナチュラルヒーリング ＝「自然治癒」
/business01/natural-healing/
*/


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

.eyecatch .bg_eyecatch {

}


/*
***********************************************************************************************
本文共通
***********************************************************************************************
*/

.viewmode-mobile h1 {
	text-align: left;
}


/*
***********************************************************************************************
自然素材の持ち味を上手に活かしたい
***********************************************************************************************
*/

.sec01 {
	margin-top: 4em;
	position: relative;
}

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

	.sec01 h2 br {
		display: none;
	}

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

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

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

	.sec01 h2 {
		text-align: center;
	}

		.viewmode-mobile .sec01 h2 {
			font-size: 120%;
		}

	.sec01 p {
	}

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

		.viewmode-mobile .sec01 ul {
			margin-top: 3em;
		}

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

			.tablet .sec01 ul li {
				max-width: 220px;
			}

			.viewmode-mobile .sec01 ul li {
				display: block;
				margin: 0px auto 0 auto;
				max-width: 260px;
			}

			.sec01 ul li + li {
				margin-left: 35px;
			}

				.viewmode-mobile .sec01 ul li + li {
					margin-top: 2em;
					margin-left: auto;
				}

			.sec01 li figure {
				margin: 0;
				position: relative;
			}

			.sec01 li figcaption {
				background-image: url(bg_natural-healing_00.webp);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: contain;
				font-family: 'Kiwi Maru', serif;
				font-weight: 500;
				padding: 1em 2em 1.5em 2em;
				position: absolute;
				right: -20px;
				top: -20px;
			}

				.viewmode-mobile .sec01 li figcaption {
					right: -15px;
					top: -15px;
				}

				.sec01 li img {
					vertical-align: top;
					-webkit-clip-path: url(#mask_box_01);
					clip-path: url(#mask_box_01);
					-webkit-backface-visibility: hidden;
				}

					.sec01 li:nth-of-type(2) img {
						-webkit-clip-path: url(#mask_box_01a);
						clip-path: url(#mask_box_01a);
					}
					
					.sec01 li:nth-of-type(3) img {
						-webkit-clip-path: url(#mask_box_01b);
						clip-path: url(#mask_box_01b);
					}

					.viewmode-mobile .sec01 li img {
					}


/*
***********************************************************************************************
化粧面・用途・塗装有無の指定にご協力ください
***********************************************************************************************
*/

.sec02 {
	margin-top: 6em;
	/*
	padding: 2em 0 5em 0;
	*/
	position: relative;
}

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

	.sec02 h2 br {
		display: none;
	}

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

	.sec02 > div {
		background-color: #fff;
		padding: 50px 500px 50px 50px;
		position: relative;
		-webkit-clip-path: url(#mask_box_01);
		clip-path: url(#mask_box_01);
		-webkit-backface-visibility: hidden;
	}

		.tablet .sec02 > div {
			padding-right: 470px;
		}

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

	.sec02 h3 {
		text-align: center;
	}

	.sec02 figure {
		text-align: center;
		margin: 0 auto 0 auto;
		padding: 0;
		position: absolute;
		right: 60px;
		top: 60px;
		width: 360px;
	}

		.viewmode-mobile .sec02 figure {
			margin-top: 1em;
			margin-bottom: 1em;
			position: relative;
			right: auto;
			top: auto;
			width: auto;
		}

		.sec02 figure img {
			vertical-align: top;
		}

	/* 例えば… */
	.sec02 figure + p {
		margin-top: 1em;
	}

	.sec02 dl {
		background-color: #f9ecc9;
		margin: 0;
		padding: 20px 20px 20px 30px;
		-webkit-clip-path: url(#mask_box_01);
		clip-path: url(#mask_box_01);
		-webkit-backface-visibility: hidden;
	}

		.viewmode-mobile .sec02 dl {
			font-size: 90%;
			padding: 15px;
			-webkit-clip-path: url(#mask_box_v_01);
			clip-path: url(#mask_box_v_01);
		}

		.sec02 dl dt {
			font-weight: bold;
			margin: 0 0;
		}

			.viewmode-mobile .sec02 dl dt {
			}

			.sec02 dl dd {
				margin: 0px;
				padding-left: 1.5em;
				position: relative;
			}

				.viewmode-mobile .sec02 dl dd {
				}

				.sec02 dd::before {
					content: '⇒';
					left: 0;
					position: absolute;
				}

		.sec02 p + dl {
			margin-top: 1em;
		}

		.sec02 dl + dl {
			margin-top: 1em;
		}

		.sec02 dd p {
			text-align: left;
		}

		.sec02 dl +  p {
			text-align: right;
		}

			.sec02 dl +  p + p {
				margin-top: 1em;
			}


/*
***********************************************************************************************
もっと使ってみたいと思える木材を目指す
***********************************************************************************************
*/

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

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

	.viewmode-mobile .sec03 h2 {
		padding: 25px 0px 25px 0px;
	}

	.sec03 h2 br {
		display: none;
	}

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

	.sec03 > div {
		background-color: #fff;
		padding: 50px;
		-webkit-clip-path: url(#mask_box_01);
		clip-path: url(#mask_box_01);
		-webkit-backface-visibility: hidden;
	}

		.viewmode-mobile .sec03 > div {
			padding: 45px 15px 45px 15px;
			-webkit-clip-path: url(#mask_box_v_01);
			clip-path: url(#mask_box_v_01);
		}

	.sec03 img {
		vertical-align: top;
	}

	.sec03 dl {
		align-items: center;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 50px;
		justify-content: center;
		letter-spacing: -.40em; /* 文字間を詰めて隙間を削除する */
		margin: 3em auto 0 auto;
		/*
		min-height: 720px;
		*/
		padding: 0;
		position: relative;
	}

		.viewmode-mobile .sec03 dl {
			display: block;
			margin-top: 3em;
			min-height: 0;
		}

		.sec03 dt,
		.sec03 dd {
			display: inline-block;
			letter-spacing: normal; /* 文字間を通常に戻す */
			margin: 0 0;
			max-width: 420px;
			text-align: center;
			padding: 0px;
			/*
			position: absolute;
			*/
			vertical-align: top;
		}

			.viewmode-mobile .sec03 dt,
			.viewmode-mobile .sec03 dd {
				display: block;
				left: auto;
				margin: 0px auto 0 auto;
				max-width: 260px;
				position: relative;
				top: auto;
			}

		/* 施工事例 */
		.sec03 dt {
			width: 420px;
		}

			.viewmode-mobile .sec03 dt {
				padding-top: 0;
				width: auto;
			}

				.viewmode-mobile .sec03 dt img {
					max-height: 110px;
				}

			.sec03 dt + dd,
			.sec03 dd + dd {
				margin-top: 2em;
			}

				.viewmode-mobile .sec03 dt + dd,
				.viewmode-mobile .sec03 dd + dd {
					margin-top: 2em;
				}

		/*
		.sec03 dd:nth-of-type(1) {
			left: 55%;
			top: 0%;
		}

			.viewmode-mobile .sec03 dd:nth-of-type(1) {
				left: auto;
				top: auto;
			}

		.sec03 dd:nth-of-type(2) {
			left: 5%;
			top: 10%;
		}

			.viewmode-mobile .sec03 d:nth-of-type(2) {
				left: auto;
				top: auto;
			}

				.viewmode-mobile .sec03 dd:nth-of-type(2) img {
				}

		.sec03 dd:nth-of-type(3) {
			left: 50%;
			top: 55%;
		}

			.viewmode-mobile .sec03 dd:nth-of-type(3) {
				left: auto;
				top: auto;
			}
		*/

			.sec03 dd figure {
				margin: 0;
				position: relative;
			}

			.sec03 dd figcaption {
				margin-top: .75em;
				line-height: 1.7;
				text-align: center;
			}

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

				.sec03 dd img {
					-webkit-clip-path: url(#mask_box_01);
					clip-path: url(#mask_box_01);
					-webkit-backface-visibility: hidden;
				}

					.sec03 dd:nth-of-type(2) img {
						-webkit-clip-path: url(#mask_box_01a);
						clip-path: url(#mask_box_01a);
					}

					.sec03 dd:nth-of-type(3) img {
						-webkit-clip-path: url(#mask_box_01b);
						clip-path: url(#mask_box_01b);
					}