@charset "utf-8";

/* ============================================= main_visual */
.products_list .main_visual {
	height: 388px;
	background: url(../imgs/products/servomotor/main_visual.png) no-repeat center center / cover;
}

.main_visual .text {
	max-width: 736px;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.products_list .main_visual {
		height: 676px;
		background: url(../imgs/products/servomotor/main_visual_sp.png) no-repeat center top / cover;
	}
}


/* ============================================= search_button */
.search_button {
	text-align: center;
}

.search_button a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	max-width: 100%;
	padding: 15px 40px;
	background: #007DC8;
	border: #007DC8 1px solid;
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
}

.search_button a .icon {
	position: relative;
	width: 19px;
	height: 20px;
	display: inline-block;
}

.search_button a .icon_default,
.search_button a .icon_hover {
	position: absolute;
	inset: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.3s ease;
}

.search_button a .icon_default {
	background-image: url(../imgs/products/servomotor/icon_search.png);
	opacity: 1;
}

.search_button a .icon_hover {
	background-image: url(../imgs/products/servomotor/icon_search_blue.png);
	opacity: 0;
}

.search_button a:hover {
	background-color: #fff;
	color: #007DC8;
}

.search_button a:hover .icon_default {
	opacity: 0;
}

.search_button a:hover .icon_hover {
	opacity: 1;
}


/* ============================================= product_content */
.flexbox.pc-text-col2 {
	gap: 32px;
	margin: 18px 0 0;
}

.flexbox.pc-text-col2 .text {
	width: 608px;
	margin: 0;
}

.flexbox.pc-text-col2 .image {
	width: 288px;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.flexbox.pc-text-col2 .text,
	.flexbox.pc-text-col2 .image {
		width: 100%;
	}
	.flexbox.pc-text-col2 .text .flexbox > p {
		width:4em;
	}
	.flexbox.pc-text-col2 .text .flexbox > p + p {
		width:calc(100% - 4em);
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.inner_links {
		display: grid;
		justify-content: center;
	}
}


/* ============================================= table */
.table_content table {
	white-space: nowrap;
}

.table_content table .table-color td {
	background-color: var(--color-background-1);
}

.table_content table .table-color .bg_color_none {
	background-color: transparent;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.table_content table th,
	.table_content table td {
		font-size: 1.4rem;
	}
}


/* ============================================= ul disc custom */
ul.disc.top li {
	line-height:1.875;
}


/* ============================================= scroll arrow */

.scroll_arrow {
	margin-top: 18px;
}

/* ------------------------------------- for pc */
@media ( min-width : 928px ) {
	.scroll_arrow {
		display:block;
	}
}


/* ============================================= 「※」が付くテキスト */
.caution_1 {
	position: relative;
	padding-left: 1.3em;
	font-size: 1.4rem;
}

.caution_1::before {
	content: '※';
	position: absolute;
	left: 0;
	top: 1px;
}

.caution_2 {
	counter-reset: caution-num; /* カウンターを初期化 */
}

.caution_2 li {
	counter-increment: caution-num; /* 各liでカウンターを+1 */
	position: relative;
	padding-left: 1.8em;
	font-size: 1.4rem;
}

.caution_2 li::before {
	content: "※" counter(caution-num);
	position: absolute;
	left: 0;
	top: 1px;
}



/* ============================================= page sv net */
.sv_lead_content h2 {
	text-align:center;
	font-size:2.5rem;
	line-height:1.6;
	font-weight:500;
}
.sv_lead_content p {
	margin-top:35px;
	line-height:1.875;
}

.sv_system_content {
	justify-content:space-between;
}
.sv_system_content dl,
.sv_system_content p {
	width:calc(100% - 320px);
}
.sv_system_content .image {
	width:288px;
}
.sv_system_content p {
	line-height:1.875;
}
.sv_system_content dl.common dt {
	font-size:1.8rem;
	position:relative;
	padding-left:2.9rem;
	color:#2F2F2F;
}
.sv_system_content dl.common dt::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.2rem;
	aspect-ratio: 1 / 1;
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	border-right: 2px solid #888;
	border-top: 2px solid #888;
	transition: 0.3s;
}
.sv_system_content dl.common dd {
	margin-top:10px;
	line-height:1.875;
}

.arrow {
	position: relative;
	margin-bottom:50px;
	padding-bottom:107.2px;
}
.arrow::after {
	content: "";
	position: absolute;
	left: calc(50% - 160px);
	bottom: 0px;
	transform: translateX(-50%);
	width: 66px;
	height: 57.2px;
	background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='66' height='57.2' viewBox='0 0 66 57.2'>\
<defs>\
<linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
<stop offset='0%' stop-color='%23DCDCDC'/>\
<stop offset='100%' stop-color='%23F0F0F0'/>\
</linearGradient>\
</defs>\
<polygon points='0,0 66,0 33,57.2' fill='url(%23grad)'/>\
</svg>") no-repeat center / contain;
}


/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.sv_lead_content h2 {
		text-align:center;
		font-size:2rem;
		line-height:1.6;
		font-weight:500;
	}
	.sv_lead_content p {
		margin-top:35px;
		line-height:1.875;
	}
	.sv_system_content {
		display:block;
	}
	.sv_system_content dl,
	.sv_system_content p {
		width:100%;
	}
	.sv_system_content .image {
		width:576px;
		max-width:100%;
		margin:30px auto 0;
	}
	.sv_system_content p {
		line-height:1.875;
	}
	.sv_system_content dl.common dt {
		font-size:1.8rem;
		position:relative;
		padding-left:2.9rem;
		color:#2F2F2F;
	}
	.sv_system_content dl.common dt::before {
		content: "";
		display: block;
		position: absolute;
		width: 1.2rem;
		aspect-ratio: 1 / 1;
		left: 0;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		border-right: 2px solid #888;
		border-top: 2px solid #888;
		transition: 0.3s;
	}
	.sv_system_content dl.common dd {
		margin-top:10px;
		line-height:1.875;
	}

	.arrow {
		position: relative;
		margin-bottom:50px;
		padding-bottom:107.2px;
	}
	.arrow::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0px;
		transform: translateX(-50%);
		width: 66px;
		height: 57.2px;
		background: url("data:image/svg+xml;utf8,\
	<svg xmlns='http://www.w3.org/2000/svg' width='66' height='57.2' viewBox='0 0 66 57.2'>\
	<defs>\
	<linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'>\
	<stop offset='0%' stop-color='%23DCDCDC'/>\
	<stop offset='100%' stop-color='%23F0F0F0'/>\
	</linearGradient>\
	</defs>\
	<polygon points='0,0 66,0 33,57.2' fill='url(%23grad)'/>\
	</svg>") no-repeat center / contain;
	}
}


/* ============================================= related_ul */
/* ------------------------------------- responsive */
@media screen and (min-width:981px) and ( max-width:1200px) {
	.related_ul .related_li {
		aspect-ratio: 8 / 5 !important;
		background-size:cover;
	}
}
@media screen and (min-width:768px) and ( max-width:980px) {
	.related_ul .related_li {
		aspect-ratio: 4 / 3 !important;
		background-size:cover;
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.related_ul .related_li {
		aspect-ratio: 10 / 9 !important;
		background-size:cover;
	}
}