@charset "utf-8";

:root{
	--steel-width-difference: 1.8rem;
	--steel-image-padding: 3.3rem;
	--steel-image-margin: 3.4rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	:root{
		--steel-width-difference: 1.8rem;
		--steel-image-padding: 5rem;
		--steel-image-margin: 3.4rem;
	}

}




.Keyvisual:has( > .Keyvisual-image:last-child) .Keyvisual-image{
	margin-bottom: 0;
}
.main{
	/* padding-top: var(--padding-topbottom); */
	background: var(--blackcolor);
}
.main::before{
	background: var(--blackcolor);
	content: "";
	display: block;
	width: 100%;
	height: 30rem;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: -1;
	transform: translateY(-100%);
}
.main::after{
	background: var(--blackcolor) !important;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Keyvisual:has( > .Keyvisual-image:last-child) .Keyvisual-image{
		margin-bottom: 13rem;
	}
	.main::before{
		height: calc(10rem + 13rem + 16.8rem);
		transform: translateY(calc(-100% + 1px));
	}

}



/*-------------------------------
	共通
-------------------------------*/

.Steel-wrap{
	counter-reset: number 0;
}
.Steel{
	background: var(--blackcolor);
	padding-top: 0;
}
/* .Steel:first-child{
	padding-top: 0;
} */
.Steel:last-child{
	padding-bottom: calc(var(--padding-topbottom) * 2 - var(--steel-image-margin) - 5rem);
}
.Steel-block{
	width: 100%;
	display: flex;
	align-items: flex-end;
    justify-content: space-between;
}
.Steel-block__body{
	padding-left: var(--padding-leftright);
	width: calc(50% - var(--steel-width-difference));
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
.Steel-block__body-inner{
	width: 100%;
	max-width: calc((var(--maxwidth-number) / 2));
	padding-right: 5rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
}
.Steel-block__body-inner::before{
	/* text-shadow: 1px 1px 0 var(--maincolor), -1px 1px 0 var(--maincolor), 1px -1px 0 var(--maincolor), -1px -1px 0 var(--maincolor); */
    -webkit-text-stroke: .4rem var(--maincolor);
    text-stroke: .4rem var(--maincolor);
	paint-order: stroke;
	font-family: var(--en);
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero);
	font-size: 30rem;
	padding-top: 1.6rem;
	margin-bottom: 4.2rem;
	font-weight: 700;
	line-height: .6;
	overflow: hidden;
	display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    white-space: nowrap;
    transition-delay: 1s;
	transition: clip-path 1s cubic-bezier(.85, 0, .15, 1);
	clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
}
.Steel-block__content{
	width: 100%;
	padding-left: 10rem;
}
.Steel-block__title{
	font-size: 3rem;
	margin-bottom: 2rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	color: #fff;
}
.Steel-block__text{
	margin-bottom: 3.5rem;
	letter-spacing: .05em;
	color: #fff;
}
.Steel-block__image{
	width: calc(50% + var(--steel-width-difference));
	padding-left: var(--steel-width-difference);
	margin-bottom: var(--steel-image-margin);
	position: relative;
    z-index: 5000;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}
.Steel-block__image::before{
	width: calc(100% - (var(--steel-width-difference) + var(--steel-image-padding) + 35rem));
	height: 30rem;
	top: unset;
	bottom: -15rem;
}
.Steel-block__image::after{
	background: var(--maincolor);
    content: "";
    display: block;
    width: 10rem;
    height: 100%;
    position: absolute;
    left: 0;
    top: -5rem;
    z-index: -1;
    transform: scaleY(0);
    transition: transform 1s cubic-bezier(.85, 0, .15, 1);
    transform-origin: top;
}
.Steel-block__image.on::after{
	transform: scaleY(1);
}
.Steel-block__image-inner{
	max-width: calc(var(--maxwidth-number) / 2);
	padding-left: var(--steel-image-padding);
	width: 100%;
	display: block;
	position: relative;
}
.Steel-block__image-inner::before{
	content: attr(data-en);
	font-family: var(--en);
    -webkit-text-stroke: 2px var(--maincolor);
    text-stroke: 2px var(--maincolor);
	paint-order: stroke;
	font-size: 10rem;
	padding-left: .4rem;
	display: block;
	line-height: .7;
	font-weight: 600;
	position: absolute;
	top: 0;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index: 6000;
    position: absolute;
    right: 0;
    top: 50%;
    /* transform: translate(11.2rem,-50%) rotate(180deg); */
	transform: translate(10rem,-50%) rotate(180deg);
}
.Steel-block__image-inner img{
	width: 100%;
}

.Steel:nth-of-type(1) .Steel-block__body-inner::before{
    width: 25.7rem;
}
.Steel:nth-of-type(2) .Steel-block__body-inner::before{
    width: 31.2rem;
}
.Steel:nth-of-type(3) .Steel-block__body-inner::before{
    width: 31.1rem;
}
.Steel:nth-of-type(4) .Steel-block__body-inner::before{
    width: 32.6rem;
}

/*----- 反転 */
.Steel:nth-of-type(2n) .Steel-block{
	flex-direction: row-reverse;
}
.Steel:nth-of-type(2n) .Steel-block__body{
	padding-right: var(--padding-leftright);
	justify-content: flex-start;
}
.Steel:nth-of-type(2n) .Steel-block__body-inner{
	padding-right: 0;
}
.Steel:nth-of-type(2n) .Steel-block__body-inner::before{
	align-self: flex-end;
}
.Steel:nth-of-type(2n) .Steel-block__content{
	padding-left: 0;
	padding-right: 10rem;
}
.Steel:nth-of-type(2n) .Steel-block__image::before{
	right: unset;
	left: 0;
}
.Steel:nth-of-type(2n) .Steel-block__image::after{
	left: unset;
	right: 0;
}
.Steel:nth-of-type(2n) .Steel-block__image{
	padding-right: var(--steel-width-difference);
	padding-left: 0;
	justify-content: flex-end;
}
.Steel:nth-of-type(2n) .Steel-block__image-inner{
	padding-right: var(--steel-image-padding);
	padding-left: 0;
}
.Steel:nth-of-type(2n) .Steel-block__image-inner::before{
	right: unset;
	left: 0;
    /* transform: translate(-11.2rem,-50%) rotate(0deg); */
	transform: translate(-10rem,-50%) rotate(0deg);
}

.Steel.on .Steel-block__body-inner::before{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1365px) and (min-width: 769px){

	.Steel-block__image-inner{
		padding-right: 7.5rem;
	}
	.Steel-block__image-inner::before{
		transform: translate(calc(100% - .5em),-50%) rotate(180deg);
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner{
		padding-left: 7.5rem;
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner::before{
		transform: translate(calc(-100% + .5em),-50%) rotate(0deg);
	}

}
@media screen and (max-width:1240px) and (min-width: 769px){

	.Steel-block__image::before{
		width: calc(12.5rem + 15rem);
	}
	.Steel-block__image-inner{
		max-width: 100%;
		padding-right: 10rem;
	}
	.Steel-block__image-inner::before{
		transform: translate(calc(100% - .75em),-50%) rotate(180deg);
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner{
		padding-left: 10rem;
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner::before{
		transform: translate(calc(-100% + .75em),-50%) rotate(0deg);
	}

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Steel-block__body{
		width: calc(45% - var(--steel-width-difference));
		padding-left: 0;
	}
	.Steel-block__content{
		padding-left: var(--padding-leftright);
	}
	.Steel-block__image{
		width: calc(55% + var(--steel-width-difference));
	}
	.Steel:nth-of-type(2n) .Steel-block__body{
		padding-right: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__body-inner{
		padding-left: 5rem;
	}
	.Steel:nth-of-type(2n) .Steel-block__content{
		padding-right: 5rem;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Steel-block{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		flex-direction: column;
		align-items: flex-start;
	}
	.Steel-block__body{
		width: 100%;
		margin-bottom: 7.5rem;
	}
	.Steel-block__body-inner{
		padding-right: 0;
		max-width: 100%;
	}
	.Steel.on .Steel-block__body-inner::before{
		margin-left: calc(var(--padding-leftright) * -1);
	}
	.Steel-block__content{
		padding-left: 0;
	}
	.Steel-block__image{
		width: calc(100% + var(--padding-leftright));
		padding-left: 0;
	}

	.Steel:nth-of-type(2n) .Steel-block{
		flex-direction: column;
		align-items: flex-end;
	}
	.Steel:nth-of-type(2n) .Steel-block__body-inner{
		padding-left: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__body-inner::before{
		margin-bottom: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__content{
		padding-left: 0;
		padding-right: 0;
	}

}
@media screen and (max-width:768px){

	.Steel-wrap{
		padding-bottom: 13.5rem;
	}
	.Steel{
		padding-bottom: 0;
		padding-bottom: 15rem;
		overflow: hidden;
	}
	.Steel:first-child{
		padding-top: 0;
	}
	.Steel:not(:first-child){
		padding-top: 10rem;
	}
	.Steel:last-child{
		padding-bottom: 15rem;
	}
	.Steel-block{
		flex-direction: column;
	}
	.Steel-block__body{
		padding-left: 0;
		width: 100%;
		margin-bottom: 10rem;
		position: relative;
		z-index: 6000;
	}
	.Steel-block__body-inner{
		width: 100%;
		max-width: 100%;
		padding-right: 0;
	}
	.Steel-block__body-inner::before{
		font-size: 24rem;
		padding-top: 1.5rem;
		margin-bottom: 4.5rem;
		margin-left: calc(var(--padding-leftright) * -1);
		line-height: .61;
	}
	.Steel-block__content{
		width: 100%;
		padding-left: 0;
	}
	.Steel-block__title{
		font-size: 4.5rem;
		margin-bottom: 2.5rem;
	}
	.Steel-block__image{
		padding-right: var(--padding-leftright);
		width: 100%;
		padding-left: 0;
		margin-bottom: 0;
	}
	.Steel-block__image::before{
		width: 30rem;
		height: 30rem;
		top: unset;
		bottom: -15rem;
		right: calc(var(--padding-leftright) * -1);
	}
	.Steel-block__image.on::after{
		transform: scaleY(1);
	}
	.Steel-block__image-inner{
		max-width: 100%;
	}
	.Steel-block__image-inner::before{
		padding-left: .5rem;
		transform: translate(calc(5rem + var(--padding-leftright)),-50%) rotate(180deg);
		z-index: -1;
	}
	.Steel-block__image-inner img{
		width: 100%;
	}

	.Steel:nth-of-type(1) .Steel-block__body-inner::before{
		width: 21rem;
	}
	.Steel:nth-of-type(2) .Steel-block__body-inner::before{
		width: 25rem;
	}
	.Steel:nth-of-type(3) .Steel-block__body-inner::before{
		width: 25rem;
	}
	.Steel:nth-of-type(4) .Steel-block__body-inner::before{
		width: 26rem;
	}

	/*----- 反転 */
	.Steel:nth-of-type(2n) .Steel-block{
		flex-direction: column;
	}
	.Steel:nth-of-type(2n) .Steel-block__body{
		padding-right: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__body-inner::before{
		margin-left: unset;
		margin-right: 0;
		margin-bottom: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__content{
		padding-left: 0;
		padding-right: 0;
	}
	.Steel:nth-of-type(2n) .Steel-block__image::before{
		left: calc(var(--padding-leftright) * -1);
	}
	.Steel:nth-of-type(2n) .Steel-block__image{
		padding-right: 0;
		padding-left: 5rem;
		justify-content: flex-end;
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner{
		padding-left: 0;
		padding-right: var(--steel-image-padding);
	}
	.Steel:nth-of-type(2n) .Steel-block__image-inner::before{
		right: unset;
		left: 0;
		transform: translate(calc((5rem + var(--padding-leftright)) * -1),-50%) rotate(0deg); /* ★ */
	}

}



/*-------------------------------
	製造工程
-------------------------------*/

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}



/*-------------------------------
	品質管理
-------------------------------*/

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}



/*-------------------------------
	設備紹介
-------------------------------*/

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}



/*-------------------------------
	有資格者
-------------------------------*/

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

}