@charset "UTF-8";

/* 共通 */
main {
	padding: 170px 0 0;
}

.mt0 {margin:0 auto}
.mt10 {margin:10px auto 0}
.mt20 {margin:20px auto 0}
.mt25 {margin:25px auto 0}
.mt30 {margin:30px auto 0}
.mt35 {margin:35px auto 0}
.mt40 {margin:40px auto 0}
.mt45 {margin:45px auto 0}
.mt50 {margin:50px auto 0}
.mt60 {margin:60px auto 0}
.mt70 {margin:70px auto 0}
.mt75 {margin:75px auto 0}
.mt80 {margin:80px auto 0}
.mt90 {margin:90px auto 0}
.mt100 {margin:100px auto 0}
.mt110 {margin:110px auto 0}
.mt120 {margin:120px auto 0}
.mt140 {margin:140px auto 0}
.mt150 {margin:150px auto 0}
.mt270 {margin:270px auto 0}

/* KV */
#sub_kv {
	max-width: 1340px;
	height: 180px;
	margin: 0 auto;
	padding: 0 10px 15px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	h3 {
		margin: 0;
		padding: 0;
		font-size: 24px;
		font-family: "Montserrat", sans-serif;
		font-weight: var(--weight-extrabold1);
		letter-spacing: 0.1em;
		background: linear-gradient(90deg, #333333 0%, #CCCCCC 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	h2 {
		margin: 0;
		padding: 0;
		font-size: 46px;
		letter-spacing: 0.05em;
		line-height: 160%;
		font-weight: var(--weight-bold2);
		background: linear-gradient(90deg, #333333 0%, #CCCCCC 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		&.en {
			font-size: 60px;
			font-family: "Montserrat", sans-serif;
			font-weight: var(--weight-extrabold1);
			letter-spacing: 0.05em;
		}
	}
	&.works {
		h2 {
			background: linear-gradient(180deg, #333333 0% 8%, #CCCCCC 92% 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
}

/* パンくず */
#breadcrumb {
	max-width: 1340px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 12px;
	line-height: 180%;
	text-align: right;
	a {
		color: #333;
		text-decoration: none;
		&:hover {
			color: #EB5B01;
		}
	}
}

/* コンテンツ */
section.contents {
	margin: 0 auto;
	padding: 175px 0;
	&.pad_t_l {
		padding-top: 265px;
	}
	&.bg {
		background: #f6f6f6;
	}
	div.contents_in {
		max-width: 1340px;
		margin: 0 auto;
		padding: 0 10px;
	}
}

/* タイトル・リード文 */
div.cont_ttl {
	margin: 0 auto;
	padding: 0;
	&.left {
		text-align: left;
	}
	h2 {
		margin: 0 auto;
		padding: 0;
		span {
			display: inline-block;
			margin: 0;
			padding: 0;
			font-size: 60px;
			line-height: 160%;
			font-family: "Montserrat", sans-serif;
			font-weight: var(--weight-extrabold1);
			letter-spacing: 0.1em;
			background: linear-gradient(90deg, #333333 0%, #CCCCCC 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	h3 {
		margin: -5px 0 0;
		padding: 0;
		span {
			display: inline-block;
			margin: 0;
			padding: 3px 0 0;
			font-size: 15px;
			line-height: 160%;
			font-weight: var(--weight-bold1);
			color: #999999;
			border-top: 1px solid #333;
		}
	}
	p {
		margin: 50px auto 0;
		font-size: 18px;
		line-height: 200%;
	}
}

/* 共通 SERVICE */
section.service_cont {
	margin: 0 auto;
	padding: 165px 0 180px;
	background: #F6F6F6;
	ul {
		max-width: 1520px;
		margin: 0 auto;
		padding: 58px 10px 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		li {
			width: 48%;
			margin: 80px 0 0;
			padding: 0;
			text-align: left;
			a {
				display: block;
				width: 100%;
				margin: 0;
				padding: 0;
				background: #fff;
				text-decoration: none;
				.txt {
					width: 100%;
					margin: 0;
					padding: 70px;
					h4 {
						margin: 0;
						padding: 0;
						span {
							display: inline-block;
							margin: 0;
							padding: 0 0 5px;
							font-size: 30px;
							line-height: 160%;
							font-weight: var(--weight-bold1);
							border-bottom: 1px solid #fff;
							transition: 0.2s linear;
						}
					}
					p {
						display: inline-block;
						margin: 20px 0 0;
						padding: 0;
						font-size: 16px;
						line-height: 200%;
					}
				}
				&:hover {
					transform: translateY(-5px);
					.txt {
						h4 {
							span {
								border-bottom: 1px solid #EB5C02;
							}
						}
					}
				}
			}
			.img {
				width: 100%;
				margin: 0;
				padding: 0;
				img {
					width: 100%;
					height: 435px;
					object-fit: cover;
				}
			}
		}
	}
}

/* トップのリード文 */
section.cont_top_txt {
	max-width: 1340px;
	margin: 75px auto 0;
	padding: 0 10px;
	font-size: 18px;
	line-height: 200%;
	text-align: left;
}

/* ABOUT */
section.about_top {
	margin: 15px auto 0;
	padding: 0;
	background: url(../about/images/about_top.webp) center / cover no-repeat;
	position: relative;
	z-index: 2;
	div.top_in {
		max-width: 1320px;
		height: 840px;
		margin: 0 auto;
		position: relative;
		.txt {
			position: absolute;
			width: 280px;
			margin: 0;
			padding: 330px 90px 95px;
			background: #fff;
			bottom: -470px;
			right: -40px;
			h3 {
				margin: 0;
				padding: 0;
				font-size: 36px;
				line-height: 150%;
				text-indent: -6em;
				text-align: left;
				font-weight: var(--weight-bold2);
				writing-mode: vertical-rl;
			}
		}
	}
}
section.about_attempt {
	margin: 0 auto;
	padding: 0 10px;
	div.attempt_in {
		max-width: 1500px;
		margin: 0 auto;
		padding: 170px 0 175px;
		background: #fff;
		position: relative;
		z-index: 1;
		h6 {
			width: 820px;
			padding: 0;
			font-size: 18px;
			line-height: 200%;
			font-weight: var(--weight-nomal);
		}
		.attempt_box {
			width: 540px;
			margin: 0 auto;
			padding: 45px 0;
			border-bottom: 2px solid #ededed;
			&:first-of-type {
				padding-top: 75px;
			}
			h5 {
				margin: 0 auto;
				padding: 0;
				font-size: 30px;
				list-style: 160%;
				letter-spacing: 1px;
				font-weight: var(--weight-bold2);
			}
			h4 {
				display: inline-block;
				margin: 8px auto 25px;
				padding: 0 22px;
				position: relative;
				z-index: 1;
				&:before {
					position: absolute;
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background: #333333;
					top: 50%;
					left: 0;
					z-index: -1;
				}
				span {
					margin: 0 auto;
					padding: 0 0.1em;
					font-size: 16px;
					list-style: 160%;
					font-weight: var(--weight-nomal);
					background: #fff;
				}
			}
			p {
				font-size: 18px;
				line-height: 200%;
				white-space: nowrap;
			}
		}
		h3 {
			width: 820px;
			margin: 90px auto 0;
			padding: 0;
			font-size: 24px;
			line-height: 200%;
			font-weight: var(--weight-nomal);
		}
	}
}
section.about_img {
	min-width: 1060px;
	margin: -145px auto 0;
	padding: 0;
	img {
		width: 100%;
		height: 620px;
		object-fit: cover;
	}
}
dl.about_prof {
	width: 940px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	dt {
		width: 430px;
		margin: 65px 0 0;
		padding: 0 0 0 215px;
		font-size: 16px;
		line-height: 200%;
	}
	dd {
		width: 510px;
		margin: 65px 0 0;
		padding: 0;
		font-size: 16px;
		line-height: 200%;
		p {
			margin: 20px 0 0;
			padding: 0;
			&:first-of-type {
				margin-top: 0;
			}
		}
			a {
			text-decoration: none;
				&:hover{
					color: #EB5B01 !important;
						&:hover {
							opacity: 0.85;
						}
				}
			}
		img {
			display: inline-block;
			margin: 15px 0 0;
			padding: 0;
		}
	}
}
dl.about_history {
	width: 940px;
	margin: 0 auto;
	padding: 35px 0 0;
	text-align: left;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	dt {
		width: 430px;
		margin: 30px 0 0;
		padding: 0 0 0 215px;
		font-size: 16px;
		line-height: 200%;
		font-family: "Montserrat", sans-serif;
		font-weight: var(--weight-extrabold1);
		letter-spacing: .1em;
	}
	dd {
		width: 510px;
		margin: 30px 0 0;
		padding: 0;
		font-size: 16px;
		line-height: 200%;
	}
}
div.about_access {
	width: 940px;
	margin: 0 auto;
	padding: 45px 0 0 215px;
	text-align: left;
	p {
		margin: 20px 0 0;
		padding: 0;
		font-size: 16px;
		line-height: 200%;
	}
	.gmap {
		width: 100%;
		height: 350px;
		margin: 35px 0 0;
		padding: 0;
		position: relative;
		iframe {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
		}
	}
}


/* SERVICE */
section.service_top {
	margin: 15px auto 0;
	padding: 0;
	&.storedesign_build {
		background: url(../service/images/storedesign-build_top.webp) center / cover no-repeat;
	}
	&.display {
		background: url(../service/images/display_top.webp) center / cover no-repeat;
	}
	div.top_in {
		max-width: 1320px;
		height: 700px;
		margin: 0 auto;
		position: relative;
		.txt {
			position: absolute;
			display: inline-block;
			max-width: 1050px;
			margin: 0;
			padding: 75px 100px;
			background: #fff;
			bottom: -125px;
			right: -90px;
			p {
				margin: 0;
				padding: 0;
				font-size: 18px;
				line-height: 200%;
				text-align: left;
			}
		}
	}
}
section.service_common_img_txt {
	max-width: 1340px;
	padding: 0 10px;
	display: flex;
	align-items: flex-start;
	position: relative;
	.txt {
		width: 660px;
		margin: 0 0 140px;
		padding: 0;
		text-align: left;
		h3 {
			margin: 0;
			padding: 0;
			font-size: 36px;
			line-height: 160%;
			font-weight: var(--weight-bold2);
		}
		p {
			padding: 0;
			font-size: 16px;
			line-height: 200%;
		}
	}
	.img {
		position: absolute;
		margin: 0;
		padding: 0;
	}
	&.row {
		.txt {
			margin-top: -10px;
		}
		.img {
			width: 780px;
			top: 0;
			left: calc(50% + 210px);
		}
	}
	&.rev {
		flex-direction: row-reverse;
		.img {
			width: 642px;
			top: 158px;
			right: calc(50% + 210px);
		}
	}
}
section.common_middle_img {
	width: 100%;
	padding: 0;
	&.mt_storedesign_build {
		margin: 0 auto;
	}
	&.mt_display {
		margin: 150px auto 0;
	}
	img {
		width: 100%;
		height: 316px;
		object-fit: cover;
	}
}
dl.service_flow {
	max-width: 1140px;
	margin: 35px auto 0;
	padding: 0 10px;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	/*align-items: flex-start;*/
	dt {
		width: 420px;
		margin: 65px 0 0;
		padding: 0;
		font-size: 24px;
		line-height: 160%;
		font-weight: var(--weight-bold2);
		display: flex;
		align-items: flex-start;
		position: relative;
		&:before ,&:after {
			position: absolute;
			content: '';
			display: block;
			width: 1px;
			background: #333;
			left: 2px;
		}
		&:before {
			height: 90px;
			top: -72px;
		}
		&:after {
			height: calc(100% - 18px);
			top: 18px;
		}
		&:first-of-type:before {
			display: none;
		}
		&:last-of-type:after {
			display: none;
		}
		small {
			position: absolute;
			display: inline-block;
			width: 5px;
			height: 5px;
			margin: 0;
			padding: 0;
			background: #333;
			border-radius: 50%;
			top: 18px;
			left: 0;
		}
		span {
			display: inline-block;
			margin: 2px 20px 0 0;
			padding: 0 0 0 48px;
			font-size: 24px;
			line-height: 160%;
			font-family: "Montserrat", sans-serif;
			font-weight: var(--weight-bold2);
		}
	}
	dd {
		width: calc(100% - 420px);
		margin: 65px 0 0;
		padding: 0;
		font-size: 16px;
		line-height: 200%;
		.btn {
			margin: 10px 0 0;
			padding: 0;
			a {
				display: inline-block;
				width: 138px;
				height: 46px;
				margin: 0;
				padding: 0;
				font-size: 15px;
				line-height: 200%;
				font-family: "Montserrat", sans-serif;
				font-weight: var(--weight-bold2);
				text-decoration: none;
				border: 1px solid #DDDDDD;
				border-radius: 23px;
				display: flex;
				justify-content: center;
				align-items: center;
				&:hover {
					border: 1px solid #EB5B01 !important;
				}
			}
		}
		strong {
			display: block;
			margin: 20px 0 0;
			padding: 0;
			font-weight: var(--weight-bold2);
			&:first-of-type {
				margin-top: 0;
			}
		}
	}
}
ul.slick_box, ul.no_slick_box  {
	width: 100%;
	margin: 110px auto 0;
	padding: 0;
	.slick-track {
		display: flex;
	}
	li {
		display: inline-block;
		width: 380px !important;
		margin: 0 20px;
		padding: 0;
		em {
			display: block;
			width: 100%;
			margin: 5px 0 0;
			padding: 0;
			text-align: left;
			text-decoration: none;
			.img {
				width: 100%;
				margin: 0;
				padding: 0;
				img {
					width: 100%;
					height: 380px;
				}
			}
		}
		a {
			display: block;
			width: 100%;
			margin: 5px 0 0;
			padding: 0;
			text-align: left;
			text-decoration: none;
			&:hover {
				transform: translateY(-5px);
				h4 {
					border-bottom: 1px solid #EB5B01;
				}
			}
			.kind {
				margin: 30px 0 0;
				padding: 0;
				span {
					display: inline-block;
					margin: 0 10px 0 0;
					padding: 0.2em 1em;
					font-size: 13px;
					line-height: 160%;
					font-weight: var(--weight-nomal);
					color: #333;
					border: 1px solid #ddd;
				}
			}
			h4 {
				display: inline-block;
				margin: 30px 0 0;
				padding: 0;
				font-size: 20px;
				line-height: 160%;
				font-weight: var(--weight-bold1);
				border-bottom: 1px solid transparent;
				transition: 0.2s linear;
			}
			p {
				margin: 30px 0 0;
				padding: 0;
				font-size: 15px;
				line-height: 200%;
			}
		}
	}
}
div.slide_after_btn {
	max-width: 1340px;
	margin: 90px auto 0;
	padding: 0 10px;
	display: flex;
	justify-content: flex-end;
	a {
		display: inline-block;
		width: 260px;
		height: 46px;
		margin: 0;
		padding: 0;
		font-size: 15px;
		line-height: 200%;
		font-family: "Noto Sans", sans-serif;
		font-weight: var(--weight-bold1);
		text-decoration: none;
		border: 1px solid #DDDDDD;
		border-radius: 23px;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			border: 1px solid #EB5B01 !important;
		}
	}
}
section.service_support {
	max-width: 1520px;
	margin: 0 auto;
	padding: 190px 10px 180px;
	&.pt0 {
		padding-top: 0;
	}
	&.bg {
		background: #f6f6f6;
	}
	h2 {
		margin: 0 auto;
		padding: 0;
		font-size: 36px;
		line-height: 160%;
		font-weight: var(--weight-bold2);
	}
	ul {
		width: 100%;
		margin: 100px auto 0;
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-between;
		li {
			width: 48%;
			margin: 0;
			padding: 0;
			a {
				display: block;
				width: 100%;
				margin: 0;
				padding: 0 0 15px;
				text-decoration: none;
				img {
					display: block;
					width: 100%;
					height: 230px;
					object-fit: cover;
				}
				div {
					margin: 25px 0 0;
					padding: 0;
					text-align: left;
					display: flex;
					align-items: center;
					h3 {
						display: inline-block;
						margin: 0 70px 0 0;
						font-size: 24px;
						line-height: 160%;
						font-weight: var(--weight-bold2);
						white-space: nowrap;
						border-bottom: 1px solid #fff;
						transition: 0.2s linear;
					}
					span {
						display: inline-block;
						margin: 0;
						font-size: 16px;
						line-height: 200%;
					}
				}
				&:hover {
					transform: translateY(-5px);
					div {
						h3 {
							border-bottom: 1px solid #EB5C02;
						}
					}
				}
			}
		}
		li.single {
			width: 48%;
			margin: 0 auto;
			padding: 0;
			a {
				display: block;
				width: 100%;
				margin: 0;
				padding: 0 0 15px;
				text-decoration: none;
				img {
					display: block;
					width: 100%;
					height: 230px;
					object-fit: cover;
				}
				div {
					margin: 25px 0 0;
					padding: 0;
					text-align: left;
					display: block;;
					align-items: center;
					h3 {
						display: inline-block;
						margin: 0 70px .2em 0;
						font-size: 24px;
						line-height: 160%;
						font-weight: var(--weight-bold2);
						white-space: nowrap;
						border-bottom: 1px solid #fff;
						transition: 0.2s linear;
					}
					span {
						display: inline-block;
						margin: 0;
						font-size: 16px;
						line-height: 200%;
					}
				}
				&:hover {
					transform: translateY(-5px);
					div {
						h3 {
							border-bottom: 1px solid #EB5C02;
						}
					}
				}
			}
			}
	}


}

section.service_cont_01 {
	height: 791px;
	margin: 0 auto;
	padding: 350px 0 0;
	background: url(../service/images/services_storedesign_build_cont_bg.webp) center / cover no-repeat;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	h2 {
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		strong {
			margin: 0;
			padding: 0;
			font-size: 40px;
			line-height: 160%;
			letter-spacing: 0.05em;
			font-family: "Montserrat", sans-serif;
			font-weight: var(--weight-extrabold1);
		}
		img {
			display: inline-block;
			width: 63px;
			height: auto;
			margin: 0 50px;
		}
	}
}
section.service_edq {
	margin: 0 auto;
	padding: 0;
	background: linear-gradient(to bottom, #f6f6f6 0 740px, #fff 740px 100%);
	ul.edq {
		max-width: 1520px;
		margin: 0 auto;
		padding: 0 10px;
		list-style: none;
		display: flex;
		justify-content: space-between;
		li {
			width: 30.65%;
			margin: -140px 0 0;
			padding: 75px 4% 80px;
			background: #fff;
			position: relative;
			z-index: 1;
			h3 {
				margin: 0 auto;
				padding: 0;
				font-size: 30px;
				line-height: 180%;
				font-weight: var(--weight-bold2);
			}
			p {
				margin: 30px auto 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
			}
		}
	}
	ul.example {
		max-width: 1340px;
		margin: 120px auto 0;
		padding: 0 10px;
		list-style: none;
		display: flex;
		justify-content: center;
		li {
			width: calc(100% / 3);
			margin: 0;
			padding: 0;
			background: #f6f6f6;
			img {
				display: block;
				width: 100%;
				height: 256px;
				object-fit: cover;
			}
			.txt {
				width: 100%;
				margin: 0;
				padding: 60px 10%;
				text-align: left;
				border-right: 1px solid #ddd;
				h3 {
					margin: 0;
					padding: 0;
					font-size: 24px;
					line-height: 180%;
					font-weight: var(--weight-bold2);
				}
				p {
					margin: 25px 0 0;
					padding: 0;
					font-size: 16px;
					line-height: 200%;
				}
			}
			&:last-of-type {
				.txt {
					border-right: none;
				}
			}
		}
	}
}
ul.situations {
	max-width: 1340px;
	margin: 110px auto 0;
	padding: 0 10px;
	list-style: none;
	display: flex;
	justify-content: center;
	li {
		width: calc(100% / 3);
		margin: 0;
		padding: 0;
		background: #fff;
		img {
			display: block;
			width: 100%;
			height: 256px;
			object-fit: cover;
		}
		.txt {
			width: 100%;
			margin: 0;
			padding: 50px 10% 60px;
			border-right: 1px solid #ddd;
			h3 {
				margin: 0 auto;
				padding: 0;
				font-size: 24px;
				line-height: 180%;
				font-weight: var(--weight-bold2);
			}
		}
		&:last-of-type {
			.txt {
				border-right: none;
			}
		}
	}
}
ul.features {
	max-width: 1520px;
	margin: 110px auto 0;
	padding: 0 10px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	li {
		width: 30.65%;
		margin: 0;
		padding: 75px 2% 80px;
		background: #f6f6f6;
		h3 {
			margin: 0 auto;
			padding: 0;
			font-size: 30px;
			line-height: 180%;
			font-weight: var(--weight-bold2);
		}
		p {
			margin: 30px auto 0;
			padding: 0;
			font-size: 16px;
			line-height: 200%;
		}
	}
	&.bgw {
		li {
			background: #fff;
		}
	}
}


/* WORKS */
section.works_list {
	max-width: 1520px;
	margin: 0 auto;
	padding: 150px 10px 0;
	ul {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		li {
			width: 30%;
			margin: 90px 0 0 5%;
			padding: 0;
			&:nth-of-type(3n - 2) {
				margin-left: 0;
			}
			a {
				display: block;
				width: 100%;
				margin: 0;
				padding: 0;
				text-align: left;
				text-decoration: none;
				.img {
					width: 100%;
					margin: 0;
					padding: 0;
					background: #f6f6f6;
                    position: relative;
					img {
						width: 100%;
						height: 380px;
						object-fit: cover;
					}
                    span.copy {
                        position: absolute;
                        display: inline-block;
                        margin: 0;
                        padding: 0;
                        font-size: 15px;
                        line-height: 160%;
                        color: #fff;
                        bottom: 0.5em;
                        right: 0.8em;
                    }
				}
				.cat {
					margin: 20px 0 0;
					padding: 0;
					span {
						display: inline-block;
						margin: 0;
						padding: 0.2em 12px;
						font-size: 12px;
						line-height: 150%;
						border: 1px solid #dddddd;
						&:nth-of-type(n + 2) {
							margin-left: 5px;
						}
					}
				}
				.name {
					margin: 25px 0 0;
					padding: 0;
					h2 {
						display: inline-block;
						margin: 0;
						padding: 0 0 5px;
						font-size: 20px;
						line-height: 160%;
						font-weight: var(--weight-bold1);
						border-bottom: 1px solid transparent;
						transition: 0.2s linear;
					}
				}
				p {
					margin: 25px 0 0;
					padding: 0;
					font-size: 16px;
					line-height: 200%;
				}
				&:hover {
					opacity: 0.8;
					.name {
						h2 {
							border-bottom: 1px solid #EB5B01;
						}
					}
				}
			}
		}
	}
}
section.works_top_ttl {
	max-width: 1340px;
	margin: 0 auto;
	padding: 60px 10px 0;
	text-align: left;
	h3 {
		margin: 0;
		padding: 0;
		font-size: 20px;
		font-weight: var(--weight-bold1);
		letter-spacing: 0.05em;
	}
	h2 {
		margin: 0;
		padding: 0;
		font-size: 40px;
		line-height: 160%;
		font-weight: var(--weight-bold2);
	}
	.cat {
		margin: 10px 0 0;
		padding: 0;
		span {
			display: inline-block;
			margin: 0;
			padding: 0.2em 12px;
			font-size: 15px;
			line-height: 160%;
			border: 1px solid #dddddd;
			&:nth-of-type(n + 2) {
				margin-left: 8px;
			}
		}
	}
}
section.works_main {
	max-width: 1520px;
	margin: 90px auto 0;
	padding: 0 10px;
	div.main_img {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		/*background: #f6f6f6;*/
		img {
			width: 100%;
			height: 1000px;
			object-fit: contain;
			cursor: pointer;
			transition: 0.2s linear;
			&:hover {
				opacity: 0.8;
			}
		}
	}
	ul {
		width: 100%;
		margin: 0 auto;
		padding: 40px 0 0;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		li {
			width: 30.6%;
			margin: 80px 0 0 4.1%;
			padding: 0;
			background: #f6f6f6;
			&:nth-of-type(3n - 2) {
				margin-left: 0;
			}
			img {
				width: 100%;
				height: 305px;
				object-fit: cover;
				cursor: pointer;
				transition: 0.2s linear;
				&:hover {
					opacity: 0.8;
				}
			}
			img[loading="lazy"] {
				opacity: 0;
				transition: opacity 0.8s ease-in-out;
				&.fade-in {
					opacity: 1;
				}
			}
		}
		li.contain {
			img	{
				object-fit: contain;
			}		
		}
        div.copy {
            width: 100%;
            margin: 30px 0 0;
            padding: 0;
            font-size: 18px;
            line-height: 160%;
            text-align: right;
        }
	}
}
.lum-lightbox {
	z-index: 500;
}
section.works_info {
	margin: 180px auto 0;
	padding: 150px 0 125px;
	background: #f6f6f6;
	div.info_cont {
		max-width: 1150px;
		margin: 0 auto;
		padding: 0 10px;
		display: flex;
		align-items: flex-start;
		h3 {
			width: 50%;
			margin: 0;
			padding: 0;
			span {
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 28px;
				line-height: 160%;
				font-family: "Montserrat", sans-serif;
				font-weight: var(--weight-extrabold1);
				letter-spacing: 0.05em;
				white-space: nowrap;
				background: linear-gradient(90deg, #333333 0%, #CCCCCC 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		.info {
			width: 50%;
			margin: 0;
			padding: 0;
			p {
				margin: 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
				text-align: left;
			}
			.name_address {
				margin: 80px 0 0;
				padding: 0;
				display: flex;
				justify-content: flex-end;
				div {
					min-width: 400px;
					margin: 0;
					padding: 20px;
					text-align: left;
					border: 1px solid #333333;
					h4 {
						margin: 0;
						padding: 0;
						font-size: 12px;
						line-height: 160%;
						font-weight: var(--weight-bold2);
						strong {
							margin: 0 0 0 14px;
							padding: 0;
							font-weight: var(--weight-bold2);
						}
					}
					h5 {
						margin: 8px 0 0;
						padding: 0;
						font-size: 12px;
						line-height: 160%;
						font-weight: var(--weight-nomal);
					}
				}
			}
			span.area_date {
				display: block;
				margin: 5px 0 0;
				padding: 0;
				font-size: 12px;
				line-height: 160%;
				text-align: right;
			}
			.cat {
				margin: 5px 0 0;
				padding: 0;
				text-align: right;
				span {
					display: inline-block;
					margin: 0;
					padding: 0.2em 8px;
					font-size: 13px;
					line-height: 160%;
					border: 1px solid #dddddd;
					background: #fff;
					&:nth-of-type(n + 2) {
						margin-left: 8px;
					}
				}
			}
		}
	}
}
div.works_btm_pager {
	max-width: 1430px;
	margin: 90px auto 0;
	padding: 0 10px;
	position: relative;
	.prev, .next {
		position: absolute;
		display: block;
		width: 350px;
		margin: 0;
		padding: 0;
		top: 0;
		a {
			display: inline-block;
			width: 350px;
			min-height: 46px;
			margin: 0;
			font-size: 15px;
			line-height: 160%;
			font-family: "Noto Sans", sans-serif; 
			font-weight: var(--weight-bold1);
			text-decoration: none;
			border: 1px solid #DDDDDD;
			border-radius: 23px;
			display: flex;
			align-items: center;
			position: relative;
			&:hover {
				border: 1px solid #EB5B01 !important;
			}
			strong {
				font-weight: var(--weight-bold1);
			}
			span {
				display: none;
			}
		}
	}
	.prev {
		left: 0;
		a {
			justify-content: flex-start;
			padding: 5px 10px 5px 35px;
			text-align: left;
			&:before {
				position: absolute;
				content: '';
				display: block;
				width: 8px;
				height: 15px;
				margin: 0;
				padding: 0;
				background: url(../images/icon/works_arrow_prev.png) center / contain no-repeat;
				top: calc(50% - 7.5px);
				left: 15px;
			}
		}
	}
	.next {
		right: 0;
		a {
			justify-content: flex-end;
			padding: 5px 35px 5px 10px;
			text-align: right;
			&:after {
				position: absolute;
				content: '';
				display: block;
				width: 8px;
				height: 15px;
				margin: 0;
				padding: 0;
				background: url(../images/icon/works_arrow_next.png) center / contain no-repeat;
				top: calc(50% - 7.5px);
				right: 15px;
			}
		}
	}
	.back {
		width: 350px;
		margin: 0 auto;
		padding: 0;
		a {
			display: inline-block;
			width: 350px;
			height: 46px;
			margin: 0;
			padding: 0;
			font-size: 15px;
			line-height: 200%;
			font-family: "Noto Sans", sans-serif; 
			font-weight: var(--weight-bold1);
			text-decoration: none;
			border: 1px solid #DDDDDD;
			border-radius: 23px;
			display: flex;
			justify-content: center;
			align-items: center;
			&:hover {
				border: 1px solid #EB5B01 !important;
			}
		}
	}
}
section.works_info + div.btn {
	margin: 90px auto 0;
	padding: 0;
	display: flex;
	justify-content: center;
	a {
		display: inline-block;
		width: 350px;
		height: 46px;
		margin: 0;
		padding: 0;
		font-size: 15px;
		line-height: 200%;
		font-family: "Noto Sans", sans-serif; 
		font-weight: var(--weight-bold1);
		text-decoration: none;
		border: 1px solid #DDDDDD;
		border-radius: 23px;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			border: 1px solid #EB5B01 !important;
		}
	}
}



/* Contact */
div.cont_tbl {
	max-width: 980px;
	margin: 80px auto 0;
	padding: 0 10px;
	&.frame {
		margin-top: 0;
	}
	p.form_top {
		margin: 0;
		padding: 0;
		font-size: 17px;
		font-weight: var(--weight-bold1);
		text-align: left;
		span {
			margin: 0 10px 0 0;
			padding: 0;
			color: #EB5B01;
		}
	}
	div.form_cont {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		dl {
			width: 100%;
			margin: 0;
			padding: 0;
			font-size: 17px;
			line-height: 180%;
			font-weight: var(--weight-bold1);
			text-align: left;
			display: flex;
			flex-wrap: wrap;
			dt {
				width: 290px;
				margin: 0 ;
				padding: 25px 20px 25px 0;
				font-weight: var(--weight-bold1);
				span {
					margin: 0 0 0 10px;
					font-size: 14px;
					color: #EB5B01;
				}
			}
			&.frame {
				dt{
					padding: 10px 20px 10px 0;
				}
			}
			dd {
				width: calc(100% - 290px);
				margin: 0;
				padding: 10px 0;
				input[type=text],
				input[type=tel],
				input[type=email],
				select {
					width: 100%;
					height: 60px;
					padding: 10px 10px;
					font-size: 18px;
					line-height: 180%;
					font-weight: var(--weight-noaml);
					font-family	: inherit;
					border: none;
					background: #f6f6f6;
				}
				textarea {
					width: 100%;
					height: 250px;
					padding: 10px 10px;
					font-size: 17px;
					line-height: 180%;
					font-weight: var(--weight-noaml);
					font-family	: inherit;
					background: #f6f6f6;
					border: none;
				}
				input[type=checkbox],
				input[type=radio] {
					margin: 0 5px 0 0;
					width: 20px;
					height: 20px;
					vertical-align: -0.3em;
				}
				div.privacy_box {
					width: 100%;
					margin: 0;
					padding: 20px 20px;
					font-size: 15px;
					line-height: 200%;
					background: #f6f6f6;
					.box {
						padding: 0 10px 0 0;
						height: 230px;
						overflow-y: auto;
						scrollbar-color: #222222 #f6f6f6;
						scrollbar-width: thin;
						strong {
							display: block;
							margin: 30px 0 0;
							padding: 0;
							font-size: 17px;
							line-height: 200%;
							font-weight: var(--weight-bold1);
						}
						p {
							margin: 1em 0 0;
							padding: 0;
							span {
								display: block;
								margin: 0;
								padding: 0 0 0 1em;
								text-indent: -1em;
							}
							&.sign {
								text-align: right;
							}
						}
						ul {
							margin: 0;
							padding: 25px 0 0;
							list-style: none;
							li {
								margin: 10px 0 0;
								padding: 0 0 0 1.2em;
								text-indent: -1.2em;
							}
						}
					}
				}
				div.privacy_link {
					margin: 10px auto 0;
					padding: 0;
					font-size: 16px;
					line-height: 180%;
					text-align: center;
				}
					div.cont_tbl div.privacy_link label {
						display: inline-block;
						margin: 0 auto;
						padding: 0;
					}
			}
		}
		#contact_btn {
			width: 100%;
			margin: 0 auto;
			padding: 90px 0 0;
			display: flex;
			justify-content: center;
			div.form_btn1,
			div.form_btn2 {
				display: inline-block;
				width: 425px;
				height: 70px;
				margin: 0 10px;
			}
			div.form_btn1 {
				button {
					display: block;
					width: 350px;
					height: 70px;
					font-size: 20px;
					line-height: 180%;
					margin: 0 auto;
					padding: 0;
					font-family	: inherit;
					color: #fff;
					font-weight: var(--main-font-bold1);
					border: 1px solid #EB5B01;
					background: #EB5B01;
					border-radius: 45px;
					cursor: pointer;
					transition: 0.2s linear;
					&:hover {
						color: #1F1F1F;
						background: #fff;
					}
				}
			}
			div.form_btn2 {
				button {
					display: block;
					width: 350px;
					height: 70px;
					font-size: 20px;
					line-height: 180%;
					margin: 0 auto;
					padding: 0;
					font-family	: inherit;
					color: #fff;
					font-weight: var(--main-font-bold1);
					border: 1px solid #333;
					background: #333;
					border-radius: 45px;
					cursor: pointer;
					transition: 0.2s linear;
					&:hover {
						color: #1F1F1F;
						background: #fff;
					}
				}
			}
		}
		div.cont_btn {
			margin: 50px auto 0;
			padding: 0;
			display: flex;
			justify-content: center;
			a {
				display: inline-block;
				width: 350px;
				height: 46px;
				margin: 0;
				padding: 0;
				font-size: 15px;
				line-height: 200%;
				font-weight: var(--weight-bold1);
				text-decoration: none;
				border: 1px solid #DDDDDD;
				border-radius: 23px;
				display: flex;
				justify-content: center;
				align-items: center;
				&:hover {
					border: 1px solid #EB5B01 !important;
				}
			}
		}
	}
}