@charset "utf-8";
#Service {
	padding-bottom: 0;
}
#Service .border .border-style {
  width: 28.625rem;
}
#building-sheet-metal, #stainless-steel-work-point, #duct-sheet-metal-work, #rain-barrel-exchange-work, #metal-roof-point, #corrugated-plate-work, #metal-siding-work, #ridge-sheet-metal-exchange-work {
	scroll-margin-top: clamp(7.5rem, 0.351rem + 13.6986vw, 10.625rem);
}
/* 対応工事一覧メニュー設定 */
.service-menu {
	position: fixed;
	display: flex;
	flex-direction: row-reverse;
	right: 0;
	z-index: 5;
}
.service-menu button, .service-menu-box, .service-menu-close {
	cursor: pointer;
}
.service-menu button {
	width: 2.9375rem;
	height: 13.9375rem;
	background: var(--title);
	-webkit-clip-path: polygon( 0 0, 100% 0, 100% 100%, 62% 100%, 0 88%);
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 62% 100%, 0 88%);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.service-menu-box {
	width: 2.75rem;
	height: 13.75rem;
	background: #E3FFE7;
	-webkit-clip-path: polygon( 0 0, 100% 0, 100% 100%, 65% 100%, 0 88%);
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 65% 100%, 0 88%);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.service-menu-box p {
	font-size: 1.25rem;
	text-decoration: none;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	box-sizing: border-box;
}
.service-menu-close {
	width: 2.75rem;
	height: 13.75rem;
	background: white;
	-webkit-clip-path: polygon( 0 0, 100% 0, 100% 100%, 65% 100%, 0 88%);
	clip-path: polygon( 0 0, 100% 0, 100% 100%, 65% 100%, 0 88%);
	display: none;
	justify-content: center;
	align-items: center;
	position: relative;
}
.service-menu-close p {
	font-size: 1.25rem;
	text-decoration: none;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	box-sizing: border-box;
}
.service-menu-low {
	display: flex;
}
.service-menu-item {
	position: relative;
	width: clamp(3.4375rem, 0.5779rem + 5.4795vw, 4.6875rem);
	height: 18.75rem;
	background: #fff;
	border: 1px solid #33A48A;
}
.service-menu-item a {
	width: 100%;
	height: 100%;
	padding-top: 1.875rem;
	display: flex;
	align-items: center;
	font-size: 1.25rem;
	color: var(--text);
	text-decoration: none;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.menu-triangle {
	content: '';
	position: absolute;
	bottom: 1.768vh;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-top: 7px solid #00A783;
}
/* 小見出し */
.center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.box {
	width: 19.5rem;
	height: 4.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	font-size: 1.875rem;
	text-align: center;
	border: 1px solid #D2A730;
	margin: 3.75rem 0;
}
/* 工事内容詳細 */
.service-container {
	max-width: 100%;
	margin: 0;
	padding-right: 0;
	padding-left: 0;
	overflow: visible;
}
.service-wrapper {
	max-width: 72.75rem;
	display: flex;
	align-items: center;
	margin: 0 clamp(0rem, -28.1111rem + 39.1111vw, 11rem);
	padding-left: 2rem;
	padding-right: 2rem;
}
.service-wrapper .border-style {
	position: relative;
	margin-left: 1.875rem;
	padding-left: 2rem;
}
#rain-barrel-exchange-work .border-style {
	width: clamp(16rem, -2.3014rem + 35.0685vw, 24rem);
}
.service-img {
	margin: 2.5rem 0 3.75rem;
}
.service-wrapper-left {
	margin-left: clamp(0rem, -28.1111rem + 39.1111vw, 11rem);
	padding-left: 2rem;
}
.service-wrapper-right {
	margin-right: clamp(0rem, -28.1111rem + 39.1111vw, 11rem);
	padding-right: 2rem;
}
.service-content {
	margin-bottom: 2.5rem;
	flex-direction: column;
	align-items: normal;
	gap: 2.5rem;
}
.service-detail h3, .service-detail p {
	font-weight: 500;
}
.service-detail h3 {
	margin-bottom: 1rem;
	font-size: 1.5625rem;
	color: var(--title);
	text-decoration: underline;
	text-decoration-color: var(--title);
	text-decoration-style: solid;
	text-underline-offset: .2rem;
	-webkit-text-underline-offset: .2rem;
}
.service-detail p {
	line-height: clamp(2rem, 0.8562rem + 2.1918vw, 2.5rem);
}
/* 施工事例詳細 */
.service-after {
	margin-bottom: 2.5rem;
	align-items: stretch;
	gap: clamp(1.875rem, -2.4144rem + 8.2192vw, 3.75rem);
}
.service-after-img {
	position: relative;
	flex: 1;
}
.service-after-img img {
	height: 100%;
	object-fit: cover;
}
.service-wrapper .masking-tape-t .mask-name, .service-wrapper .masking-tape-y .mask-name {
	right: clamp(-4.5rem, -1.5rem + -3vw, -2rem);
	bottom: clamp(1.25rem, 2.2347rem + -1.8868vw, 0.9375rem);
	transform: rotate(-3.89deg);
	z-index: 1;
}
.service-after-detail {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: white;
	border: solid 1px #D2A730;
	box-shadow: 4px 6px 2px rgba(180, 219, 210, 0.44);
}
.hex-container {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -44%);
	width: 1.875rem;
	height: auto;
	z-index: 2;
	-webkit-filter: drop-shadow(1px 1px 1px rgba(0, 128, 128, 0.5));
	filter: drop-shadow(1px 1px 1px rgba(0, 128, 128, 0.5));
}
.service-after-info {
	padding: 1rem clamp(1.25rem, -0.8947rem + 4.1096vw, 2.1875rem);
}
.service-after-info ul {
	margin-left: 1.2em;
	font-size: clamp(0.875rem, 0.589rem + 0.5479vw, 1rem);
}
.service-after-info li {
	line-height: 2.2;
	list-style: disc;
	text-decoration-line: underline;
	text-decoration-color: #d2a730;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
	-webkit-text-underline-offset: 5px;
}
/* 職人コメント */
.service-comment-box {
	position: relative;
}
.service-comment {
	background-color: #E8FEDF;
	border: 1px solid #D2A730;
	padding: 2.5rem 3.125rem;
	position: relative;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	width: clamp(35rem, -13.613rem + 93.1507vw, 56.25rem);
	margin-bottom: 3.125rem;
	display: flex;
	flex-direction: column;
	font-weight: 500;
	line-height: 2.2;
	gap: 1rem;
}
.service-comment::before {
	content: "";
	position: absolute;
	right: 5%;
	bottom: 4px;
	border-style: solid;
	border-width: 50px 40px 0 0;
	border-color: #D2A730 transparent transparent;
	translate: -50% 100%;
	transform: skew(50deg);
	transform-origin: top;
	z-index: -1;
}
.service-comment::after {
	content: "";
	position: absolute;
	right: 5.35%;
	bottom: 4px;
	border-style: solid;
	border-width: 47px 37px 0 0;
	border-color: #E8FEDF transparent transparent;
	translate: -50% 100%;
	transform: skew(50deg);
	transform-origin: top;
	z-index: 1;
}
.service-comment-title {
	position: relative;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	font-size: 1.25rem;
	color: var(--title);
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: var(--title);
	text-decoration-style: dotted;
	text-decoration-thickness: 3px;
	text-underline-offset: .5rem;
	-webkit-text-underline-offset: .5rem;
}
.service-comment-lines, .service-comment-lines::before, .service-comment-lines::after {
	content: '';
	position: absolute;
	top: 0;
	right: -1rem;
	width: .75rem;
	height: 1.5px;
	display: flex;
	background-color: #D2A730;
	border-radius: .5rem;
	transform: rotate(-45.15deg);
}
.service-comment-lines::before {
	top: -9px;
	right: 2px;
	transform: rotate(138deg);
}
.service-comment-lines::after {
	top: 9px;
	right: 2px;
	transform: rotate(42deg);
}
.service-comment-text strong {
	text-decoration-line: underline;
	text-decoration-color: var(--title);
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: .3rem;
	-webkit-text-underline-offset: .3rem;
}
.service-comment-img {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15rem;
	margin-right: 2rem;
	z-index: 2;
}
@media (max-width:834px) {
	#Service .border .border-style {
		width: calc(100% - clamp(5rem, 3.4783rem + 5.7971vw, 6.5rem));;
	}
	#building-sheet-metal, #stainless-steel-work-point, #duct-sheet-metal-work, #rain-barrel-exchange-work, #metal-roof-point, #corrugated-plate-work, #metal-siding-work, #ridge-sheet-metal-exchange-work {
		scroll-margin-top: 100px;
	}
	.service-menu {
		display: none;
	}
	.box {
		width: clamp(10.625rem, 1.6214rem + 34.2995vw, 19.5rem);
		height: clamp(2.5rem, 0.7246rem + 6.7633vw, 4.25rem);
		font-size: clamp(1.125rem, 0.3641rem + 2.8986vw, 1.875rem);
		margin: 1.25rem 0 3.25rem;
	}
	.service-wrapper {
		padding-left: 1.5625rem;
		padding-right: 1.5625rem;
		overflow: hidden;
	}
	.service-wrapper h2 {
		text-wrap: nowrap;
	}
	.service-wrapper .border-style {
		margin-left: .625rem
	}
	.service-img {
		margin: clamp(1.25rem, -0.0181rem + 4.8309vw, 2.5rem) 0 clamp(1.25rem, -1.2862rem + 9.6618vw, 3.75rem);
	}
	.service-wrapper-left {
		padding-left: 1.5625rem;
	}
	.service-wrapper-right {
		padding-right: 1.5625rem;
	}
	.service-content {
		margin-bottom: clamp(1.25rem, -0.0181rem + 4.8309vw, 2.5rem);
		gap: clamp(1.25rem, -0.0181rem + 4.8309vw, 2.5rem);
	}
	.service-detail h3 {
		margin-bottom: 5px;
		font-size: clamp(1.25rem, 0.933rem + 1.2077vw, 1.5625rem);
	}
	.service-detail p {
		font-size: clamp(0.875rem, 0.7482rem + 0.4831vw, 1rem);
	}
	/* 施工事例詳細 */
	.service-after {
		margin-bottom: clamp(1.25rem, -0.0181rem + 4.8309vw, 2.5rem);
		flex-direction: column;
		gap: clamp(2.1875rem, 1.2364rem + 3.6232vw, 3.125rem);
	}
	.service-after-img img {
		height: auto;
		object-fit: contain;
	}
	.service-wrapper .masking-tape-t .mask-name, .service-wrapper .masking-tape-y .mask-name {
		right: -1rem;
		bottom: 1.2rem;
		width: clamp(7.8125rem, 4.9592rem + 10.8696vw, 10.625rem);
	}
	.hex-container {
		width: clamp(1.5rem, 1.1196rem + 1.4493vw, 1.875rem);
	}
	.service-after-info {
		padding: 1.5rem 1.875rem;
	}
	.service-after-info ul {
		font-size: clamp(0.875rem, 0.7482rem + 0.4831vw, 1rem);
	}
	/* 職人コメント */
	.service-comment {
		padding: .875rem 1.875rem;
		width: 100%;
		gap: 5px;
	}
	.service-comment::before {
		right: 131.5px;
		bottom: 4px;
		border-width: 36px 31.5px 0 0;
	}
	.service-comment::after {
		right: clamp(8.4375rem, 9.2618rem + -3.1401vw, 7.625rem);
		bottom: 4px;
		border-width: 33px 28px 0 0;
	}
	.service-comment-lines {
		top: 10px;
	}
	.service-comment-text {
		font-size: clamp(0.875rem, 0.7482rem + 0.4831vw, 1rem);
	}
	.service-comment-img {
		width: 6.25rem;
		margin-right: 1.5625rem;
	}
}