@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');



/* #mainimage
-----------------------------------------------------------------------------------*/
#mainimage:has(#die-casting) {background: url("../products/die-casting/img/mainimage-die-casting.jpg") center/cover no-repeat;}
#mainimage:has(#ts_welding) {background: url("../products/ts_welding/img/mainimage-ts_welding.jpg") center/cover no-repeat;}
#mainimage:has(#other) {background: url("../products/other/img/mainimage-other.jpg") center/cover no-repeat;}





/* detail-wrap
-----------------------------------------------------------------------------------*/
.detail-wrap {
	margin-bottom: 1.5em;
	font-size: 1.1em;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	column-gap: 3em;
}
.detail-wrap .wire-diameter {}
.detail-wrap .length {}
.detail-wrap .identification-color {
	font-weight: 600;
	color: #fff;
}
.detail-wrap .identification-color span {
	display: block;
	width: 3em;
	background-color: #000;
	border-radius: 1em;
	text-align: center;
}
.detail-wrap .identification-color.color-red span {background-color: #FF0000;}
.detail-wrap .identification-color.color-green span {background-color: #00AE00;}
.detail-wrap .identification-color.color-lightblue span {background-color: #069EFF;}
.detail-wrap .use {}
.detail-wrap li {
	padding-left: 6em;
	position: relative;
}
.detail-wrap li:not(:last-child) {margin-bottom: 0.5em;}
.detail-wrap li::before {
	position: absolute;
	left: 0;
	width: 5em;
	background-color: #9d8e87;
	border-radius: 1em;
	text-align: center;
	font-weight: normal;
	color: #fff;
}
.detail-wrap .wire-diameter::before {content: '線径';}
.detail-wrap .length::before {content: '長さ';}
.detail-wrap .identification-color::before {content: '識別色';}
.detail-wrap .use::before {content: '用途';}

@media screen and (max-width: 480px) {
	.detail-wrap {font-size: 1em;}
}






/* img
-----------------------------------------------------------------------------------*/
.img-cagco {
	margin: 0 0 1em 1em;
	width: 50%;
	float: right;
}

@media screen and (max-width: 600px) {
	.img-cagco {
		margin: 0 0 1em;
		width: 100%;
		float: inherit;
	}
}





/* 
-----------------------------------------------------------------------------------*/
.text-products {
	margin-bottom: 1.5em;
	font-size: 1.15em;
}
.img-products {
	margin-bottom: 2em;
	padding: 2em;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.img-products .title {
	margin-bottom: 2em;
	padding: 0.5em;
	width: 100%;
	box-sizing: border-box;
	background-color: #ff5656;
	text-align: center;
	line-height: 1.3;
	font-size: 1.6em;
	font-weight: 600;
	color: #fff;
	position: relative;
	z-index: 0;
}
.img-products .title span {font-size: smaller;}
.img-products .title::before {
	content: '';
	position: absolute;
	inset: auto 0 -0.5em;
	margin: auto;
	width: 1.2em;
	height: 1.2em;
	background-color: #ff5656;
	transform: rotate(45deg);
	z-index: -1;
}
.img-products .img {
	margin-bottom: 1em;
	width: 100%;
	text-align: center;
}
.img-products .img img {
	width: auto;
	height: 100%;
	max-height: 300px;
}

@media screen and (max-width: 600px) {
	.img-products {padding: 1.5em;}
	.img-products .title span {display: block;}
	.img-products .img img {
		width: 100%;
		height: auto;
		max-height: inherit;
	}
}





/* parts-list
-----------------------------------------------------------------------------------*/
.parts-list {
	margin-bottom: 2em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-gap: 2em;
}
.parts-list::after {
	content: '';
	display: block;
	width: calc(100% / 3 - 1.5em);
}
.parts-list .box {
	padding: 1.5em;
	width: calc(100% / 3 - 1.5em);
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.parts-list .box .title {
	margin-bottom: 0.5em;
	padding-left: 1.3em;
	line-height: 1.2;
	font-size: 1.1em;
	font-weight: 600;
	position: relative;
}
.parts-list .box .title::before {
	content: '';
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 0.9em;
	height: 0.9em;
	box-sizing: border-box;
	border: solid #e6c0c0 4px;
	border-radius: 5px;
	background-color: #ede4e1;
}
.parts-list .box .img {
	border-radius: 5px;
	overflow: hidden;
}

@media screen and (max-width: 480px) {
	.parts-list {grid-gap: 1em;}
	.parts-list::after {width: calc(100% / 2 - 0.5em);}
	.parts-list .box {
		padding: 1em;
		width: calc(100% / 2 - 0.5em);
	}
	.parts-list .box .title {font-size: 1em;}
	.parts-list.sp .box {width: 100%;}
	.parts-list.sp .box .title {font-size: 1.1em;}
}






/* material-list
-----------------------------------------------------------------------------------*/
.material-list {
	margin-bottom: 2em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-row-gap: 1em;
	font-size: 1.1em;
}
.material-list li {
	padding: 0.5em 1em;
	width: calc(90% / 4);
	box-sizing: border-box;
	background-color: #fff;
	border: solid #dcd6d2 3px;
	border-radius: 5px;
	text-align: center;
}

@media screen and (max-width: 600px) {
	.material-list li {width: calc(95% / 2);}
}






/* casting-products-wrap
-----------------------------------------------------------------------------------*/
.casting-products-wrap {
	margin-bottom: 3em;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.casting-products-wrap .img {
	padding: 1.5em;
	width: 45%;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.casting-products-wrap .text {
	width: 50%;
	font-size: 1.1em;
}
.casting-products-wrap .text .point {
	font-size: 1.25em;
	font-weight: 600;
}
.casting-products-wrap .text .point::first-line {color: #ff5656;}

@media screen and (max-width: 480px) {
	.casting-products-wrap .img {margin-bottom: 1.5em;}
	.casting-products-wrap .img,
	.casting-products-wrap .text {width: 100%;}
}






/* caption-c
-----------------------------------------------------------------------------------*/
.caption-c {
	width: 100%;
	background-color: #fff;
	border: solid #ddd 5px;
	border-radius: 5px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.25em;
}
.caption-c p {padding: 0 2em;}
.caption-c div {
	width: 30%;
	min-width: 200px;
	text-align: center;
	overflow: hidden;
}
.caption-c a {
	display: block;
	padding: 2em;
	background-color: #e29399;
	border-radius: 0 3px 3px 0;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	position: relative;
}
.caption-c a:hover {
	background-color: #999;
}
.caption-c a::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 -1em;
	margin: auto;
	width: 2em;
	height: 2em;
	background-color: #fff;
	transform: rotate(45deg);
}

@media screen and (max-width: 480px) {
	.caption-c {
		flex-wrap: wrap;
		font-size: 1.15em;
	}
	.caption-c p {padding: 1.5em 1.5em 1em;}
	.caption-c div {
		width: 100%;
		min-width: inherit;
	}
	.caption-c a {
		padding: 2.5em 2em 2em;
		border-radius: 0 0 3px 3px;
	}
	.caption-c a::before {inset: -1em 0 auto;}
}






/* ダイカスト
-----------------------------------------------------------------------------------*/
#diecasting-area section:not(:last-child) {margin-bottom: 100px;}
#diecasting-area section {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-gap: 2em;
}
#diecasting-area h2,
#diecasting-area h3,
#diecasting-area .box.list-box {width: 100%;}
#diecasting-area .box {
	padding: 2em;
	width: calc(100% / 2 - 1em);
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#diecasting-area .box .img {
	border-radius: 5px;
	overflow: hidden;
}
#diecasting-area .box.list-box ul {
	margin-bottom: 1.5em;
	padding: 1.5em 1.5em 0.5em;
	background-color: #f7f6f5;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 1em;
}
#diecasting-area .box.list-box :is(p,li) {font-size: 1.2em;}

@media screen and (max-width: 480px) {
	#diecasting-area .box {width: 100%;}
}






/* レーザークラッド関連
-----------------------------------------------------------------------------------*/
.list-logo {
	margin-bottom: 1em;
	text-align: center;
	font-size: 1.1em;
	font-weight: 600;
}
.list-logo img {margin-bottom: 10px;}
.list-logo.senfeng img {width: 90%;}
.list-logo.blc img {
	width: auto;
	height: 100%;
	max-height: 100px;
}
.list-link {
	margin-top: 1em;
	background-color: #fff;
	text-align: center;
}
.list-link a {
	display: block;
	padding: 1em;
	box-sizing: border-box;
	border: solid #ddd 3px;
	line-height: 1.2;
}
.list-link a:hover {border-color: #ff5656;}
.list-link img {
	margin-bottom: 10px;
	width: auto;
	height: 100%;
}
.list-link.blc img {max-height: 55px;}
.list-link.senfeng img {max-height: 30px;}

@media screen and (max-width: 1024px) {
	#list-area {top: 70px;}
	.list-logo {font-size: 1em;}
}

.laserclad-tab-btn,
.laserclad-link-btn {
	display: flex;
	justify-content: space-around;
}
/* ヘッダーTABボタン */
.laserclad-tab-btn {
	margin-bottom: 80px;
	justify-content: space-evenly;
}
.laserclad-tab-btn .btn {
	width: clamp(11.25rem, 5.625rem + 18.75vw, 28.125rem);/* 180px~450px */
	height: clamp(11.25rem, 5.625rem + 18.75vw, 28.125rem);
	border-radius: 5px;
}
.laserclad-tab-btn .btn a {
	display: block;
	padding-top: 65%;
	height: 100%;
	box-sizing: border-box;
	border: solid #999 0.25em;
	text-align: center;
	line-height: 1.2;
	font-size: 1.2em;
	font-weight: 600;
	color: #999;
	overflow: hidden;
	text-decoration: none;
}
.laserclad-tab-btn .btn:first-child a {
	background: url("../products/ts_welding/img/logo-blc.png") #fff top 35% center/80% auto no-repeat;
}
.laserclad-tab-btn .btn:last-child a {
	background: url("../products/ts_welding/img/logo-senfeng.png") #fff top 45% center/80% auto no-repeat;
}
.laserclad-tab-btn .btn a:hover,
.laserclad-tab-btn .btn.on a {
	border-color: #ff5656;
	color: #ff5656;
}
/* ヘッダーボタン */
.laserclad-link-btn .btn {
	width: calc(90% / 2);
	text-align: center;
	line-height: 1.2;
	border-radius: 5px;
	overflow: hidden;
}
.laserclad-link-btn .btn a {
	display: block;
	padding: 1.5em 3em;
	height: 100%;
	box-sizing: border-box;
	background-color: #e3acae;
	font-size: 1.5em;
	font-weight: 600;
	color: #fff;
	position: relative;
	text-decoration: none;
}
.laserclad-link-btn .btn:first-child a {
	background: url("../products/ts_welding/img/img-laserclad-cns37.jpg") #e3acae center left/ auto 100% no-repeat;
}
.laserclad-link-btn .btn:last-child a {
	background: url("../products/ts_welding/img/img-laserclad-machine02-tab.jpg") #e3acae center left/ auto 100% no-repeat;
}
.laserclad-link-btn .btn a:hover {
	background-color: #999;
}
.laserclad-link-btn .btn a::before,
.laserclad-link-btn .btn a::after {
	content: '';
	position: absolute;
	margin: auto;
}
.laserclad-link-btn .btn a::before {
	inset: 0 1.5em 0 auto;
	width: 3px;
	height: 1.2em;
	background-color: #fff;
}
.laserclad-link-btn .btn a::after {
	inset: 0 1em 0 auto;
	width: 1em;
	height: 1em;
	border-bottom: solid #fff 3px;
	border-right: solid #fff 3px;
	transform: rotate(45deg);
}
.laserclad-link-btn .btn br {display: none;}
/*senfeng img*/
.laserclad-senfeng-img {
	padding: 1.5em;
	width: 100%;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

@media screen and (max-width: 480px) {
	.laserclad-tab-btn {justify-content: space-between;}
	.laserclad-tab-btn .btn a {font-size: 1em;}
	.laserclad-link-btn {justify-content: space-between;}
	.laserclad-link-btn .btn {width: calc(95% / 2);}
	.laserclad-link-btn .btn a {
		padding: 1em 2em 1em 3em;
		font-size: 3.708vw;
	}
	.laserclad-link-btn .btn a::before {
		inset: 0 1.3em 0 auto;
		height: 0.8em;
	}
	.laserclad-link-btn .btn a::after {
		width: 0.6em;
		height: 0.6em;
	}
	.laserclad-link-btn .btn br {display: block;}
}

/* イメージボタン */
.laserclad-img-btn {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	grid-row-gap: 1.5em;
}
.laserclad-img-btn .box {
	padding: 1em;
	width: calc(95% / 3);
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.laserclad-img-btn .title {
	margin-bottom: 1em;
	text-align: center;
	color: #666;
	grid-area: 1/2 / 2/3;
}
.laserclad-img-btn .title span {
	display: block;
	margin-bottom: 0.3em;
	background-color: #ff5656;
	font-size: 1.5em;
	font-weight: 600;
	color: #fff;
}
.laserclad-img-btn .img {
		margin-bottom: 1em;
		width: 100%;
}
.laserclad-img-btn .btn-more {max-width: inherit;}

@media screen and (max-width: 480px) {
	.laserclad-img-btn .box {
		width: 100%;
		display: grid;
		grid-template-columns: 35% 65%;
		grid-template-rows:  1fr auto;
		justify-content: space-between;
	}
	.laserclad-img-btn .img {
		margin-bottom: 0;
		width: auto;
		height: 100%;
		max-height: 130px;
		grid-area: 1/1 / 3/2;
	}
	.laserclad-img-btn .box .img img {
		width: auto;
		height: 100%;
	}
	.laserclad-img-btn .btn-more {
		grid-area: 2/2 / 3/3;
	}
}






/* box-wrap
-----------------------------------------------------------------------------------*/
.box-wrap {
	padding: 2em 2em 0.1em;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

@media screen and (max-width: 480px) {
	.box-wrap {padding: 1em 1em 0.1em;}
}






/* 準備中
-----------------------------------------------------------------------------------*/
.inPreparation {
	margin: 0 auto 80px;
	padding: 50px;
	width: 85%;
	background-color: #fff;
	box-sizing: border-box;
	border: double #ccc 6px;
	border-radius: 5px;
	text-align: center;
	color:#666;
}
.inPreparation h3 {
	margin-bottom: 50px;
	font-size: 2.5em;
	font-weight: 600;
}
.inPreparation p {font-size: 1.25em;}

@media screen and (max-width: 480px) {
	.inPreparation {
		padding: 10.417vw;
		width: 100%;
	}
	.inPreparation p {font-size: 3.333vw;}
}