@charset "UTF-8";

/**********

products/css/products.css

Date: 2025.07.18
Ver: 0.10
Auther: Minoru Sadaoka (CREATIVE OFFICE COTOxCOTO - OSAKA STUDIO)
Copyrights: 2025- CREATIVE OFFICE COTOxCOTO.

**********/

/* ページ名 background */
	/* track - SUGINO75 */
	.titleTrackSUGINO75 { background: no-repeat center url(../track/SUGINO75/images/header-bg.jpg); }
	.textLink { color: var(--corporate-color); }


	.ico-file {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	.ico-BoltNut {
		width: 60px;
		height: 50px;
	}

	.smallPartsTool {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.productsExInfo div {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--lineBox-color);
		color: var(--lineBox-color);
		fill: var(--lineBox-color);
	}

	a.productsExInfo-Info {
/*		background: #ffffee!important; */
		background: #fefecf!important;
	}

/* ここから Youtube Modal部 */

/*
.youtube-link {
	display: inline-block;
	margin: 10px;
	padding: 12px 20px;
	background: #222;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
}
*/
.modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.85);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.modal-content {
	width: 90%;
	max-width: 900px;
	aspect-ratio: 16/9;
	position: relative;
}

.youtube-iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.close {
	position: absolute;
	right: 0;
	top: -45px;
	color: white;
	font-size: 40px;
	cursor: pointer;
}
/* ここまで Youtube Modal部 */


/* 画面サイズ 640px 未満 */
@media (width < 640px) {

	/* Swiper */
	.slider-wrapper {
		max-width: 640px;
		margin: 0 auto;
	}
	.main-slider {
		margin-bottom: 24px;
		background: #000;
		border: 1px solid var(--lineBox-color);
	}
	.main-slider .swiper-slide,
	.main-slider .swiper-slide img,
	.main-slider .swiper-slide .video-container,
	.main-slider .swiper-slide iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.main-slider .video-container {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 56.25%; /* 16:9 */
	}
	.main-slider .video-container iframe {
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
	}
	.thumb-slider {
		margin-bottom: 48px;
		height: 92px;
	}
	.thumb-slider .swiper-slide {
		width: 120px !important;
		height: 90px;
		opacity: 0.5;
		cursor: pointer;
	}
	.thumb-slider .swiper-slide-thumb-active {
		opacity: 1;
		border: 1px solid var(--corporate-color);
	}
	.thumb-slider img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.swiper-caption {
		position: absolute;
		bottom: 10px;
		left: 10px;
		padding: 6px 12px;
		background: var(--corporate-color);
		color: white;
		font-size: 12px;
		font-weight: bold;
		font-style: italic;
		border-radius: 12px;
	}

	/* ページ名 */
	#areaPageName {
		width: 100%;
		padding: var(--section-bottom) 0;
	}

	#areaPageName p {
		margin-bottom: 8px;
		font-size: 24px;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	}

	#areaPageName h2 {
		padding-left: 0;
		padding-bottom: 10px;
		width: 100%;
		font-size: 40px;
		font-weight: bold;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
		border-left: none;
		border-bottom: 2px solid white;
	}


	/* シリーズ名 */
	.productsSeriesName {
		margin-bottom: var(--section-bottom);
		padding-bottom: 12px;
		width: 100%;
		font-size: 28px;
		font-weight: bold;
		color: var(--products-series-name-color);
		border-bottom: 1px solid var(--products-series-name-color);
	}


	/********** 製品情報 **********/

	.productsImageM {
		width: 100%;
		height: auto;
		border: 1px solid var(--lineBox-color);
	}

	.areaProductsImageThmb {
		margin-bottom: 24px;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: 100%;
		height: auto;
	}

	.areaProductsImageThmb a {
		width: 25%;
		height: auto;
		border: 1px solid var(--lineBox-color);
	}
		
	.areaProductsName {
		margin-bottom: 24px;
		width: 100%;
		font-size: 32px;
		font-weight: bold;
		color: var(--corporate-color);
	}

	/* 左コンテンツ */
	.areaProductsContentsLeft {
		margin: 0;
		width: 100%;
	}


	.productsExInfo {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsExInfo h4, .productsExTable h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		float: left; width: 100%;
		font-size: 16px;
		border-bottom: 1px solid var(--corporate-color);
	}

	.productsExInfo a {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--corporate-color);
		font-size: 12px;
		color: var(--corporate-color);
		fill: var(--corporate-color);
	}

	.ico-file {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	.smallPartsTool {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.productsExInfo a:hover {
		background: var(--corporate-color);
		text-decoration: none;
		color: white;
		fill: white
	}
	.productsExInfo a:hover.ico-file {
		color: white;
		fill: white
	}

	.productsExInfo a div {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.productsExInfo p {
		font-size: 12px;
		padding-bottom: 1em;
		line-height: 1.75em;
	}















	.productsExInfo02 {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsExInfo02 h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		float: left; width: 100%;
		font-size: 16px;
		border-bottom: 1px solid var(--corporate-color);
	}

	.productsExInfo02 a {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--corporate-color);
		font-size: 12px;
		color: var(--corporate-color);
		fill: var(--corporate-color);
	}

	.productsExInfo02 a:hover {
		background: var(--corporate-color);
		text-decoration: none;
		color: white;
		fill: white
	}
	.productsExInfo02 a:hover.ico-file {
		color: white;
		fill: white
	}

	.productsExInfo02 a div {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.productsExInfo02 p {
		font-size: 12px;
		padding-bottom: 1em;
		line-height: 1.75em;
	}

	p.logo-change {
		display: flex;
		margin-bottom: 0!important;
		padding: 18px 12px;
		width: 100%;
		align-items: center;
		background: white;
		border: 1px solid var(--lineBox-color);
		color: var(--corporate-color);
		fill: var(--corporate-color);
		font-size: 12px!important;
	}

	.logo-change-icon {
		width: 44px;
	}

	.logo-change-msg {
		flex: 1;
		line-height: 1.5em;
	}

	.logo-change-logo {
		padding: 18px 25px!important;
		border: 1px solid var(--corporate-color)!important;
		background: var(--corporate-color)!important;
	}
	.logo-change-logo svg {
		padding: 0 100px;
		width: 100%;
		height:auto;
	}





	/* 右コンテンツ */
	.areaProductsIcon {
		margin-bottom: 20px;
		padding: 6px;
		float: left;
		width: 100%;
	}

	.areaProductsIcon img {
		width: 60px;
		height: auto;
		height: auto;
		margin-right: 12px;
	}

	.specificationTable {
		margin-bottom: 48px;
		width: 100%;
		font-size: 12px;
	}


	.specificationTable th, td {
		padding: 10px 5px;
		border-bottom: 1px solid var(--lineBox-color);
		line-height: 1.75em;

	}

	.smallPartsTool {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.specificationTable th { 
			text-align: left;
			border-right: 1px solid var(--lineBox-color);
			border-bottom: 1px solid var(--lineBox-color);
			/* background: #efefef; */
		}
	.productsSpecificationTable td {
			text-align: left;
	}

	.productsSpecificationTable li {
		padding-bottom: 0.5em;
		text-indent: -1em;
		padding-left: 1em;
	}
	.productsSpecificationTable li::marker {
		margin: 0; 
	}

	.specification li {
		margin: 0;
		padding-left: 1em;
		padding-bottom: 0.5em;
		font-size: 12px;
		text-indent: -1.3em;
		line-height: 1.5em;
	}
	.specification li::marker {
			margin: 0 8px 0 0; 
			content: "※ ";
	}

	/* 下コンテンツ */


	.relatedProducts {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
	}
	.relatedProducts h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		width: 100%;
		border-bottom: 1px solid var(--corporate-color);
		font-size: 16px;
	}

	.relatedProducts a {
		margin-bottom: 20px;
		padding: 12px;
		display: flex;
		align-items: center;
		width: 100% ;
		border: 1px solid var(--lineBox-color);
	}


	.relatedProducts img {
		width: 40%;
		height: auto;
		margin-right: 12px;
		border: 1px solid var(--lineBox-color);
		border-radius: 12px;
		font-size: 14px;
	}



}












/* 画面サイズ 640px 以上 */
@media (640px <= width) {

		/* Swiper */
	.slider-wrapper {
		max-width: 640px;
		margin: 0 auto;
	}
	.main-slider {
		margin-bottom: 24px;
		background: #000;
		border: 1px solid var(--lineBox-color);
	}
	.main-slider .swiper-slide,
	.main-slider .swiper-slide img,
	.main-slider .swiper-slide .video-container,
	.main-slider .swiper-slide iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.main-slider .video-container {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 56.25%; /* 16:9 */
	}
	.main-slider .video-container iframe {
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
	}
	.thumb-slider {
		margin-bottom: 48px;
		height: 92px;
	}
	.thumb-slider .swiper-slide {
		width: 128px !important;
		height: 72px;
		opacity: 0.5;
		cursor: pointer;
	}
	.thumb-slider .swiper-slide-thumb-active {
		opacity: 1;
		border: 1px solid var(--corporate-color);
	}
	.thumb-slider img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.swiper-caption {
		position: absolute;
		bottom: 10px;
		left: 10px;
		padding: 6px 12px;
		background: var(--corporate-color);
		color: white;
		font-size: 12px;
		font-weight: bold;
		font-style: italic;
		border-radius: 14px;
	}


	/* ページ名 */
	#areaPageName {
		width: 100%;
		padding: var(--section-bottom) 24px;
	}

	#areaPageName p {
		margin-bottom: 8px;
		font-size: 18px;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	}

	#areaPageName h2 {
		padding-left: 0;
		padding-bottom: 20px;
		width: 100%;
		font-size: 50px;
		font-weight: bold;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
		border-left: none;
		border-bottom: 2px solid white;
	}


	/********** 製品情報 **********/

	.areaProducts {
		margin-bottom: var(--section-bottom);
	}

	h3.areaProductsName {
		margin-bottom: 48px;
		width: 100%;
		font-size: 32px;
		font-weight: 800;
		color: var(--corporate-color);
	}



	.areaProductsIcon {
		margin-bottom: 20px;
		padding: 6px;
		width: 100%;
	}

	.areaProductsIcon img {
		margin-right: 12px;
	}


	.areaProducts {
		margin-bottom: var(--section-bottom);
		width: 100%;
	}

	/* 左コンテンツ */

	.productsExInfo {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsExInfo h4, .productsExTable h4, .relatedProducts h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		float: left; width: 100%;
		font-size: 18px;
		border-bottom: 1px solid var(--corporate-color);
	}

	.productsExInfo a {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--corporate-color);
		font-size: 14px;
		color: var(--corporate-color);
		fill: var(--corporate-color);
	}

	.ico-file {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	.productsExInfo a:hover {
		background: var(--corporate-color);
		text-decoration: none;
		color: white;
		fill: white
	}
	.productsExInfo a:hover.ico-file {
		color: white;
		fill: white
	}

	.productsExInfo a div {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.productsExInfo p {
		font-size: 14px;
		padding-bottom: 1em;
		line-height: 1.75em;
	}


	p.logo-change {
		display: flex;
		margin-bottom: 0!important;
		padding: 18px 12px;
		width: 100%;
		align-items: center;
		background: white;
		border: 1px solid var(--lineBox-color);
		color: var(--corporate-color);
		fill: var(--corporate-color);
		font-size: 14px!important;
	}

	.logo-change-icon {
		width: 44px;
	}

	.logo-change-msg {
		flex: 1;
		line-height: 1.5em;
	}

	.logo-change-logo {
		padding: 18px 25px!important;
		border: 1px solid var(--corporate-color)!important;
		background: var(--corporate-color)!important;
	}
	.logo-change-logo svg {
		padding: 0 100px;
		width: 100%;
		height:auto;
	}




	/* 右コンテンツ */
	.areaProductsIcon img {
		width: 80px;
		height: auto;
		height: auto;
		margin-right: 12px;
	}

	.specificationTable {
		margin-bottom: 48px;
		width: 100%;
		font-size: 16px;
	}

	.specificationTable th, td {
		padding: 14px 10px;
		border-bottom: 1px solid var(--lineBox-color);
		font-size: 14px;
		line-height: 1.75em;

	}
	.specificationTable th { 
		text-align: left;
		border-right: 1px solid var(--lineBox-color);
	}
	.specificationTable td {
		text-align: left;
	}

	.specificationTable li {
		margin: 0 0 0 1.5em;
	}

	.specificationUL {
		list-style-position: outside;
		font-size: 14px;
	}
	.specificationUL li::marker {
		margin: 0;
		padding: 0; 
	}

	.specification li {
		margin: 0;
		padding: 0 0 0.5em 0;
		text-indent: -1.3em;
		padding-left: 1em;
	}
	.specification li::marker {
		margin: 0 8px 0 0; 
		content: "※ ";
	}

	.relatedProducts {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
		width: 100%;
	}


	.relatedProducts a {
		margin-bottom: 20px;
		padding: 12px;
		display: flex;
		align-items: center;
		width: calc( 100% / 2 - 10px );
		border: 1px solid var(--lineBox-color);
		font-size: 14px;
	}

	.relatedProducts a:hover {
		background: var(--corporate-color);
		color: white;
		fill: white;
		text-decoration-line: none;
	}
	.relatedProducts img {
		margin-right: 12px;
		align-items: center;
		width: 160px;
		height: 90px;
		border: 1px solid var(--lineBox-color);
	}










}










/* 画面サイズ 1024px 以上 */
@media (1024px <= width) {
	/* Swiper */
	.slider-wrapper {
		max-width: 1000px;
		margin: 0 auto;
	}
	.main-slider {
		margin-bottom: 24px;
		background: #000;
		border: 1px solid var(--lineBox-color);
	}
	.main-slider .swiper-slide,
	.main-slider .swiper-slide img,
	.main-slider .swiper-slide .video-container,
	.main-slider .swiper-slide iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.main-slider .video-container {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 56.25%; /* 16:9 */
	}
	.main-slider .video-container iframe {
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
	}
	.thumb-slider {
		margin-bottom: 48px;
		height: 92px;
	}
	.thumb-slider .swiper-slide {
		width: 120px !important;
		height: 90px;
		opacity: 0.5;
		cursor: pointer;
	}
	.thumb-slider .swiper-slide-thumb-active {
		opacity: 1;
		border: 1px solid var(--corporate-color);
	}
	.thumb-slider img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.swiper-caption {
		position: absolute;
		bottom: 25px;
		left: 30px;
		padding: 3px 12px;
		background: var(--corporate-color);
		color: white;
		font-size: 24px;
		font-weight: bold;
		font-style: italic;
		border-radius: 12px;
	}



	/* ページ名 background */
	.titleRoadPulley { background: no-repeat center url(../../images/area_image02.jpg); }

	/* ページ名 */
	#areaPageName {
		width: 100%;
		padding: var(--section-bottom) 0;
	}

	#areaPageName p {
		margin-bottom: 8px;
		font-size: 24px;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	}

	#areaPageName h2 {
		padding-left: 0;
		padding-bottom: 20px;
		width: 100%;
		font-size: 72px;
		font-weight: bold;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
		border-left: none;
		border-bottom: 2px solid white;
	}


	/* シリーズ名 */
	.productsSeriesName {
		margin-bottom: var(--section-bottom);
		padding-bottom: 12px;
		font-size: 56px;
		font-weight: bold;
		color: var(--products-series-name-color);
		border-bottom: 1px solid var(--products-series-name-color);
	}

	/********** 製品情報 **********/

	.areaProducts {
		margin-bottom: var(--section-bottom);
	}

	h3.areaProductsName {
		margin-bottom: 48px;
		width: 100%;
		font-size: 45px;
		font-weight: 800;
		color: var(--corporate-color);
	}


	.areaProductsIcon {
		margin-bottom: 20px;
		padding: 6px;
		width: 100%;
	}

	.areaProductsIcon img {
		margin-right: 12px;
	}

	.areaProductsContents {
		display: flex;
	}

	.areaProducts {
		margin-bottom: var(--section-bottom);
		width: 100%;
	}

	
	.areaProductsImage {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsImageL {
		width: 100%;
		height: auto;
		border: 1px solid var(--lineBox-color);
	}

	.areaProductsImageThmb {
		margin-bottom: 48px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 5px;
		width: 100%;
	}

	.areaProductsImageThmb img {
		width: 160px;
		height: 90px;
		border: 1px solid var(--lineBox-color);
	}
	/* 空白用 */
	.areaProductsImageThmb div {
		display: none;
		width: 160px;
		height: 90px;
		border: none;
	}


	/* 左コンテンツ */
	.areaProductsContentsLeft {
		margin-right: 60px;
		flex: 1;
	}

	.areaProductsIcon img {
		width: 80px;
		height: auto;
	}

	.productsExInfo {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsExInfo h4, .relatedProducts h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		float: left;
		width: 100%;
		font-size: 24px;
		border-bottom: 1px solid var(--corporate-color);
	}

	.productsExInfo a {
		float: left;
		width: 100%;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--corporate-color);
		color: var(--corporate-color);
		fill: var(--corporate-color);
	}

	.productsExInfo a:hover {
		background: var(--corporate-color);
		text-decoration: none;
		color: white;
		fill: white
	}
	.productsExInfo a:hover.ico-file {
		color: white;
		fill: white
	}

	.ico-file {
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}

	a:hover.productsExInfo-Info {
		background: var(--corporate-color)!important;
		text-decoration: none;
		color: white;
		fill: white
	}






	/* 右コンテンツ */

	.areaProductsIcon img {
		width: 80px;
		height: auto;
		height: auto;
		margin-right: 12px;
	}

	.areaProductsContentsRight {
		width: 400px;
	}

	.specificationTable {
		margin-bottom: 48px;
		width: 100%;
		font-size: 16px;
	}

	.specificationTable th, td {
		padding: 14px 10px;
		border-bottom: 1px solid var(--lineBox-color);
		line-height: 1.75em;

	}
	.specificationTable th { 
			text-align: left;
			border-right: 1px solid var(--lineBox-color);
			/* background: #efefef; */
		}
	.specificationTable td {
			text-align: left;
			/* background: #eeeeee; */
		}

	.specificationTable li {
		margin: 0 0 0 1.5em;
	}

	.specificationUL {
		list-style-position: outside;
	}
	.specificationUL li::marker {
		margin: 0;
		padding: 0; 
	}

	.specification li {
		margin: 0;
		padding: 0 0 0.5em 0;
		text-indent: -1.3em;
		padding-left: 1em;
	}
	.specification li::marker {
		margin: 0 8px 0 0; 
		content: "※ ";
	}

	.relatedProducts {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
		width: 100%;
	}

	.relatedProducts h5 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		width: 100%;
		border-bottom: 1px solid var(--corporate-color);
		font-size: 24px;
	}

	.relatedProducts a {
		margin-bottom: 20px;
		padding: 12px;
		display: flex;
		align-items: center;
		width: calc( 100% / 3 - 10px );
		border: 1px solid var(--lineBox-color);
	}

	.relatedProducts a:hover {
		background: var(--corporate-color);
		color: white;
		fill: white;
		text-decoration-line: none;
	}
	.relatedProducts img {
		margin-right: 12px;
		align-items: center;
		width: 160px;
		height: 90px;
		border: 1px solid var(--lineBox-color);
	}










}










/* 画面サイズ 1024px 以上 */
@media (1024px <= width) {

	/* Swiper */
	.slider-wrapper {
		max-width: 1000px;
		margin: 0 auto;
	}
	.main-slider {
		margin-bottom: 24px;
		background: #000;
		border: 1px solid var(--lineBox-color);
	}
	.main-slider .swiper-slide,
	.main-slider .swiper-slide img,
	.main-slider .swiper-slide .video-container,
	.main-slider .swiper-slide iframe {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.main-slider .video-container {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 56.25%; /* 16:9 */
	}
	.main-slider .video-container iframe {
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
	}
	.thumb-slider {
		margin-bottom: 48px;
		height: 92px;
	}
	.thumb-slider .swiper-slide {
		width: 160px !important;
		height: 90px;
		opacity: 0.5;
		cursor: pointer;
	}
	.thumb-slider .swiper-slide-thumb-active {
		opacity: 1;
		border: 1px solid var(--corporate-color);
	}
	.thumb-slider img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}



	/* ページ名 background */
	.titleRoadPulley { background: no-repeat center url(../../images/area_image02.jpg); }

	/* ページ名 */
	#areaPageName {
		width: 100%;
		padding: var(--section-bottom) 0;
	}

	#areaPageName p {
		margin-bottom: 8px;
		font-size: 24px;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
	}

	#areaPageName h2 {
		padding-left: 0;
		padding-bottom: 20px;
		width: 100%;
		font-size: 72px;
		font-weight: bold;
		color: white;
		text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
		border-left: none;
		border-bottom: 2px solid white;
	}


	/* シリーズ名 */
	.productsSeriesName {
		margin-bottom: var(--section-bottom);
		padding-bottom: 12px;
		font-size: 56px;
		font-weight: bold;
		color: var(--products-series-name-color);
		border-bottom: 1px solid var(--products-series-name-color);
	}

	/********** 製品情報 **********/

	.areaProducts {
		margin-bottom: var(--section-bottom);
	}

	h3.areaProductsName {
		margin-bottom: 48px;
		width: 100%;
		font-size: 45px;
		font-weight: 800;
		color: var(--corporate-color);
	}


	.areaProductsIcon {
		margin-bottom: 20px;
		padding: 6px;
		width: 100%;
	}

	.areaProductsIcon img {
		margin-right: 12px;
	}

	.areaProductsContents {
		display: flex;
	}

	.areaProducts {
		margin-bottom: var(--section-bottom);
		width: 100%;
	}

	
	.areaProductsImage {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsImageL {
		width: 100%;
		height: auto;
		border: 1px solid var(--lineBox-color);
	}

	.areaProductsImageThmb {
		margin-bottom: 48px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 5px;
		width: 100%;
	}

	.areaProductsImageThmb img {
		width: 160px;
		height: 90px;
		border: 1px solid var(--lineBox-color);
	}
	/* 空白用 */
	.areaProductsImageThmb div {
		display: none;
		width: 160px;
		height: 90px;
		border: none;
	}


	/* 左コンテンツ */
	.areaProductsContentsLeft {
		margin-right: 60px;
		flex: 1;
	}

	.productsExInfo {
		margin-bottom: 20px;
		float: left;
		width: 100%;
	}

	.productsExTable h4, .productsExInfo h4, .relatedProducts h4 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		float: left; width: 100%;
		font-size: 24px;
		border-bottom: 1px solid var(--corporate-color);
	}

	.productsExInfo a, p.logo-change{
		display: flex;
		align-items: center;
		margin-bottom: 16px;
		padding: 18px 12px;
		background: white;
		border: 1px solid var(--corporate-color);
		color: var(--corporate-color);
		fill: var(--corporate-color);
	}

	.productsExInfo a:hover {
		background: var(--corporate-color);
		text-decoration: none;
		color: white;
		fill: white
	}
	.productsExInfo a:hover.ico-file {
		color: white;
		fill: white
	}

	.productsExInfo a div {
		font-size: 14px;
		margin-bottom: 4px;
	}

	.productsExInfo p {
		font-size: 16px;
		padding-bottom: 1em;
		line-height: 1.75em;
	}

	p.logo-change {
		display: flex;
		margin-bottom: 0!important;
		padding: 18px 12px;
		width: 100%;
		align-items: center;
		background: white;
		border: 1px solid var(--lineBox-color);
		color: var(--corporate-color);
		fill: var(--corporate-color);
		font-size: 14px!important;
	}

	.logo-change-icon {
		width: 44px;
	}

	.logo-change-msg {
		flex: 1;
		line-height: 1.5em;
	}

	.logo-change-logo {
		padding: 18px 25px!important;
		border: 1px solid var(--corporate-color)!important;
		background: var(--corporate-color)!important;
	}
	.logo-change-logo svg {
		padding: 0 50px;
		width: 100%;
		height:auto;
	}



	/* 右コンテンツ */
	.areaProductsContentsRight {
		width: 400px;
	}

	.specificationTable {
		margin-bottom: 48px;
		width: 100%;
		font-size: 16px;
	}

	.specificationTable th, td {
		padding: 14px 10px;
		border-bottom: 1px solid var(--lineBox-color);
		line-height: 1.75em;

	}
	.specificationTable th { 
			text-align: left;
			border-right: 1px solid var(--lineBox-color);
			/* background: #efefef; */
		}
	.specificationTable td {
			text-align: left;
			/* background: #eeeeee; */
		}

	.smallPartsTool {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.specificationTable li {
		margin: 0 0 0 1.5em;
	}

	.specificationUL {
		list-style-position: outside;
	}
	.specificationUL li::marker {
		margin: 0;
		padding: 0; 
	}

	.specification li {
		margin: 0;
		padding: 0 0 0.5em 0;
		text-indent: -1.3em;
		padding-left: 1em;
	}
	.specification li::marker {
		margin: 0 8px 0 0; 
		content: "※ ";
	}

	.relatedProducts {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
		width: 100%;
	}

	.relatedProducts h5 {
		margin-bottom: 20px;
		padding-bottom: 6px;
		width: 100%;
		border-bottom: 1px solid var(--corporate-color);
		font-size: 24px;
	}

	.relatedProducts a {
		margin-bottom: 20px;
		padding: 12px;
		display: flex;
		align-items: center;
		width: calc( 100% / 3 - 10px );
		border: 1px solid var(--lineBox-color);
	}

	.relatedProducts a:hover {
		background: var(--corporate-color);
		color: white;
		fill: white;
		text-decoration-line: none;
	}
	.relatedProducts img {
		margin-right: 12px;
		align-items: center;
		width: 160px;
		height: 90px;
		border: 1px solid var(--lineBox-color);
	}








}