@charset "utf-8";

/* ============================================= p */
.products p {
	line-height:1.875;
}

a.color_main {
	color:var(--color-main);
}

a.text_link {
	color:var(--color-secondary);
}

/* ============================================= main_visual */
.products_list .main_visual {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 355px;
	padding:80px 0;
}

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

.products_list .main_visual .text.wide {
	max-width:928px ;
	width: 90%;
}

.products_list .main_visual .text h1 {
	margin-bottom: 20px;
	font-size: 3rem;
	font-weight: 700;
	color: #fff;
}

.products_list .main_visual .text {
	font-size: 1.6rem;
	line-height: 1.875;
	color: #fff;
}

.products_pages .product_common_visual {
	width:1260px;
	max-width:90%;
	margin:0 auto;
	padding:30px 40px;
	background:url(../imgs/products/common/main_title_bg_pc.jpg) no-repeat center;
	background-size:cover;
}
.products_pages .product_common_visual .text h1 {
	text-align:center;
	font-weight:700;
	font-size:30px;
	color: var(--color-primary);
}

/* -- サムネありver -- */

/* ----
.product_common_visual.thumb {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.product_common_visual.thumb .thumbnail {
	width:275px;
}
.product_common_visual.thumb .text {
	width:calc(100% - 300px);
}
---- */

.product_common_visual.thumb {
	display:flex;
	justify-content:center;
	align-items:center;
}
.product_common_visual.thumb .thumbnail {
	min-width:275px;
	max-width:275px;
}
.product_common_visual.thumb .text {
	width:auto;
	margin-left:2.5rem;
}

.product_common_visual.thumb .text h1 {
	text-align:left;
	font-weight:700;
	line-height:1.4;
}
.product_common_visual.thumb .text p {
	margin-top:15px;
	font-size:1.6rem;
	line-height:1.875;
}
.product_common_visual.thumb .text p span {
	display:block;
	font-size:1.8rem;
	font-weight:700;
}
.product_common_visual.thumb .text p span.red {
	color:#C8384D;
}

/* -- 製品詳細ページ（画像のみ、テキストなし） -- */
.products_pages_2 .main_visual {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}


/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.products_list .main_visual {
		align-items: flex-end;
		height: 618px;
		aspect-ratio: 376 / 618;
		padding: 0 0 40px;
	}

	.products_list .main_visual .text h1 {
		font-size: 2.56rem;
	}
	
	.products_pages .product_common_visual {
		width:100%;
		max-width:100%;
		padding:30px 10%;
		background:url(../imgs/products/common/main_title_bg_sp.jpg) no-repeat center;
		background-size:100% auto;
	}
	.products_pages .product_common_visual .text h1 {
		text-align:center;
		font-size:2.5rem;
	}
	
	/* -- サムネありver -- */
	.product_common_visual.thumb {
		display:block;
		height:auto;
		background:url(../imgs/products/servomotor/sv-net/main_title_bg_sp.png) no-repeat center;
		background-size:cover;
	}
	.product_common_visual.thumb .thumbnail {
		min-width:275px;
		max-width:100%;
		margin:0 auto;
	}
	.product_common_visual.thumb .text {
		width:100%;
		margin:0;
	}
	.product_common_visual.thumb .text h1 {
		text-align:left;
		font-weight:700;
		line-height:1.6;
	}
	.product_common_visual.thumb .text p {
		margin-top:15px;
		font-size:1.6rem;
		line-height:1.875;
	}

	/* -- 製品詳細ページ（画像のみ、テキストなし） -- */
	.products_pages_2 .main_visual img {
		width: 100%;
	}
	
}



.background_color_gradation_gray {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 288 / 254;
	background: linear-gradient(296.56deg, #C1C1C1 -2.02%, #F7F7F7 66.24%);
}



/* ============================================= inner_links */
.inner_links {
	margin:130px 0 80px;
	text-align:center;
	display:flex;
	justify-content:center;
}
.inner_links li {
	margin:0 20px;
	font-size:1.6rem;
}
.inner_links li a {
	color:#000;
	text-decoration:none;
	position:relative;
	padding-left:24px;
}
.inner_links li a::before {
	content:"";
	position:absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 12px solid #007dc8;
	border-right: 0;
	left:0;
	top:calc(50% - 7px);
}

/* ------------------------------------- for pc */
@media ( min-width : 768px ) {
	.inner_links li a:hover {
		color:#007dc8;
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.inner_links {
		margin:40px auto 50px;
		display:flex;
		flex-direction: column;
	}
	.inner_links li {
		margin:10px 0 0;
		font-size:1.6rem;
		text-align:left;
	}
}


/* ============================================= product_content */
/*
.product_content .text {
	margin: 18px 0 0;
}
*/

.product_content .link_type_01 {
	display: inline-block;
	width: auto;
	padding: 8px 66px;
}


.product_content .pc-thumb-col3 {
	gap: 32px;
	margin: 18px 0 0;
	padding: 0;
}

.product_content .pc-thumb-col3 {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 18px 0 0;
	padding: 0;
}

.product_content .pc-thumb-col3 > li {
	width: 288px;
	display: flex; /* 子要素を伸ばすため */
}

.product_content .pc-thumb-col3 > li a,
a.link_thumbnail_text_button {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration:none;
}

.product_content .pc-thumb-col3 > li a div,
a.link_thumbnail_text_button div {
	position:relative;
	display: flex;
	justify-content: center; /* 横中央 */
	align-items: center;     /* 縦中央 */
	overflow: hidden;        /* はみ出し防止 */
}
.product_content .pc-thumb-col3 > li a div::after,
a.link_thumbnail_text_button div::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(255, 255, 255, 0); /* 初期は透明 */
	transition: background 0.3s ease;
}
.product_content .pc-thumb-col3 > li a div img,
a.link_thumbnail_text_button div img {
	width: 90%;
	max-width: 100%; /* レスポンシブ対応 */
	transition: transform 0.3s ease;
	transform: scale(0.95);   /* 初期は80% */
}

.link_thumbnail_text_button {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.product_content .pc-thumb-col3 > li a p,
a.link_thumbnail_text_button p {
	width: 100%;
	display: flex;              /* テキストと矢印を中央寄せ */
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem 0.6rem;
	background-color: var(--color-white);
	border: 1px solid #4c4c4c;
	color: #4c4c4c;
	border-radius: 0.7rem;
	transition: 0.3s;
	flex-grow: 1;               /* ← 高さを均等に揃える */
	box-sizing: border-box;
}

.product_content .pc-thumb-col3 > li a p span:not(.alpha):not(.font_yu_gothic),
a.link_thumbnail_text_button p span:not(.alpha):not(.font_yu_gothic) {
	position: relative;
	font-size: 1.4rem;
	line-height: 1.4;
	display: inline-block;
	padding-right: 2rem;
	transition: 0.3s;
	vertical-align: middle;
}

.product_content .pc-thumb-col3 > li a p span:not(.alpha):not(.font_yu_gothic)::before,
a.link_thumbnail_text_button p span:not(.alpha):not(.font_yu_gothic)::before {
	content: "";
	display: block;
	position: absolute;
	width: 1.2rem;
	aspect-ratio: 1 / 1;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(45deg); /* ← 矢印を縦中央に */
	border-right: 2px solid #4c4c4c;
	border-top: 2px solid #4c4c4c;
	transition: 0.3s;
}


/* ------------------------------------- for pc */
@media ( min-width : 768px ) {
	.product_content .pc-thumb-col3 > li:hover a div img,
	a.link_thumbnail_text_button:hover div img {
	    transform: scale(1);     /* hover時に100% */
	}
	.product_content .pc-thumb-col3 > li:hover a div::after,
	a.link_thumbnail_text_button:hover div::after {
		background: rgba(255, 255, 255, 0.2); /* 薄い白を重ねる */
	}
	.product_content .pc-thumb-col3 > li a:hover p,
	a.link_thumbnail_text_button:hover p {
		background-color: var(--color-main);
		color: var(--color-white);
		border-color: var(--color-main);
	}
	.product_content .pc-thumb-col3 > li a:hover p span:not(.alpha):not(.font_yu_gothic),
	a.link_thumbnail_text_button:hover p span:not(.alpha):not(.font_yu_gothic) {
		transform: translateX(0.5rem);
	}
	.product_content .pc-thumb-col3 > li a:hover p span:not(.alpha):not(.font_yu_gothic)::before,
	a.link_thumbnail_text_button:hover p span:not(.alpha):not(.font_yu_gothic)::before {
		border-color: var(--color-white);
	}
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.product_content .link_type_01 {
		font-size: 1.44rem;
	}

	.product_content .pc-thumb-col3 > li {
		width: 100%;
	}
}


/* ============================================= 製品詳細 ページタイトル */
.products_pages_2 .detail_title {
	text-align: center;
}

.products_pages_2 .detail_title h1 {
	font-size: 2.5rem;
	font-weight: 500;
	color: var(--color-black);
}

.products_pages_2 .detail_title p {
	font-size: 1.6rem;
	color: var(--color-black);
	color: #252525;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.products_pages_2 .detail_title h1 {
		font-size: 2rem;
	}

	.products_pages_2 .detail_title p {
		font-size: 1.2rem;
		color: #2f2f2f;
	}
}


/* ============================================= 製品詳細 タブ */
.tabs_01 .tabs_nav {
	display: flex;
	justify-content: center;
	gap: 15px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scroll-snap-type:x proximity;
}

.tabs_01 .tabs_nav .tab {
	appearance: none;
	outline: none;
	cursor: pointer;
	opacity: 0.8;
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 0 16px 16px;
	background-color: transparent;
	border: none;
	border-bottom: #cce5f4 5px solid;
	font-size: 2.0rem;
	font-weight: 700;
	color: #7f7f7f;
	white-space:nowrap;
}

.tabs_01 .tabs_nav .tab:hover,
.tabs_01 .tabs_nav .tab.is-active {
	opacity: 1;
	border-bottom-color: #007DC8;
	color: var(--color-black);
}

/* パネルの基本状態（非表示） */
.tabs_01 .tabs_panels .tab-panel {
	display: none;
	opacity: 0;
	transition: opacity .3s ease;
}

/* 表示状態 */
.tabs_01 .tabs_panels .tab-panel.is-active {
	display: block;
	opacity: 1;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.tabs_01 .tabs_nav {
		justify-content: flex-start;
	}

	.tabs_01 .tabs_nav .tab {
		font-size: 1.8rem;
	}
}


/* ============================================= cta box */
.cta_box {
	margin: 128px 0;
}

.cta_box .flexbox {
	gap: 30px;
	padding: 0;
}

.cta_box .link_type_01 {
	padding: 15px 66px;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.cta_box {
		margin: 80px 0;
	}
}


/* ============================================= product_related_list */
.product_related_list {
	width:1120px;
	max-width:90%;
	margin:0 auto 100px;
}
.product_related_list .title {
	text-align:center;
	color:#4D4D4D;
	font-size:2rem;
	font-weight:700;
	padding-bottom:15px;
	border-bottom:1px solid #888888;
}
.related_ul {
	margin-top:60px;
	display:flex;
	flex-wrap:wrap;
	gap:2.8%;
}
.related_li {
	width: 100%;
	max-width: 22.9%;
	aspect-ratio: 256 / 180;
	position:relative;
	background:url(../imgs/products/common/products_bg_pc.png) no-repeat center top;
	text-align:center;
	margin-bottom:2.8rem;
}
.related_li a {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	overflow:hidden;
}
.related_li .image {
	width:164px;
	max-width:64%;
	margin:0 auto;
}
.related_li p {
	position:absolute;
	bottom:10px;
	left:0;
	right:0;
	font-size:1.4rem;
	line-height:1.5;
	font-weight:700;
	color:#4d4d4d;
	z-index:1;
}
.related_li.new::before {
	content: "New";
	position: absolute;
	top: 8px;
	right: 8px;
	background: #C8384D;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	padding: 3px 8px 4px;
	line-height: 1;
	z-index: 2;
}

/* ------------------------------------- for pc */
@media ( min-width : 768px ) {
	.related_li:hover {
		opacity:.8;
	}
}

/* ------------------------------------- responsive */
@media screen and (min-width:768px) and ( max-width:1200px) {
	.related_ul {
		gap:2%;
	}
	.related_li {
		max-width: 32%;
		margin-bottom:2rem;
	}
}


/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.product_related_list {
		width:90%;
		margin:0 auto 60px;
	}
	.product_related_list .title {
		text-align:center;
		color:#4D4D4D;
		font-size:1.8rem;
		font-weight:700;
		padding-bottom:10px;
		border-bottom:1px solid #888888;
	}
	.related_ul {
		margin-top:50px;
		display:flex;
		flex-wrap:wrap;
		gap:5%;
	}
	.related_li {
		width: 100%;
		max-width: 47.5%;
		aspect-ratio: 156 / 160;
		position:relative;
		background:url(../imgs/products/common/products_bg_pc.png) no-repeat center top;
		background-size:cover;
		text-align:center;
		margin-bottom:2rem;
	}
	.related_li .image {
		width:auto;
		max-width:86%;
		margin:0 auto;
	}
	.related_li p {
		position:absolute;
		bottom:10px;
		left:0;
		right:0;
		font-size:1.2rem;
		font-weight:700;
		color:#4d4d4d;
		z-index:1;
	}
	.related_li.new::before {
		content: "New";
		position: absolute;
		top: 8px;
		right: 8px;
		background: #C8384D;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 3px 8px 4px;
		line-height: 1;
		z-index: 2;
	}
}


/* ============================================= title_blue_line */
.title_blue_line {
	font-size:1.8rem;
	font-weight:700;
	display:flex;
}
.title_blue_line span {
	position:relative;
	padding-right:16px;
	padding-bottom:8px;
	border-bottom:1px solid #007DC8;
}
.title_blue_line span::after {
	content:"";
	width:1px;
	height:8px;
	background:#007DC8;
	position:absolute;
	bottom:0;
	right:0;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.title_blue_line {
		font-size:1.8rem;
		font-weight:700;
		display:flex;
	}
	.title_blue_line span {
		position:relative;
		padding-right:16px;
		padding-bottom:8px;
		border-bottom:1px solid #007DC8;
	}
	.title_blue_line span::after {
		content:"";
		width:1px;
		height:8px;
		background:#007DC8;
		position:absolute;
		bottom:0;
		right:0;
	}
}


/* ============================================= table */
.table_content {
	width: 100%;
	overflow-x: auto;   /* 横スクロールを許可 */
	-webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
	cursor: grab;
}
.table_content:active {
	cursor: grabbing; /* ドラッグ中 */
}
.table_content table {
	width: 928px;  /* PC基準サイズ固定 */
	border-collapse: collapse;
	min-width: 928px; /* スマホで縮まないようにする */
}
.table_content.w100 table {
	width:100%;
	min-width:100%;
}
.table_content table.fixed {
	table-layout:fixed;
}
.table_content.nowrap table {
	white-space:nowrap;
	margin-bottom: 1.5rem;
}
.table_content table th {
	padding:10px 12px;
	border:1px solid #B8B8B8;
	background:#F5F5F5;
	font-size:1.6rem;
}
.table_content table td {
	padding:10px 12px;
	border:1px solid #B8B8B8;
	background:#FFF;
	text-align:center;
	font-size:1.6rem;
}
.table_content table td img {
	width:auto;
	max-width:100%;
	margin:0 auto;
}
.table_content table a {
	color:var(--color-main);
}

/* ===== スクロールバーのデザイン（Webkit系: Chrome, Safari, iOS対応） ===== */
.table_content::-webkit-scrollbar {
	height: 8px; /* 横スクロールバーの太さ */
}
.table_content::-webkit-scrollbar-track {
	background: #EAEAEA; /* バーの背景 */
	border-radius: 4px;
}
.table_content::-webkit-scrollbar-thumb {
	background: #C1C1C1;
	border-radius: 4px;
}

/* ===== Firefox 対応 ===== */
.table_content {
	scrollbar-width: thin;
	scrollbar-color: #C1C1C1;
}

/* ----
.custom_scrollbar {
	height: 16px;
	background: #EAEAEA;
	border-radius: 6px;
	position: relative;
	margin-top: 8px;
	width: 100%;
	overflow: hidden;
}
.custom_thumb {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 60px;
	background: #C1C1C1;
	border-radius: 6px;
	transition: width .12s linear;
}
---- */

/* ===== スマホ用微調整 ===== */
@media screen and (max-width: 928px) {
	.table_content table{
		margin-bottom: 1.5rem;
	}
}

/* -- color -- */
.table_content table td span.red {
	color:var(--color-accent-2);
}


/* ============================================= scroll arrow */
.scroll_arrow {
	margin-top:30px;
	font-size:1.4rem;
}
.scroll_arrow span {
	position: relative;
	padding-right: 24px;
	padding-bottom: 8px;
	border-bottom: 1px solid #000;
}
.scroll_arrow span::after {
	content: "";
	position: absolute;
	width: 16px;              /* 少し長めに */
	height: 1px;             /* 横線に変更 */
	background: #000;
	bottom: 0;               /* 下辺に揃える */
	right: 0;                /* 右端に配置 */
	transform: rotate(45deg); /* 右下方向に傾ける */
	transform-origin: right bottom; /* 回転の基準を右下に */
}

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


/* ============================================= blue_line */
dl.blue_line dt {
	font-size:1.8rem;
	font-weight:700;
	display:flex;
}
dl.blue_line dt span {
	position:relative;
	padding-right:16px;
	padding-bottom:8px;
	border-bottom:1px solid #007DC8;
}
dl.blue_line dt span::after {
	content:"";
	width:1px;
	height:8px;
	background:#007DC8;
	position:absolute;
	bottom:0;
	right:0;
}
dl.blue_line dd {
	margin-top:10px;
	line-height:1.875;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	dl.blue_line dt {
		font-size:1.8rem;
		font-weight:700;
		display:flex;
	}
	dl.blue_line dt span {
		position:relative;
		padding-right:16px;
		padding-bottom:8px;
		border-bottom:1px solid #007DC8;
	}
	dl.blue_line dt span::after {
		content:"";
		width:1px;
		height:8px;
		background:#007DC8;
		position:absolute;
		bottom:0;
		right:0;
	}
	dl.blue_line dd {
		margin-top:10px;
		line-height:1.875;
	}
}

/* ============================================= ul.disc */
ul.disc {
	list-style-type:disc;
	list-style-position:inside;
	padding:0 30px;
}

ul.disc ul.disc {
	list-style-type: none;
	padding: 0 0 5px 30px;
}

ul.disc li {
	padding:0;
	text-indent:-2.3rem;
	line-height:2.5;
}

ul.disc ul.disc li::before {
	content: '・';
}


/* ============================================= dl */
dl.about_dl dt {
	font-size:1.8rem;
	position:relative;
	padding-left:2.9rem;
	color:#2F2F2F;
}
dl.about_dl 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;
}
dl.about_dl dd {
	margin-top:10px;
	line-height:1.875;
}


/* ============================================= notes */
p.notes {
	font-size:1.4rem;
}

/* ============================================= アコーディオン */
.accordion_button {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 340px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid #7a7a7a;
	border-radius: 7px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1;
	color: #7a7a7a;
}

.accordion_icon {
	position: relative;
	width: 20px;
	height: 20px;
}

.accordion_icon::before,
.accordion_icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 2px;
	background: #7a7a7a;
	transition: transform 0.2s;
}

.accordion_icon::after {
	transform: translate(-50%, -45%) rotate(90deg);
}

/* 開いているときの「×」 */
.accordion_button.is-open .accordion_icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.accordion_button.is-open .accordion_icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* パネル */
.accordion_content {
	display: none;
	margin-top: 40px;
}

.accordion_content.is-open {
  display: block;
}

/* ------------------------------------- for sp */
@media ( max-width : 767px ) {
	.accordion_button {
		width: 100%;
	}
}