@charset "UTF-8";

:root{
	--color-primary: #000;
	--color-primary-rgb: 0,0,0;
	--color-contrast: #fff;
	--color-contrast-rgb: 255,255,255;
	--color-accent: #036eb8;
	--color-accent-rgb: 3,110,184;
	--color-accent2: #8fc31f;
	--color-accent2-rgb: 143,195,31;
	--color-bg: #efefef;
	--color-bg-rgb: 239,239,239;
	--color-gray: #717171;
	--color-gray-rgb: 113,113,113;
	--color-gray-light: #a0a0a0;
	--color-gray-light-rgb: 160,160,160;
	--transition-default: all 0.4s ease; 
}


/* !foundation */
/* --------------------------- */
html,body {
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none;
}
body {
	color: var(--color-primary);
	background: var(--color-contrast);
	overflow-x: hidden;
	position: relative;
	text-align: center;
}
* {
	box-sizing: border-box;
}
a,
a img {
	color: var(--color-primary);
	transition: var(--transition-default);
}
a img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a:visited {
	color: rgba(var(--color-primary-rgb), .875);
}
a:hover {
	color: var(--color-accent);
	text-decoration: none;	
}
a:hover img {
	opacity: 0.6;
}
a.noborder {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(90deg, rgba(var(--color-tertiary-rgb),0) 0%, rgba(var(--color-tertiary-rgb),1) 50%, rgba(var(--color-tertiary-rgb),0) 100%);
	margin: 5rem auto;
	clear: both;
	mix-blend-mode: multiply;
}
.btn,
.btn:visited {
	width: fit-content;
	display: block;
	text-align: center;
	text-decoration: none;
	border: solid 1px var(--color-primary);
	padding: 0.5em 1.5em 0.625em;
	margin: 1em auto;
	color: var(--color-primary);
	background: var(--color-contrast);
	
	&.btnLarge {
		font-size: 1.125em;
		font-weight: 500;
		margin-top: 3em;
	}
}
.btn:hover {
	background: var(--color-primary);
	color: var(--color-contrast);
}
label.btn {
	transition: var(--transition-default);
	cursor: pointer;
}

/* material
--------------------------- */
.clearFloat {
	clear: both;
}
.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0.375em auto;
	text-align: center!important;
}
.sp,
.checkEl,
.gNavBg {
	display: none;
}
.flexCont {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul[class],ol[class] {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.tate {
	min-width: 1em;
	-webkit-font-feature-settings: 'palt' 0;
	font-feature-settings: 'palt' 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* !font */
/* --------------------------- */
.wf-noto-r, body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.wf-jost-r, ul.headerLineup, .prodNavCat, .prodCatModel {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.txtSdw {
	text-shadow: 0 0 40px rgba(var(--color-accent-rgb),.9),0 0 30px rgba(var(--color-accent-rgb),.9),0 0 20px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9);
}
.txtSdwMin {
	text-shadow: 0 0 20px rgba(var(--color-accent-rgb),.9),0 0 15px rgba(var(--color-accent-rgb),.9),0 0 10px rgba(var(--color-accent-rgb),.9),0 0 5px rgba(var(--color-accent-rgb),.9);
}
.capsS {
	font-size: 0.8em;
}
.capsL {
	font-size: 1.5em;
}
.shadow {
	filter: drop-shadow(0 0 20px rgba(var(--color-primary-rgb), .875));
}
/* !layout */
/* --------------------------- */
main {
}

/* !header */
/* --------------------------- */
.gHeader {
	background: url('../imgs/header_bg.jpg') center center no-repeat;
	background-size: 100% auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
}
.siteTitle {
	margin: 0 auto 0 0;
}
.headerBox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 3rem;
}
.headerHit {
	margin: 0;
}
ul.headerLineup {
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2em;
	margin: 0;
	font-size: 0.75em;
	line-height: 1.2;
	font-weight: 700;
	font-style: italic;
	
	li {
		position: relative;
		
		&::before {
			content: "";
			display: block;
			width: 114px;
			height: auto;
			aspect-ratio: 425 / 340;
			background: url('../imgs/icon_lineup_laser.png') center center no-repeat;
			background-size: cover;
			pointer-events: none;
			position: absolute;
			top: 50%;
			left: 0;
			translate: -50% -50%;
			z-index: 1;
			transition: scale 0.3s ease;
		}
		&:nth-of-type(2)::before {
			background-image: url('../imgs/icon_lineup_system.png');
		}
		&:nth-of-type(3)::before {
			background-image: url('../imgs/icon_lineup_robot.png');
		}
		&:nth-of-type(4)::before {
			background-image: url('../imgs/icon_lineup_other.png');
		}
		&:hover::before {
			scale: 1.2;
		}
	}
	a {
		position: relative;
		z-index: 10;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		text-decoration: none;
		color: var(--color-contrast);
	}
}
.gNav {
	margin: 0 auto 2rem;
}
ul.gNavList {
	background-color: var(--color-bg);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1em;
	line-height: 1;
	padding: 1em 0 1.125em;
	margin: 0 auto 1.25em;
	
	a, button {
		display: block;
		padding: 0 1.5em;
		border: none;
		text-decoration: none;
		cursor: pointer;
		transition: var(--transition-default);
		background: none;
		
		&:hover {
			color: var(--color-accent);
		}
		&:focus {
			outline: none;
		}
	}
	li:not(:first-of-type) {
		position: relative;
		&::before {
			content: "";
			display: block;
			width: 1px;
			height: 100%;
			background-color: var(--color-primary);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
ul.bizNav {
	display: none;
	justify-content: center;
	align-items: center;
	margin: 0 auto 1.5em;
	font-size: 1.25em;
	line-height: 1;
	text-align: left;
	
	a {
		position: relative;
		display: block;
		text-decoration: none;
		padding: 0.25em 1em 0.375em 4em;
		
		span {
			display: block;
			font-size: 0.8em;
			margin-bottom: 0.5em;
		}
		
		&::before {
			content: "";
			display: block;
			width: 46px;
			height: auto;
			aspect-ratio: 1 / 1;
			background: url('../imgs/icon_biz.svg') center center no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: 50%;
			left: 1em;
			translate: 0 -50%;
			filter: drop-shadow(2px 2px 6px rgba(var(--color-primary-rgb), .5) );
			transition: scale 0.3s ease;
		}
		&:hover::before {
			scale: 1.15;
		}
	}
	
	li:not(:first-of-type) {
		position: relative;
		&::before {
			content: "";
			display: block;
			width: 1px;
			height: 100%;
			background-color: var(--color-primary);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	/* li:first-of-type a::before {
		background-image: url('../imgs/icon_biz_develop.svg'); 
	} */
	.home & {
		display: flex;
	}
	&.standalone {
		width: fit-content;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		
		li {
			width: 100%;
		}
		
		li:not(:first-of-type) {
			&::before {
				width: 100%;
				height: 1px;
				top: -1rem;
			}
		}
	}
}
.subNav {
	background-color: transparent;
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	position: fixed;
	inset: unset;
	padding: 0;
	top: 8.75rem;
	left: 50%;
	translate: -50% 0;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease,
		overlay 0.2s ease allow-discrete,
		display 0.2s ease allow-discrete;
	
	&:popover-open {
		opacity: 1;
		transform: scale(1);
	}
	.content {
		position: relative;
		background: var(--color-contrast);
		width: fit-content;
		max-height: calc(100% - 8.75rem);
		overflow-y: auto;
		margin: 0 auto;
		border: none;
		z-index: 10;
		padding: 2rem 5rem;
	}
	.overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(var(--color-primary-rgb), .5);
	}
	&.footer {
		top: 0;
	}
}
@starting-style {
	.subNav:popover-open {
		opacity: 0;
		transform: scale(0.95);
	}
}
ul.prodNav {
	display: grid;
	gap: 1em;
	font-size: 1em;
	line-height: 1;
	text-align: left;
	width: fit-content;
	
	a {
		position: relative;
		min-height: 3em;
		display: grid;
		grid-template-columns: 9em 1fr 10em;
		gap: 2rem;
		align-items: center;
		text-decoration: none;
		padding: 0.5em 4em;
		background-color: var(--color-bg);
		
		&::before {
			content: "";
			display: block;
			width: 114px;
			height: auto;
			aspect-ratio: 425 / 340;
			background: url('../imgs/icon_lineup_laser.png') center center no-repeat;
			background-size: cover;
			pointer-events: none;
			position: absolute;
			top: 50%;
			left: 0;
			translate: -40% -50%;
			z-index: 1;
			transition: scale 0.3s ease;
		}
		.prodSystem &::before,
		.fom-system &::before,
		.bles-system &::before,
		.system &::before {
			background-image: url('../imgs/icon_lineup_system.png');
		}
		.prodRobot &::before,
		.hit-robot &::before,
		.pcb-cutting-robot &::before,
		.robot &::before {
			background-image: url('../imgs/icon_lineup_robot.png');
		}
		.prodOther &::before,
		.lead-wire-cutter &::before,
		.es-mat &::before,
		.custom-made &::before,
		.other &::before {
			background-image: url('../imgs/icon_lineup_other.png');
		}
		&:hover::before {
			scale: 1.2;
		}
	}
}
.prodNavCat {
	font-weight: 900;
}
.prodNavName {
	font-size: 0.875em;
}
.prodCatModel {
	font-weight: 700;
	font-size: 0.875em;
	line-height: 1.25;
}
ul.bizUnitList {
	display: grid;
	gap: 1em;
	font-size: 1.125em;
	line-height: 1;
	font-weight: 500;
	text-align: left;
	
	a {
		position: relative;
		text-decoration: none;
		display: block;
		padding: 0.5em 3em 0.625em 5em;
		background-color: var(--color-bg);
		
		&::before {
			content: "";
			display: block;
			width: 50px;
			height: auto;
			aspect-ratio: 1 / 1;
			background: url('../imgs/icon_biz.svg') center center no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: 50%;
			left: 1em;
			translate: 0 -50%;
			filter: drop-shadow(2px 2px 6px rgba(var(--color-primary-rgb), .5) );
			transition: scale 0.3s ease;
		}
		&:hover::before {
			scale: 1.15;
		}
	}
	/* li:first-of-type a::before {
		background-image: url('../imgs/icon_biz_develop.svg'); 
	} */
}

/* !footer */
/* --------------------------- */
.gFooter {
	background: url('../imgs/header_bg.jpg') center center no-repeat;
	background-size: 100% auto;
	padding-bottom: 3rem;
	position: relative;
}
.footerCont {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: 1.5rem auto 2.625rem;
}
.footerHit {
	margin: 1rem auto 0 2.625rem;
}
.pagetop {
	margin: 0 45% 0 0;
	font-size: 1.25em;
	line-height: 1;
	font-weight: 700;
	
	a {
		text-decoration: none;
		color: var(--color-contrast);
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1em;
		
		&::before {
			content: "";
			display: block;
			width: 2.1em;
			height: 1.9em;
			background-color: var(--color-contrast);
			clip-path: polygon(100% 100%, 50% 60%, 0 100%, 0 40%, 50% 0, 100% 40%);
		}
	}
}
.footerName {
	width: fit-content;
	margin: 0 auto;
	
	a {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 1.5rem;
	}
}
.footerContact {
	position: absolute;
	top: 5rem;
	right: 2rem;
	background-color: var(--color-primary);
	color: var(--color-contrast);
	margin: 0;
	padding: 2em;
	font-size: 0.875em;
	line-height: 1;
	text-align: left;
	
	dt {
		margin: 0 0 0.75em;
	}
	dd {
		margin: 0;
		
		a {
			display: block;
			font-family: "Jost", sans-serif;
			font-size: 2.25em;
			font-weight: 700;
			color: var(--color-contrast);
			text-decoration: none;
			
			&:hover {
				color: var(--color-accent);
			}
		}
		span {
			display: block;
			line-height: 1.5;
			padding-left: 5em;
			text-indent: -5em;
			margin-top: 0.25em;
		}
	}
}
.stickyNav{
	position: fixed;
	right: 0;
	bottom: 5lvh;
	z-index: 1000;
}
ul.stickyNavList {
	font-size: 1.125em;
	line-height: 1;
	font-weight: 700;
	display: grid;
	gap: 1px;
	
	a {
		display: block;
		background-color: var(--color-primary);
		color: var(--color-contrast);
		text-decoration: none;
		padding: 0.75em 0.75em 0.875em;
		box-shadow: 0 0 0 1px var(--color-contrast);
		
		&:hover {
			background-color: var(--color-accent);
		}
	}
}

/* !top */
/* --------------------------- */
.heroImg {
	width: 100%;
	height: auto;
	aspect-ratio: 960 / 214;
	margin: 0 auto 3rem;
	overflow: visible;
}
.swiper-slide {
	width: 100%;
	height: 100%;
	position: relative;
	
	&::before {
		content: "";
		display: block;
		width: 50%;
		height: auto;
		aspect-ratio: 425 / 340;
		background: url('../imgs/icon_lineup_laser.png') center center no-repeat;
		background-size: cover;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		translate: -15% -20%;
		z-index: 1;
		transition: scale 0.3s ease;
		filter: blur(2rem);
	}
	&.slideSystem::before {
		background-image: url('../imgs/icon_lineup_system.png');
	}
	&.slideRobot::before {
		background-image: url('../imgs/icon_lineup_robot.png');
	}
	&.slideOther::before {
		background-image: url('../imgs/icon_lineup_other.png');
	}
	
	&.swiper-slide-active::before {
		filter: blur(0);
		transition: filter 1.8s ease 0.4s;
	}
	
	&::after {
		content: "";
		display: block;
		width: 90%;
		height: 90%;
		background-color: var(--color-primary);
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: -1;
	}
	
	a {
		text-decoration: none;
		display: block;
	}
}
.slideTitle {
	position: relative;
	z-index: 10;
	font-size: 1.75vw;
	line-height: 1.1;
	font-weight: 500;
	color: var(--color-contrast);
	margin: 5em auto 0;
	opacity: 0;
	
	.wf-jost-r {
		font-size: 4.8em;
		font-weight: 700;
		font-style: italic;
		color: var(--color-gray-light);
	}
	
	.swiper-slide-active & {
		opacity: 1;
		transition: opacity 0.8s ease 1.2s;
	}
}
.slideCatch {
	font-size: 1.3125vw;
	line-height: 1.4;
	text-align: left;
	font-weight: 500;
	color: var(--color-contrast);
	margin: 0;
	position: absolute;
	top: 2.5em;
	left: 50%;
	translate: -50% 0;
	opacity: 0;
	
	.swiper-slide-active & {
		opacity: 1;
		transition: opacity 0.8s ease 0.4s;
	}
}
.slideImg {
	position: absolute;
	right: 6vw;
	bottom: 1rem;
	opacity: 0;
	translate: 25% 0;
	
	.slideLaser & {
		width: 14%;
	}
	.slideSystem & {
		right: 2vw;
		width: 25%;
	}
	.slideRobot & {
		width: 18%;
	}
	
	.swiper-slide-active & {
		opacity: 1;
		translate: 0 0;
		transition: opacity 0.6s ease 1.6s, translate 0.6s ease 1.6s;
	}
}
.topContent {
	padding: 3rem 1.5rem;
}
.topContTitle {
	width: min(18em, 90%);
	font-size: 1.75em;
	line-height: 1;
	font-weight: 400;
	margin: 0 auto 1.75em;
	padding: 0.5em 0 0.625em;
	border: solid 3px var(--color-gray);
}
.prodLineup {
	width: min(960px, 100%);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin: 0 auto;
}
.prodListItem {
	position: relative;
	
	&::before {
		content: "";
		display: block;
		width: 66%;
		height: auto;
		aspect-ratio: 425 / 340;
		background: url('../imgs/icon_lineup_laser.png') center center no-repeat;
		background-size: cover;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		translate: -40% -30%;
		z-index: 1;
		transition: scale 0.3s ease;
	}
	&.prodSystem::before,
	&.fom-system::before,
	&.bles-system::before,
	&.system::before {
		background-image: url('../imgs/icon_lineup_system.png');
	}
	&.prodRobot::before,
	&.hit-robot::before,
	&.pcb-cutting-robot::before,
	&.robot::before {
		background-image: url('../imgs/icon_lineup_robot.png');
	}
	&.prodOther::before,
	&.lead-wire-cutter::before,
	&.es-mat::before,
	&.custom-made::before,
	&.other::before {
		background-image: url('../imgs/icon_lineup_other.png');
	}
	
	a {
		height: 100%;
		padding: 1rem;
		text-decoration: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		background-color: var(--color-bg);
		
		&:hover img {
			opacity: 1;
			scale: 1.1;
		}
	}
	
	&.eco::after {
		content: "";
		display: block;
		width: 43px;
		height: auto;
		aspect-ratio: 1 / 1;
		background: url('../imgs/logo_eco.svg') center center no-repeat;
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 1rem;
		translate: 0 -50%;
		pointer-events: none;
	}
}
.prodItemName {
	position: relative;
	z-index: 10;
	font-size: 0.875em;
	line-height: 1.275;
	font-weight: 400;
	margin: 0 auto auto;
	
	.wf-jost-r {
		font-size: 2.25em;
		line-height: 1;
		font-weight: 700;
		font-style: italic;
		display: block;
	}
}
.prodItemModel {
	font-size: 0.875em;
	line-height: 1.275;
	font-weight: 700;
	text-align: left;
	color: var(--color-gray);
	margin: auto auto 0 0;
}
.prodItemImg {
	margin: 0.5rem auto;
}
ul.newsList {
	width: min(860px, 90%);
	margin: 0 auto 2rem;
	font-size: 1.1875em;
	line-height: 1.25;
	text-align: left;
	display: grid;
	grid-template-columns: max-content max-content 1fr;
	row-gap: 1rem;
	
	li {
		margin-bottom: 1em;
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
	}
	
	a {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		column-gap: 0;
		text-decoration: none;
		min-height: 2em;
		
		&:hover{
			opacity: 0.85;
		}
	}
	.newsCat {
		background-color: var(--color-accent);
		color: var(--color-contrast);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0.5em;
	}
	time {
		background-color: var(--color-accent2);
		color: var(--color-primary);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 0.5em;
	}
	.newsListTitle {
		background-color: var(--color-primary);
		color: var(--color-contrast);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0.5em 0.75em;
	}
}

/* !lower */
/* --------------------------- */
.contTitle {
	font-size: 1.375em;
	line-height: 1.25;
	text-align: left;
	margin: 0 0 1em;
}
.contTxt {
	font-size: 1.125em;
	line-height: 1.75;
	text-align: justify;
	margin: 0 0 1.5em;
	
	&:not(:last-of-type) {
		margin-bottom: 3em;
	}
}
.prodDetailHeader {
	width: min(834px, 90vw);
	margin: 5rem auto 0;
	padding: 1.5rem 0;
	position: relative;
	color: var(--color-contrast);
	
	&::before, &::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	&::before {
		width: 100%;
		height: 42%;
		background: var(--color-primary);
		z-index: -1;
		pointer-events: none;
	}
	.postid-48 &::before {
		height: 50%;
	}
	
	&::after {
		content: "";
		display: block;
		width: 75%;
		height: auto;
		aspect-ratio: 425 / 340;
		background: url('../imgs/icon_lineup_laser.png') center center no-repeat;
		background-size: cover;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		translate: -35% -25%;
		z-index: 1;
	}
	&.system::after {
		background-image: url('../imgs/icon_lineup_system.png');
	}
	&.robot::after {
		background-image: url('../imgs/icon_lineup_robot.png');
	}
	&.other::after {
		background-image: url('../imgs/icon_lineup_other.png');
	}
	* {
		position: relative;
		z-index: 10;
	}
}
.prodDetailCatch {
	font-size: 1.125em;
	line-height: 1.55;
	font-weight: 500;
	margin: 0 auto 0.5em;
}
.prodDetailTitle {
	font-size: 1.25em;
	line-height: 1.25;
	margin: 0 auto 3em;
	translate: -10% 0;
	
	.wf-jost-r {
		font-size: 4em;
		line-height: 1;
		font-weight: 700;
		font-style: italic;
		color: rgba(var(--color-contrast-rgb), .75);
	}
}
.prodDetailSubTitle {
	font-size: 2em;
	line-height: 1.666;
	margin: 0 auto 2em;
}
.prodDetailBody {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: -9rem auto 0;
	gap: 3rem;
}
.prodDetailModel {
	font-size: 2.625em;
	line-height: 1.25;
	white-space: nowrap;
	text-align: left;
	font-weight: 700;
	color: var(--color-primary);
	margin: 1em auto 0 1.5em;
	
	&.long {
		margin-top: 3em;
	}
	
	.capsS {
		width: fit-content;
		display: block;
		margin: 0 auto;
		font-size: 0.4em;
	}
}
.prodDetailPoint {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.75em;
	line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 0;
	
	&::after {
		content: "";
		display: block;
		width: 4rem;
		height: 4rem;
		background: url('../imgs/icon_prod.svg') 0 0 no-repeat;
		background-size: 100% auto;
	}
	&.almighty::after {
		background-image: url('../imgs/icon_prod_red.svg');
	}
	&.metal::after {
		background-image: url('../imgs/icon_prod_green.svg');
	}
}
.prodDetailFomIcon {
	font-size: 0.75em;
	line-height: 1.25;
	text-align: left;
	color: var(--color-primary);
	position: absolute;
	top: 2rem;
	right: 3rem;
	width: 8.333em;
	height: 8.333em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	
	&::before, &::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--color-contrast);
	}
	&::after {
		background: linear-gradient(-45deg, #43b149 0%, #f0f6de 100%);
		scale: 1.2;
		z-index: -10;
	}
}
.prodDetailEco {
	position: absolute;
	top: 42%;
	left: 50%;
	font-size: 0.5em;
	line-height: 1.5;
	text-align: left;
	color: var(--color-primary);
	translate: -25% 5%;
	
	&::before {
		content: "";
		display: block;
		width: 3.25rem;
		height: auto;
		aspect-ratio: 1 / 1;
		background: url('../imgs/logo_eco.svg') center center no-repeat;
		background-size: cover;
		pointer-events: none;
		margin: 0 auto 1em;
	}
}
.prodDetailHighpower {
	position: absolute;
	top: 42%;
	left: 33%;
	width: fit-content;
	font-size: 1em;
	line-height: 1;
	font-weight: bold;
	padding: 1em 1.5em 1.125em;
	border-radius: 50%;
	background-color: var(--color-accent);
	color: var(--color-contrast);
	
	&.patent {
		background-color: red;
	}
}
.prodDetailDtnjrIcon {
	font-size: 0.75em;
	line-height: 1.25;
	text-align: left;
	color: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 0;
	position: absolute;
	top: 43%;
	left: 25%;
}
.prodVideoTitle {
	font-size: 1.5em;
	line-height: 1;
	background-color: var(--color-primary);
	color: var(--color-contrast);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em 1em 0.625em;
	margin: 0;
	
	.wf-jost-r {
		font-size: 1.575em;
		font-style: italic;
		opacity: 0.8;
	}
}
.prodVideo {
	margin: 0 auto 7rem;
	width: min(834px, 100%);
	
	video {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}
.prodDetailCont {
	width: min(834px, 90vw);
	display: grid;
	grid-template-columns: 262px 1fr;
	gap: 3rem;
	margin: 0 auto 4rem;
	
	&.single {
		width: min(708px, 90vw);
		grid-template-columns: 1fr;
		gap: 0;
	}
}
.prodDetailContImgGrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	
	.large {
		grid-column: span 2;
	}
	figure {
		margin: 0;
	}
	figcaption {
		margin: 0.5em 0 0;
		font-size: 0.75em;
	}
	
	&.third {
		margin-inline: auto;
		width: min(506px, 90%);
		grid-template-columns: repeat(3, 1fr);
	}
}
.prodDetailContWrap {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.625rem;
	
	img {
		margin-top: 0.5em;
	}
}
.prodDetailContBody {
}
.prodDetailSpec {
	width: min(912px, 90vw);
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 3rem;
	margin: 0 auto 3rem;
	
	&.single {
		width: min(708px, 90vw);
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	
	.contTitle:has(img) {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.prodDetailSpecNotice {
	grid-column: span 2;
	margin-bottom: 3rem;
}
.prodDetailSpecTitle {
	font-size: 0.875em;
	line-height: 1;
	text-align: left;
	font-weight: 400;
	background-color: rgba(var(--color-gray-rgb), .5);
	
	.colored {
		display: inline-block;
		background-color: var(--color-primary);
		color: var(--color-contrast);
		padding: 0.375em 0.75em 0.5em;
		min-width: 8em;
		margin-right: 0.75em;
	}
}
.prodDetailSpecData {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75em;
	line-height: 1.375;
	margin: 0 auto 1.5rem;
	
	th,td {
		padding: 0.625em 0.5em;
		border-bottom: solid 1px var(--color-primary);
	}
	th {
		white-space: nowrap;
		font-weight: 400;
	}
	thead th:not(:first-of-type) {
		background: var(--color-bg);
		font-size: 1.25em;
		font-weight: 700;
	}
	thead th:not(:last-of-type),
	tbody th,
	tr:not(:has(td[colspan])) td:not(:last-of-type) {
		white-space: nowrap;
		border-right: solid 1px rgba(var(--color-primary-rgb), .5);
	}
	tbody th {
		text-align: left;
	}
	.single & {
		border-top: solid 2px var(--color-primary);
		border-bottom: solid 2px var(--color-primary);
		
		thead {
			border-bottom: solid 2px var(--color-primary);
		}
	}
}
ol.prodDetailSpecDataNotice {
	font-size: 0.75em;
	line-height: 1.5;
	text-align: justify;
	counter-reset: komeNum;
	
	li {
		counter-increment: komeNum;
		margin-bottom: 1em;
		padding-left: 2.5em;
		text-indent: -2.5em;
		
		&::before {
			content: "※"counter(komeNum);
			display: inline-block;
			width: 2.5em;
			text-indent: 0;
		}
	}
}
ul.prodDetailSpecDataNotice {
	font-size: 0.75em;
	line-height: 1.5;
	text-align: justify;
	
	li {
		margin-bottom: 1em;
		padding-left: 1em;
		text-indent: -1em;
		
		&::before {
			content: "※";
			display: inline-block;
			text-indent: 0;
		}
	}
}
.prodDetailSizeTitle {
	font-size: 1.375em;
	line-height: 1;
	text-align: left;
	margin: 0.5em 0 0.5em;
	color: var(--color-gray);
	
	img + & {
		border-top: solid 1px var(--color-gray);
		padding-top: 1em;
	}
}
.prodBlesIllust {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem;
	margin: 0 auto 3rem;
	
	figure {
		margin: 0;
	}
	figcaption {
		font-size: 0.8125em;
		margin: 0.5em 0 0;
	}
}
.bizContent {
	padding: 3rem 0;
	margin: 0 auto 3rem;
}
.bizContInner {
	width: min(41.25em, 90vw);
	margin: 0 auto;
}
.bizContTitle {
	font-size: 4em;
	line-height: 1;
	font-weight: 900;
	margin: 0 auto 0.5em;
	
	.capsS {
		font-size: 0.5em;
		display: block;
		margin-top: 0.5em;
	}
}
.bizContCatch {
	font-size: 2em;
	line-height: 1.375;
	font-family: serif;
	margin: 0 auto 1em;
	
	img + & {
		margin-top: 5rem;
	}
}
.bizContSubtitle {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-height: 118px;
	font-size: 1.25em;
	line-height: 1;
	font-weight: 500;
	margin: 2.5em auto 1.5em;
	color: var(--color-contrast);
	
	&::before {
		content: "";
		display: block;
		width: auto;
		height: 100%;
		aspect-ratio: 1 / 1;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		background: url('../imgs/icon_biz.svg') center center no-repeat;
		background-size: auto 100%;
		z-index: -1;
		pointer-events: none;
		border-radius: 50%;
		box-shadow: 4px 4px 16px 0 rgba(var(--color-primary-rgb), .25);
	}
	
	/* .hit & {
		color: var(--color-primary);
		
		&::before {
			background-image:  url('../imgs/icon_biz_develop.svg');
		}
	} */
	
	&:has(br) {
		line-height: 1.25;
	}
}
.bizContTxt {
	width: min(33em, 90vw);
	font-size: 1.25em;
	line-height: 1.6666;
	text-align: justify;
	margin: 0 auto 1.5em;
}
.point {
	--indent: 1em;
	padding-left: var(--indent);
	text-indent: calc(-1 * var(--indent));
	
	&::before {
		content: "●";
	}
	
	&.contTxt {
		margin-bottom: 0.5em;
	}
}
.bizPointWrap {
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	
	.bizContTxt {
		width: fit-content;
		white-space: nowrap;
	}
}
.bizImg {
	margin: 0;
	
	figcaption {
		font-size: 0.8125em;
		margin: 1em 0 0;
	}
}
.bizImgGallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 3.25rem;
}
.bizIso {
	text-align: right;
	margin: -1rem 0 1rem;
	
	.yokohama & {
		width: min(54rem, 90vw);
	}
}
.bizFactory {
	width: min(60rem, 90vw);
	margin: 0 auto 4rem;
	
	&:not(:last-of-type)::after {
		content: "";
		display: block;
		margin: 4rem auto 0;
		width: 75%;
		height: 1px;
		background-color: var(--color-gray);
	}
	
	.bizImgGallery {
		width: min(770px, 100%);
		margin-top: 5rem;
		margin-inline: auto;
	}
}
.bizFactoryList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	margin: 0 auto 3rem;
}
.bizFactoryHeading {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 1.5rem;
	
	img {
		margin-left: auto;
	}
}
.bizFactoryName {
	font-size: 1.875em;
	line-height: 1;
	font-weight: 400;
	margin: 0 0.5em 0 0;
}
.bizFactoryArea {
	font-size: 0.75em;
	line-height: 1.2;
	text-align: left;
	margin: 0;
}
.bizFactoryBody {
	display: grid;
	grid-template-columns: 348px 1fr;
	gap: 2rem;
}
.bizFactoryEquipmentTxt {
	font-size: 0.875em;
	line-height: 1.5;
	text-align: left;
	margin: 0 0 0.5em;
}
.bizFactoryEquipment {
	width: 100%;
}
.bizFactoryEquipmentListWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
	
	&.column3 {
		width: 90%;
		margin-inline: auto;
		grid-template-columns: repeat(3, 1fr);
	}
}
.bizFactoryEquipmentList {
	font-size: 0.875em;
	line-height: 1.5;
	text-align: left;
	margin: 0;
	display: grid;
	gap: 0.25em 0;
	grid-template-columns: 1fr 2.5em;
	
	dt, dd {
		margin: 0;
	}
	dt {
		white-space: nowrap;
		display: flex;
		align-items: center;
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background-color: rgba(var(--color-primary-rgb), .2);
			margin-left: 0.5em;
		}
	}
	dd {
		text-align: right;
	}
}
.bizFactoryEquipmentImgs {
	margin: 5rem auto 3rem;
	width: min(680px, 90vw);
	border: solid 1px var(--color-bg);
	background-image:
		linear-gradient(to right, var(--color-bg) 1px, transparent 1px),
		linear-gradient(to bottom, var(--color-bg) 1px, transparent 1px);
	background-size: 25.2px 25.2px;
	background-position: -1px -1px;
	padding: 1rem;
	
	.bizImg:first-of-type {
		margin-top: -4.5rem;
	}
	.bizImg + .bizImg {
		margin-top: 3rem;
	}
}
.bizMainProdList {
	font-size: 1.375em;
	line-height: 1.875;
	margin: 0 auto 5rem;
}

/* !download */
/* --------------------------- */
.contBody {
	width: min(960px, 90lvw);
	margin-inline: auto;
}
ul.catalogList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem 1.5rem;
	font-size: 0.875em;
	line-height: 1.25;
	
	img {
		width: min(320px, 100%);
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
	}
	
	a {
		display: block;
		text-decoration: none;
	}
	
	&.single {
		grid-template-columns: 1fr;
		margin-bottom: 1.5rem;
		
		img {
			width: min(240px, 100%);
		}
	}
}

/* !company */
/* --------------------------- */
.companyProfile {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	width: min(800px, 90vw);
	margin: 0 auto 5rem;
	font-size: 1em;
	line-height: 1.75;
	text-align: left;
	
	dt, dd {
		margin: 0;
	}
	ol {
		padding-left: 1.5rem;
	}
	.philosophy {
		display: grid;
		gap: 0.75em;
	}
}
.companyTxt {
	font-size: 1em;
	line-height: 1.75;
	margin: 0 auto 2.5em;
	text-align: left;
}
.companyAccessWrap {
	display: grid;
	grid-template-columns: 1fr auto;
	width: min(800px, 90vw);
	margin: 0 auto 4.5rem;
}
.companyAccessTitle {
	font-size: 1.125em;
	line-height: 1.5;
	text-align: left;
	font-weight: 400;
	margin: 0 0 0.5em;
}

/* !support */
/* --------------------------- */
.supportTitle {
	width: min(704px, 90%);
	font-size: 1.625em;
	line-height: 1.375;
	font-weight: 400;
	margin: 0 auto 1em;
	padding: 0.3125em 0 0.475em;
	border: solid 3px var(--color-gray);
	
	.supportTxt + & {
		margin-top: 3.5em;
	}
}
.supportTxt {
	font-size: 1.1875em;
	line-height: 1.75;
	margin: 0 auto 1lh;
}
.supportNotice {
	font-size: 0.875em;
}
.innerBtn,.innerBtn:visited {
	display: inline-block;
	font-weight: 700;
	margin: 0 0.5em;
	background-color: var(--color-gray);
	color: var(--color-contrast);
	border-radius: 0.25em;
	text-decoration: none;
	padding: 0 0.375em 0.125em;
	vertical-align: 0;
	
	&:hover {
		background-color: var(--color-accent);
		color: var(--color-contrast);
	}
}
.supportBody {
	width: min(704px, 90%);
	margin: 0 auto 4.5rem;
}
.supportDisconList {
	width: fit-content;
	margin: 0 auto 1.5rem;
	
	table {
		border-collapse: collapse;
		caption-side: bottom;
		font-size: 0.875em;
		line-height: 1.375;
		margin: 0 auto;
		
		th,td {
			padding: 0.625em 1em;
			border: none;
			border-bottom: solid 1px var(--color-primary);
		}
		th {
			white-space: nowrap;
			font-weight: 400;
		}
		thead {
			border: none;
		}
		thead th {
			background: var(--color-bg);
			font-size: 1.25em;
			font-weight: 700;
		}
		thead th:not(:last-of-type),
		tbody th,
		tr:not(:has(td[colspan])) td:not(:last-of-type) {
			white-space: nowrap;
			border-right: solid 1px rgba(var(--color-primary-rgb), .5);
		}
		tbody th {
			text-align: left;
		}
	}
	
	figcaption {
		text-align: right;
		margin: 0.5em 0 0;
		font-size: 0.875em;
	}
}
.wp-block-table.supportDisconList table {
	width: auto;
}

/* !recruit */
/* --------------------------- */
.recruitCont {
	position: relative;
	width: min(880px, 90%);
	padding-top: 1em;
	margin: 0 auto 6rem;
	border-top: solid 6px var(--color-gray-light);
	font-size: 1.1875em;
	line-height: 1.5;
	text-align: left;
	font-weight: 300;
	
	&::before {
		content: "";
		display: block;
		width: 11em;
		height: 6px;
		background-color: #00a0e9;
		position: absolute;
		top: 0;
		left: 0;
		translate: 0 -100%;
	}
	&.midCareer::before {
		background-color: #22ac38;
	}
}
.recruitDetail {
	display: grid;
	grid-template-columns: 10em 1fr;
	align-items: start;
	gap: 0.25em 1em;
	margin: 0 auto;
	
	dt {
		margin: 0;
		white-space: nowrap;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 0.75em;
		
		&::after {
			content: "";
			display: block;
			width: 100%;
			height: 1px;
			background-color: #c9caca;
			flex-shrink: 1;
		}
	}
	dd {
		margin: 0;
	}
	.recruitMid & {
		width: 100%;
		grid-template-columns: 6em 1fr;
		gap: 0.25em 0.75em;
		margin-block-start: 0!important;
	}
}
.recruitMid {
	display: grid;
	grid-template-columns: 11em 1fr;
	align-items: start;
	gap: 1em;
	border-bottom: solid 1px #c9caca;
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
}
.recruitMidCat {
	font-size: 1em;
	font-weight: 500;
	margin: 0;
}
.recruitContact {
	width: min(600px, 90%);
	text-align: center;
	border: solid 1px var(--color-gray-light);
	margin: 3.5rem auto;
	padding: 1.5rem 2rem 1.625rem;
}
.recruitContactTitle {
	margin: 0 auto 1em;
	font-weight: 500;
}
.recruitContactTxt {
	font-size: 1em;
	line-height: 1.5;
	text-align: center;
	margin: 0 auto 1em;
}
.recruitContactBody {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	
	dl {
		margin: 0;
		font-size: 0.875em;
		line-height: 1.5;
	}
	dt, dd {
		margin: 0;
	}
}

/* !contact */
/* --------------------------- */
.contactFormWrap  {
	width: min(640px, 90%);
	margin: 0 auto 4.5rem;
}
.contactFormTitle {
	font-size: 1.5em;
	line-height: 1;
	font-weight: 500;
	white-space: nowrap;
	margin: 0 auto 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	
	&::before, &::after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background-color: var(--color-gray-light);
	}
	
	.formItem + & {
		margin-top: 2em;
	}
}
.formItem {
	display: grid;
	grid-template-columns: 10em 1fr;
	gap: 1.5em;
	padding: 1em;
	border-bottom: solid 1px rgba(var(--color-gray-light-rgb),.25);
}
.formLabel {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	
	.required {
		display: block;
		font-size: 0.75em;
		line-height: 1;
		font-weight: 700;
		background-color: var(--color-accent);
		color: var(--color-contrast);
		padding: 0.25em 0.5em 0.375em;
	}
}
.formParts {
	width: 100%;
	text-align: left;
	align-content: start;
	
	input[type=text], input[type=email], input[type=tel], input[type=number], textarea {
		border: solid 1px var(--color-gray-light);
		width: 100%;
		padding: 0.5em;
		outline: none;
		transition: box-shadow 0.4s ease;
		
		&:focus {
			box-shadow: 0 0 0 3px var(--color-gray);
			outline: none;
		}
		
		/* &.p-postal-code {
			width: 10em;
		} */
	}
	input[type=number] {
		width: 4em;
	}
}
.formPartsWrap {
	display: grid;
	gap: 1em 0.5em;
	text-align: left;
	font-size: 0.875em;
	
	&.column2 {
		grid-template-columns: 1fr auto;
	}
	.wpcf7-form-control.wpcf7-radio,
	.wpcf7-form-control-wrap[data-name="contact_category"] {
		display: grid;
		gap: 1em 0.5em;
		grid-template-columns: 1fr;
		position: relative;
		
		&:has(.wpcf7-not-valid-tip) {
			padding-bottom: 2em;
		}
		
		.wpcf7-not-valid-tip {
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
	.wpcf7-form-control.wpcf7-radio,
	.wpcf7-form-control-wrap[data-name="contact_category"] {
		display: grid;
		gap: 1em 0.5em;
		grid-template-columns: 1fr;
		position: relative;
		
		&:has(.wpcf7-not-valid-tip) {
			padding-bottom: 2em;
		}
		
		.wpcf7-not-valid-tip {
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}
	.wpcf7-form-control-wrap[data-name="gender"] .wpcf7-form-control,
	.wpcf7-form-control-wrap[data-name="work-location"] .wpcf7-form-control,
	.wpcf7-form-control-wrap[data-name="employment-status"] .wpcf7-form-control {
		grid-template-columns: 4rem auto;
	}
	.wpcf7-list-item {
		margin-left: 0;
	}
	.wpcf7-form-control.wpcf7-checkbox.wpcf7-validates-as-required {
		display: grid;
		gap: 1em 0.5em;
	}
}

.wpcf7-form-control-wrap[data-name="age"] {
	position: relative;
	
	&::after {
		content: "歳";
		position: absolute;
		top: 50%;
		right: 100%;
		translate: 5.5em -50%;
	}
}
.contactPrivacy {
	margin: 0 auto 1.5rem;
	padding: 1.5em 1.5em;
	background-color: rgba(var(--color-gray-light-rgb),.125);
	
	dt {
		font-size: 1.2em;
		margin: 0 0 0.5em;
	}
	dd {
		font-size: 0.75em;
		line-height: 1.5;
		text-align: left;
		margin: 0 auto 0.5em;
		
		label {
			display: block;
			width: fit-content;
			margin-inline: auto;
			font-size: 1.25em;
			background-color: rgba(var(--color-contrast-rgb), .5);
			padding: 0.5em 1em;
			border-radius: 100vmax;
			
			&:has(*:checked) {
				background-color: rgba(var(--color-contrast-rgb), 1);
			}
		}
		.wpcf7-form-control-wrap {
			display: block;
			width: fit-content;
			margin-inline: auto;
		}
	}
}
.formBtnWrap {
	margin: 1.5rem auto 3rem;
	
	button, input {
		font-size: 1.5em;
		font-weight: bold;
		border: none;
		padding: 0.5em 1.5em 0.625em;
		background-color: var(--color-primary);
		color: var(--color-contrast);
		cursor: pointer;
		transition: background-color 0.25s ease;
		
		&:hover {
			background-color: var(--color-accent);
		}
	}
}
.content .contact-validation-error,
.content .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #d00;
	font-size: 14px;
	line-height: 1.5;
}

.content .contact-validation-error-input {
	border-color: #d00 !important;
}

/* !news */
/* --------------------------- */
.postCont {
	margin-inline: auto;
	width: min(960px, 100%);
}
.postHeader {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--color-accent);
	padding: 2rem 1.375rem 2rem;
	margin: 0 0 2rem;
	border-top: solid 1px var(--color-primary);
	border-bottom: solid 1px var(--color-primary);
}
.postTitle {
	font-size: 2em;
	line-height: 1.25;
	text-align: left;
	font-weight: 600;
	margin: 0;
}
.postInfo {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	background-color: rgba(var(--color-accent-rgb), .15);
	padding: 0.75em 1.5em;
	color: var(--color-primary);
}
.postBody {
	position: relative;
	padding: 0 1.5rem 3rem;
	margin: 0 auto 3rem;
	line-height: 1.625;
	text-align: left;
	border-bottom: solid 1px var(--color-primary);
}
.postNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	
	.gotoList {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
	}
	
	a[rel=next] {
		margin-left: auto;
	}
}
.wp-pagenavi {
	margin: 4.5rem auto 4.5rem;
	font-size: 0.875em;
	line-height: 1;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	
	.page, .current, .previouspostslink, .nextpostslink {
		color: var(--color-primary);
		background-color: rgba(var(--color-accent-rgb), .15);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2em;
		height: 2.875em;
		text-decoration: none;
		padding-bottom: 0.125em;
		
		&:hover {
			background-color: rgba(var(--color-accent-rgb), .25);
			color: var(--color-contrast);
		}
	}
	.current {
		background-color: rgba(var(--color-accent-rgb), .25);
		color: var(--color-contrast);
	}
	.previouspostslink {
		margin-right: 1em;
	}
	.nextpostslink {
		margin-left: 1em;
	}
}


/* !sp */
/* --------------------------- */
@media screen and (max-width:767px) {
	/* !sp common */
	/* --------------------------- */
	.floatLeft,
	.floatRight,
	.alignleft,
	.alignright {
		display: block;
		text-align: center;
		float: none;
		margin: 16px auto;
	}
	.nosp {
		display: none;
	}
	.sp {
		display: block;
	}
	.flexCont {
		display: block;
	}
	/* !sp layout */
	/* --------------------------- */
	html {
		font-size: clamp(14px, 3.8vw, 18px);
	}
	main {
		max-width: 100vw;
		overflow-x: hidden;
		padding-top: 0;
	}
	/* !sp header */
	/* --------------------------- */
	.gHeader {
		padding: 0.5rem 3.75rem 0.5rem 0.75rem;
		block-size: cover;
	}
	.siteTitle {
		margin: 0 auto;
	}
	.headerHit {
		max-width: 60%;
	}
	ul.headerLineup {
		display: none;
	}
	.toggle {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 0.375rem;
		width: 3rem;
		height: 3rem;
		background-color: var(--color-primary);
		cursor: pointer;
		z-index: 1000;
	}
	.toggle .bar {
		width: 57.5%;
		height: 6%;
		background-color: var(--color-contrast);
		transition: scale 0.2s ease-in-out, rotate 0.2s ease-in-out;
		pointer-events: none;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(1) {
		rotate: 45deg;
		translate: 0 0.6rem;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(2) {
		scale: 0 1;
	}
	#gNav:checked ~ .toggle .bar:nth-of-type(3) {
		rotate: -45deg;
		translate: 0 -0.6rem;
	}
	.gNav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: var(--color-contrast);
		z-index: 500;
		overflow: hidden;
		translate: 0 -10%;
		transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out;
		padding: 3rem 1.5rem 1.5rem;
		pointer-events: none;
		opacity: 0;
		box-shadow: 0 7px 14px rgba(var(--color-primary-rgb), .05);
	}
	#gNav:checked ~ .gNav {
		translate: 0 0;
		pointer-events: auto;
		opacity: 1;
	}
	ul.gNavList {
		flex-direction: column;
		margin: 0 auto 1rem;
		padding: 0;
		font-size: 1.125rem;
		line-height: 1;
		
		a, button {
			width: 100%;
			padding: 1em 0;
		}
		li {
			width: 100%;
		}
		li:not(:first-of-type)::before {
			width: 100%;
			height: 1px;
		}
	}
	.gNavBg {
		display: block;
		pointer-events: none;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(var(--color-primary-rgb), .8);
		opacity: 0;
		z-index: 100;
		transition: opacity 0.4s ease;
		
		#gNav:checked ~ & {
			pointer-events: auto;
			opacity: 1;
		}
	}
	ul.bizNav {
		display: flex;
		width: fit-content;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 0;
		font-size: 1.125rem;
		li {
			width: 100%;
		}
		a {
			padding-top: 0.75em;
			padding-bottom: 0.75em;
		}
		li:not(:first-of-type)::before {
			width: 100%;
			height: 1px;
		}
	}
	.subNav {
		top: 0;
		left: 0;
		translate: 0 0;
		.content {
			width: 90%;
			padding: 1rem;
		}
	}
	.subNav:popover-open {
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1);
	}
	ul.prodNav {
		font-size: 0.875em;
		width: 100%;
		
		a {
			grid-template-columns: 1fr;
			gap: 0.375rem;
			padding: 0.5em 0.5em 0.5em 4em;
		}
	}
	.prodNavCat {
		font-size: 1.25em;
	}
	.prodCatModel {
		display: none;
	}
	.gFooter {
		background-size: cover;
		align-items: center;
		ul.gNavList {
			display: grid;
			grid-template-columns: 1fr 1fr;
			li::before {
				display: none;
			}
		}
	}
	.footerCont {
		margin-bottom: 1rem;
	}
	.footerHit {
		margin: 0 auto 0 1.5rem;
		max-width: 40%;
	}
	.pagetop {
		margin: 0 1.5rem 0 auto;
		white-space: nowrap;
	}
	.footerContact {
		width: fit-content;
		position: relative;
		top: auto;
		right: auto;
		margin: 0 auto 1rem;
		padding: 1.5em;
	}
	ul.stickyNavList {
		font-size: 0.875em;
	}
	/* !sp top */
	/* --------------------------- */
	.heroImg {
		aspect-ratio: 4 / 3;
	}
	.swiper-slide {
		&::after {
			width: calc(100% - 2rem);
			height: calc(100% - 2rem);
		}
	}
	.slideTitle {
		font-size: 1.25rem;
		margin-top: 3em;
		
		.wf-jost-r {
			font-size: 3.25rem;
		}
	}
	.slideCatch {
		font-size: 1rem;
		top: 100%;
		left: 3.5rem;
		translate: 0% calc(-100% - 2em);
	}
	.slideImg {
		.slideLaser & {
			right: 3rem;
			width: 27.5%;
		}
		.slideSystem & {
			right: 0.5rem;
			width: 40%;
		}
		.slideRobot & {
			right: 2.5rem;
			width: 33%;
		}
	}
	.topContent {
		padding: 1.5rem 1.5rem;
	}
	.topContTitle {
		width: min(12em, 90%);
		font-size: 1.5em;
	}
	.prodLineup {
		grid-template-columns: 1fr;
		padding: 0 1.5rem;
	}
	ul.newsList {
		font-size: 1em;
		
		a {
			grid-template-columns: 5em 6em;
		}
		.newsCat {
			padding: 0.25em 0.5em;
		}
		.newsListTitle {
			grid-column: 1 / 4;
		}
	}
	/* !sp lower */
	/* --------------------------- */
	.contTitle {
		font-size: 1.3125em;
	}
	.contTxt {
		font-size: 1em;
		
		&:not(:last-of-type) {
			margin-bottom: 2em;
		}
	}
	.prodDetailHeader {
		margin: 1.5rem auto 4rem;
		padding-top: 3.5rem;
		padding-bottom: 5rem;
		&::before {
			height: 47.5%;
		}
	}
	.prodDetailCatch {
		font-size: 1em;
	}
	.prodDetailTitle {
		font-size: 1.125em;
		translate: 0 0;
		
		.wf-jost-r {
			font-size: 2.5em;
		}
	}
	.prodDetailPoint {
		top: 0.5rem;
		right: 0.5rem;
		
		&::after {
			width: 2.5rem;
			height: 2.5rem;
		}
	}
	.prodDetailBody {
		margin: -4.5rem auto 0;
		gap: 1.5rem;
	}
	.prodDetailModel {
		font-size: 1.5em;
		margin: 1em auto 0 0.5em;
	}
	.prodDetailImg {
		width: 40%;
	}
	.prodDetailEco {
		font-size: 0.75em;
		width: fit-content;
		position: relative;
		top: auto;
		left: auto;
		translate: 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
		margin: 0 auto;
		
		&::before {
			margin: 0;
		}
	}
	.prodDetailCont {
		grid-template-columns: 1fr;
		margin-bottom: 2rem;
	}
	.prodDetailContImg {
		width: 100%;
		img {
			width: 100%;
		}
	}
	.prodDetailContImgGrid {
		width: 80%;
		margin-inline: auto;
	}
	.prodDetailSpec {
		display: block;
		gap: 1.5rem;
	}
	.prodDetailSpecNotice {
		grid-column: 1 / 1;
		margin-bottom: 1.5rem;
	}
	.tableWrap {
		max-width: 100%;
		overflow: auto;
	}
	.prodDetailSpecData tr th:first-of-type {
		position: sticky;
		left: 0;
		background-color: var(--color-contrast);
		box-shadow: inset -1px 0 0 0 rgba(var(--color-primary-rgb), .25);
	}
	.prodDetailSpecCont {
		margin-bottom: 3rem;
	}
	.bizContTitle {
		font-size: 4.5em;
	}
	.bizContCatch {
		font-size: 1.75em;
	}
	.bizContTxt {
		font-size: 1em;
	}
	.companyProfile {
		grid-template-columns: 1fr;
		gap: 0;
		font-size: 0.875em;
		
		dt {
			font-size: 1.125em;
			font-weight: 600;
		}
		dd {
			margin-bottom: 1em;
		}
	}
	.bizImgGallery {
		gap: 1.5rem;
	}
	.bizFactoryHeading {
		flex-wrap: wrap;
		img {
			margin: 1rem auto;
		}
	}
	.bizFactoryBody {
		grid-template-columns: 1fr;
		gap: 1rem;
		img {
			margin-inline: auto;
		}
	}
	.bizFactoryEquipmentListWrap {
		grid-template-columns: 1fr;
		gap: 0.25rem;
		
		&.column3 {
			grid-template-columns: 1fr;
		}
	}
	.bizPointWrap {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		width: fit-content;
		
		.bizContTxt {
			margin: 0;
		}
	}
	.bizIso {
		text-align: center;
	}
	.companyAccessWrap {
		grid-template-columns: 1fr;
	}
	.companyAccessMap iframe {
		max-width: 100%;
	}
	.recruitCont {
		font-size: 0.9375em;
		line-height: 1.5;
	}
	.recruitMid {
		grid-template-columns: 1fr;
	}
	.recruitMid .recruitDetail {
		grid-template-columns: 10em 1fr;
		gap: 0.25em 1em;
	}
	.contactFormTitle {
		font-size: 1.375em;
	}
	.formItem {
		grid-template-columns: 1fr;
		gap: 0.5em;
	}
	.formLabel {
		justify-content: flex-end;
		gap: 1em;
	}
	.formPartsWrap {
		margin-top: 0.5em;
		padding-left: 1.5em;
	}
	.formPartsWrap.column2 {
		grid-template-columns: 1fr;
	}
}