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



/* top-mainimage
-----------------------------------------------------------------------------------*/
#top-mainimage {
	height: 100svh;
	border-bottom: solid #ff5656 7px;
	background-color: #000;
	box-sizing: border-box;
	position: relative;
}
/* mainbtn */
.mainbtn {
	position: absolute;
	margin: auto;
	width: 45%;
	overflow: hidden;
	z-index: 0;
}
.mainbtn.no1 {
	inset: 0 auto 0 0;
	animation: main1 0.7s ease-out 0s 1 forwards;
	opacity: 0;
}
.mainbtn.no2 {
	inset: 0;
	width: 33%;
	transform: skewX(-20deg);
	z-index: 1;
	animation: main2 0.7s ease-out 0.2s 1 forwards;
	opacity: 0;
}
.mainbtn.no3 {
	inset: 0 0 0 auto;
	animation: main1 0.7s ease-out 0.3s 1 forwards;
	opacity: 0;
}
.mainbtn::before,
.mainbtn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.mainbtn::before {
	width: 100%;
	z-index: -1;
}
.mainbtn.no2::before,
.mainbtn.no2::after {
	transform: skewX(20deg);
}
.mainbtn.no1::before {
	background: url("../img/bg-top-mainimage-thermalspray.jpg") center right 10%/cover no-repeat;
}
.mainbtn.no2::before {
	left: -50%;
	width: 200%;
	background: url("../img/bg-top-mainimage-welding.jpg") center left 25%/cover no-repeat;
}
.mainbtn.no3::before {
	background: url("../img/bg-top-mainimage-diecast.jpg") center left 5%/cover no-repeat;
}
.mainbtn::after {
	left: -50%;
	width: 200%;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: all 0.3s ease;
	z-index: 1;
}
.mainbtn:hover::after {opacity: 1;}
/* wrap */
.mainbtn .wrap {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 100%);
	z-index: 2;
}
.mainbtn.no2 .wrap {
	left: -30%;
	width: 160%;
	transform: skewX(20deg);
}
/* span */
.mainbtn .wrap span {
	position: absolute;
	top: 20%;
	width: 20.833vw;
	height: 5.677vw;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	transition: all 0.3s ease;
}
.mainbtn.no1 .wrap span {
	left: 20%;
	background: url("../img/top-mainimage-title-thermalspray.svg") top center/contain no-repeat;
}
.mainbtn.no2 .wrap span {
	left: 40%;
	background: url("../img/top-mainimage-title-welding.svg") top center/contain no-repeat;
}
.mainbtn.no3 .wrap span {
	right: 7%;
	background: url("../img/top-mainimage-title-diecast.svg") top center/contain no-repeat;
}
.mainbtn .wrap:hover span,
.mainbtn:has(.box:hover) .wrap span {opacity: 0.4;}
/* box */
.mainbtn .box {
	position: absolute;
	z-index: 3;
	bottom: 25%;
	padding: 0.5em;
	width: 17em;
	height: calc((2.5em * 5) + (3px * 4) + 1em);
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #f1f1f1;
	display: none;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	grid-row-gap: 3px;
	line-height: 1;
}
.mainbtn:hover > .box {
	display: flex;
	animation: boxUp 0.5s ease-out 0s 1 forwards;
}
.mainbtn.no1 .box {left: 10vw;}
.mainbtn.no3 .box {
	bottom: 33%;
	right: 10vw;
	height: calc((2.5em * 2) + 3px + 1em);
}
.mainbtn.no2 .box {
	left: 10vw;
	transform: skewX(20deg);
}
.mainbtn .box::before {
	content: '取扱商品';
	position: absolute;
	top: -1.5em;
	letter-spacing: 0.1em;
	color: #fff;
}
.mainbtn .box p {width: 100%;}
.mainbtn .box span {font-size: 0.8em;}
.mainbtn .box a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 calc(0.8em + 7px) 0 3em;
	height: 2.5em;
	background: #fff top left/2.5em no-repeat;
	text-decoration: none;
	color: #333;
	position: relative;
}
.mainbtn .box a:hover {
	background-color: #ff5656;
	color: #fff;
}
.mainbtn .box a::before,
.mainbtn .box a::after {
	content: '';
	position: absolute;
	inset: 0 7px 0 auto;
	margin: auto;
	transition: all 0.3s ease;
}
.mainbtn .box a::before {
	width: 0.8em;
	height: 2px;
	background-color: #ff5656;
}
.mainbtn .box a::after {
	width: 0.5em;
	height: 0.5em;
	border-top: solid #ff5656 2px;
	border-right: solid #ff5656 2px;
	transform: rotate(45deg);
}
.mainbtn .box a:hover::before {background-color: #fff;}
.mainbtn .box a:hover::after {border-color: #fff;}
.mainbtn:is(.no1,.no2) .box p.no1 a {background-image: url("../img/headmenu/bg-menu-no2-no1.jpg");}
.mainbtn:is(.no1,.no2) .box p.no2 a {background-image: url("../img/headmenu/bg-menu-no2-no2.jpg");}
.mainbtn.no1 .box p.no3 a {background-image: url("../img/headmenu/bg-menu-no2-no3.jpg");}
.mainbtn.no1 .box p.no4 a {background-image: url("../img/headmenu/bg-menu-no2-no4.jpg");}
.mainbtn.no1 .box p.no5 a {background-image: url("../img/headmenu/bg-menu-no2-no8.jpg");}
.mainbtn.no2 .box p.no3 a {background-image: url("../img/headmenu/bg-menu-no2-no5.jpg");}
.mainbtn.no2 .box p.no4 a {background-image: url("../img/headmenu/bg-menu-no2-no6.jpg");}
.mainbtn.no2 .box p.no5 a {background-image: url("../img/headmenu/bg-menu-no2-no7.jpg");}
.mainbtn.no3 .box p.no1 a {background-image: url("../img/headmenu/bg-menu-no1-no1.jpg");}
.mainbtn.no3 .box p.no2 a {background-image: url("../img/headmenu/bg-menu-no1-no2.jpg");}
/*.mainbtn .box a {
	position: relative;
	padding-right: 1.5em;
	color: #000;
}
.mainbtn .box a:hover {
	color: #ff5656;
}
.mainbtn .box a::before,
.mainbtn .box a::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: all 0.3s ease;
}
.mainbtn .box a::before {
	right: 0;
	width: 1em;
	height: 1em;
	background-color: #000;
	border-radius: 50%;
}
.mainbtn .box a::after {
	right: 0.4em;
	width: 0.25em;
	height: 0.25em;
	border-top: solid #fff 1px;
	border-right: solid #fff 1px;
	transform: rotate(45deg);
}
.mainbtn .box a:hover::before {background-color: #ff5656;}*/

@media screen and (max-width: 1440px) {
.mainbtn.no1 .box,
.mainbtn.no2 .box,
.mainbtn.no3 .box {right: 7vw;}
}

@media screen and (max-width: 1366px) {
	.mainbtn.no1 .box {left: 5vw;}
	.mainbtn .wrap span {
		width: 65%;
		height: 7vw;
		top: 25%;
	}
	.mainbtn.no1 .wrap span {left: 10%;}
	.mainbtn.no2 .wrap span {left: 25%;}
	.mainbtn.no3 .wrap span {right: 0;}
	.mainbtn.no2 .box {left: 6vw;}
}

@media screen and (max-width: 1180px) {
	.mainbtn.no1 .box {left: 5vw;}
	.mainbtn .wrap span {
		height: 8vw;
		top: 33%;
	}
	.mainbtn.no2 .wrap span {left: 20%;}
}

@media screen and (max-width: 897px) {
	#top-mainimage {background-color: transparent;}
	.mainbtn {
		width: 100%;
		height: 45%;
	}
	.mainbtn.no1 {inset: 0 auto auto 0;}
	.mainbtn.no2 {
		width: 100%;
		height: 35%;
		transform: skewX(0) skewY(-10deg);
		animation: mainSP2 0.7s ease-out 0.2s 1 forwards;
	}
	.mainbtn.no3 {inset: auto auto 0 0;}
	.mainbtn.no2::before,
	.mainbtn.no2::after {transform: skewX(0) skewY(10deg);}
	.mainbtn.no1::before {
		top: -10%;
		background-position: center;
	}
	.mainbtn.no2::before {
		top: -25%;
		left: 0;
		width: 100%;
		height: 150%;
		background-position: top left;
	}
	.mainbtn.no3::before {
		top: 10%;
		background-position: top center;
	}
	.mainbtn.no2::after {transform: skewY(0);}
	.mainbtn .wrap span {
		margin: auto;
		width: 100vw;
		height: 10.677vw;
	}
	.mainbtn.no1 .wrap span {inset: 33% 0 auto;}
	.mainbtn.no2 .wrap span {inset: 0;}
	.mainbtn.no3 .wrap span {inset: auto 0 25%;}
	.mainbtn.no2 .wrap {
		top: -20%;
		left: 0;
		width: 100%;
		height: 150%;
		transform: skewY(10deg);
	}
	.mainbtn .box {
		inset: 20% 0 auto;
		margin: auto;
		width: 50vw;
	}
	.mainbtn.no2 .box {
		inset: 0;
		transform: skewX(0) skewY(10deg);
	}
	.mainbtn.no3 .box {inset: auto 0 25%;}
	.mainbtn .box br {display: none;}
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
	#top-mainimage {height: 50svh;}
}

@media screen and (max-width: 480px) {
	.mainbtn .wrap span {height: 18vw;}
	.mainbtn .box {
		inset: 27% 0 auto;
		width: 80vw;
		height: calc((2.5em * 3) + (3px * 2) + 1em);
		grid-column-gap: 3px;
	}
	.mainbtn.no3 .box {height: calc(2.5em + 1em);}
	.mainbtn .box p:not(.no5) {width: calc(100% / 2 - 1.5px);}
}

@keyframes main1 {
	0% {transform:scale(1.5); opacity: 0;}
	100% {transform:scale(1); opacity: 1;}
}
@keyframes main2 {
	0% {transform:scale(1.5) skewX(-20deg); opacity: 0;}
	100% {transform:scale(1) skewX(-20deg); opacity: 1;}
}
@keyframes mainSP2 {
	0% {transform:scale(1.5) skewY(-10deg); opacity: 0;}
	100% {transform:scale(1) skewY(-10deg); opacity: 1;}
}
@keyframes boxUp {
	0% {opacity: 0;}
	100% {opacity: 1;}
}






/* main
-----------------------------------------------------------------------------------*/
main {
	margin-bottom: 17px;
	padding: 8.125em 0;
	background: linear-gradient(175deg, rgba(248,248,248,1) 55%,rgba(241,241,241,1) 55.1%) top center/100% 8.125em no-repeat,
		linear-gradient(175deg, rgba(241,241,241,1) 45%,rgba(248,248,248,1) 45.1%) bottom center/100% 8.125em no-repeat;
}
/* box */
main .box {
	padding: 5em 4.375em;
	width: 100%;
	max-width: 43.75em;
	min-height: 34.375em;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-wrap: wrap;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	overflow: hidden;
	position: relative;
	z-index: 0;
}
main .box::before,
main .box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}
main .box::before {background: linear-gradient(165deg, rgba(247,246,245,0) 0%,rgba(247,246,245,0) 70%,rgba(247,246,245,1) 70.1%,rgba(247,246,245,1) 100%);}
main .box::after {background: linear-gradient(-165deg, rgba(247,246,245,0) 0%,rgba(247,246,245,0) 70%,rgba(247,246,245,1) 70.1%,rgba(247,246,245,1) 100%);}
/* title */
main .box .title,
main .box .text,
main .box .btn-more {
	position: relative;
	z-index: 2;
}
main .box .title {
	margin-bottom: 2.2em;
	width: 100%;
	font-size: 2.0625em;
}
main .box .title::before {
	content: '';
	position: absolute;
	bottom: -1em;
	left: 0;
	width: 50px;
	height: 4px;
	background-color: #ff5656;
}
/* text */
main .box .text {
	width: 100%;
	text-align: justify;
	line-height: 2;
	font-size: 1.0625em;
}
/* more */
main .box .btn-more {
	margin-top: 1.5em;
}

@media screen and (max-width: 1024px) {
	main .box {
		max-width: 480px;
		min-height: 400px;
	}
}

@media screen and (max-width: 897px) {
	main {
		margin-bottom: 7px;
		padding: 4.375em 0;
		background: linear-gradient(175deg, rgba(248,248,248,1) 55%,rgba(241,241,241,1) 55.1%) top center/100% 4.375em no-repeat,
			linear-gradient(175deg, rgba(241,241,241,1) 45%,rgba(248,248,248,1) 45.1%) bottom center/100% 4.375em no-repeat;
	}
	main .box {
		max-width: inherit;
		justify-content: center;
	}
	main .box .btn-more {text-align: center;}
}

@media screen and (max-width: 480px) {
	main .box {padding: 2.0625em 2.5em;}
	main .box .title {font-size: 1.375em;}
	main .box .text {font-size: 1em;}
}






/* top-content
-----------------------------------------------------------------------------------*/
.top-content {
	margin-top: 17px;
	padding: 98px 0;
}
/* top-professional */
#top-professional {
	background: url("../img/bg-top-professional.jpg") center/cover no-repeat;
}
/* top-oversea */
#top-oversea {
	background: url("../img/bg-top-oversea.jpg") center/cover no-repeat;
}
#top-oversea section {
	display: flex;
	justify-content: flex-end;
}
/* top-support */
#top-support {
	margin-bottom: 17px;
	background: url("../img/bg-top-support.jpg") center/cover no-repeat;
}

@media screen and (max-width: 897px) {
	.top-content {
		margin-top: 0;
		padding: 15.625em 0 2.5em;
		background-color: #f1f1f1;
	}
	#top-professional {margin-top: 7px;}
	#top-professional,#top-oversea,#top-support {
		background-position: top right;
		background-size: auto 58vw;
	}
}

@media screen and (max-width: 480px) {
	#top-professional,#top-oversea,#top-support {
		background-position: top center;
		background-size: auto 300px;
	}
	#top-professional {
		background-position: top right 10%;
	}
}





/* 印刷用
------------------------------------------------------------------------*/
@media print {
	#top-mainimage {height: 700px;}
}