.content.products{
	/* 製品一覧ページ */
	.productlist{
		.cont_wrap{
			overflow: hidden;
		}
		.filter{
			margin-bottom:8%;
			ul{
				display: flex;
				flex-wrap: wrap;
				gap:10px 20px ;
				margin-bottom:30px;
				/*　justify-content:center;　*/
				li{
					width: calc((100% - 40px) / 3);
					background-color: #898989;
					text-align: center;
					border-radius: 10px;
					padding: 10px 0;
					box-sizing:border-box;
					color:#fff;
					transition: 0.3s ease-out;
					cursor:pointer;
					@media screen and (max-width: 959px) {
						width: calc((100% - 20px) / 2);
						font-size: 3.6vw;
					}
					&.defaulta,
					&.defaultb{
						background-color: #fe5000;
					}
					&.on{
						background-color: #fe5000;
					}
				}
			}
		}
		.productsbox{
			display: flex;
			gap:0;
			flex-wrap: wrap;
			width: calc(100% + 30px);
			@media screen and (max-width: 959px) {
				gap:10px 0;
				width: calc(100% + 20px);
			}
			& > li{
				width: 0;
				max-height: 0;
				overflow: hidden;
				opacity: 0;
				background-color:#F6F6F6;
				border-radius:10px;
				box-sizing:border-box;
				transition: all 0.5s 0s ease;
				margin-right: 0;
				margin-bottom: 0;
				a{
					text-decoration: none;
					display: flex;
					flex-direction: column;
					padding:15px;
                    flex-grow: 1;
				}
				&.ona.onb,
				&.default1.default2{
					overflow: auto;
					display: flex;
					flex-direction: column;
					opacity: 1;
					max-height: 1000px;
					margin-bottom: 20px;
					margin-right: 15px;
					width: calc((100% - 60px) / 3);
					@media screen and (max-width: 959px) {
                        width: calc((100% - 32px) / 2);
                        margin-right: 10px;
					}
				}
				h3{
					margin: 0 auto 15px auto;
					text-decoration: none;
					width: 100%;
					box-sizing: border-box;
					display: block;
					padding: 0;
					border-bottom: 2px solid #fe5000;
					border-radius: 0;
					@media screen and (max-width: 959px) {
						font-size: 4.0vw;
					}
					&:after{
						content: none;
					}
				}
				.pimg{
					img{
						margin: 0 auto 15px auto;
						max-width: 100%;   /* 親要素の幅を超えない */
						max-height: 300px; /* 高さの上限 */
						height: auto;       /* 縦横比を維持 */
						width: auto;        /* 横幅も自動調整 */
						object-fit: contain; /* 枠内に収まるように表示（はみ出さない） */
						display: block;
						@media screen and (max-width:750px) {
							max-height: 40vw; /* 高さの上限 */
						}
					}
				}
				ul{
					display:flex;
					gap:6px 10px ;
	                 /* flex-grow: 1; */
					flex-wrap: wrap;
					@media screen and (max-width: 959px) {
	                    gap: 5px;
	                    flex-wrap: wrap;
	                    justify-content: end;
	                    /* align-items: revert-layer; */
	                    /* flex-grow: 1; */
	                    flex-direction: column;
					}
					li{	
						width: calc((100% - 10px) / 2);
						font-size: 0.9em;
						text-align: center;
						background-color:#898989 ;
						color: #fff;
						padding: 2px 6px;
						border-radius: 4px;
						align-self: flex-end;
						box-sizing: border-box;
						@media screen and (max-width: 959px) {
							width: 100%;
							font-size: 3.0vw;
						}
					}
				}
			}
		}
	}
	/* 製品個別ページ */
	.intro{
		display: flex;
		width:100%;
		gap:40px;
		margin-bottom:60px;
		@media screen and (max-width:960px) {
			flex-wrap: wrap;
	  	}
		.imgbox{
			width:calc((100% - 40px) / 2);
			box-sizing:border-box;
			margin-top:30px;
			@media screen and (max-width:960px) {
			width:100%;
	  		}
			.swiper{
				background-color: #f6f6f6;
				margin-bottom:15px;
				.swiper-slide{
					height: 500px;
					padding-bottom:2em;
					text-align:center;
					img{
						object-fit: contain;
                        width: inherit;
                        height: inherit;
					}
					p{
						margin: 0;
					}
					@media screen and (max-width:750px) {
					height: inherit;
					aspect-ratio: 1 / 1 ;
					}
				}
			}
			.thumbnail{
				box-sizing:border-box;
				overflow:hidden;
				.swiper-slide{
					height: 200px;
					background-color: #f6f6f6;
					border:6px solid #cbcbcb;
					box-sizing:border-box;
					@media screen and (max-width:750px) {
					height: inherit;
					aspect-ratio: 1 / 1 ;
					}
					&.swiper-slide-thumb-active{
						border:6px solid #fa5002;
					}
					img{
						object-fit: contain;
                        width: inherit;
                        height: -webkit-fill-available;
                        max-width: 100%;
                        max-height: 100%;
					}
				}
			}
			.swiper-button-next,
			.swiper-button-prev{
                bottom: calc(100px - 1rem);
                top: inherit;
				@media screen and (max-width:960px) {
					bottom: calc(15vw - 1rem);
			  	}
			}
			.swiper-button-prev{
				left: -10px;
				@media screen and (max-width:960px) {
					left: 0;
			  	}
			}
			.swiper-button-next{
				right: -10px;
				@media screen and (max-width:960px) {
				right: 0;
			  	}
			}
			.swiper-button-next:after,
			.swiper-button-prev:after {
				background-color: rgba(0, 0, 0, 0.6);
				color: #fff;
				font-size: 20px;
				border-radius: 100px;
				padding: 10px 15px;
				box-sizing: border-box;
			}
			.swiper-slide{
				position:relative;
				img{
					width: 100%;
					height: auto;
					object-fit: cover;
				}
			}
		}
		.infobox{
			width:calc((100% - 40px) / 2);
			display: flex;
			flex-direction: column;
			p{
				flex:1;
			}
			a.inquiry{
				display: block;
				align-self: flex-end;
				background-color: #fa5002;
				color: #fff;
				border-radius: 4px;
				text-decoration: none;
				font-size: 1.4rem;
				padding: 15px 20px;
				background-image: url(../img/products_mail.svg);
				background-repeat: no-repeat;
                background-position: left 10% center;
                background-size: auto 75%;
                padding-left: 20%;
				@media screen and (max-width:960px) {
				width:80%;
				box-sizing: border-box;
				align-self: center;
				text-align: center;
				padding-left: 27.5%;
		  		}
			}
			@media screen and (max-width:960px) {
			width:100%;
	  		}
		}
		.detail_nav{
			@media screen and (max-width:960px) {
			width:100%;
			li{
				width: 100%;
			}
	  		}
		}
	}
	.detail_nav{
		background-color: #f6f6f6;
		padding: 15px 0;
		ul{
			display: flex;
			gap:0 10px;
			@media screen and (max-width:960px) {
			flex-wrap: wrap;
			gap:10px 12px;
		  	}
			li{
				flex:1;
				@media screen and (max-width:960px) {
				width:calc((100% - 12px ) / 2 );
				flex:inherit;
		  		}
				a{
					padding: 10px;
					color: #fff;
					display: block;
					border-radius: 4px;
					background: #fa5002;
					text-decoration: none;
					position:relative;
					&:after{
						position: absolute;
						content: "▼";
						display: block;
						right: 10px;
						background-color: #fff;
						color: #fa5002;
						border-radius: 100px;
						aspect-ratio: 1 / 1;
						top:10px;
						padding: 0 5px;
					}
				}
			}
		}
	}
	.detail{
		& > div{
			margin-bottom: 0;
			&:has(.active){
			margin-bottom: 60px;
			}
		}
		h3{
			cursor: pointer;
			position:relative;
			transition: all 0.5s 0s ease;
			margin-bottom:0;
			&:before{
				content: "＞";
				position: absolute;
				right: 15px;
				display: block;
				transform: rotate(90deg);
				transition: all 0.5s 0s ease;
			}
			&:hover{
				background: #fa5002;
				color: #fff;
				transition: all 0.5s 0s ease;
				&:after{
					background-color:#fff;
					transition: all 0.5s 0s ease;
				}
			}
		}
		.detailbox{
			max-height: 0;
			overflow: hidden;
			transition: all 0.0s 0s ease;
			&.movies{
				ul{
					display: flex;
					flex-wrap: wrap;
					gap:20px;
					padding-left:20px;
					box-sizing:border-box;
					@media screen and (max-width:960px) {
					padding-left:0;
					}
					li{
						width: calc((100% - 20px) / 2);
						@media screen and (max-width:960px) {
						width:100%;
				  		}
						h4{
							margin-left: 0;
							margin-right: 0;
						}
					}
				}
			}
			&.image_links{
				ul{
					display: flex;
					flex-wrap: wrap;
					gap:20px;
					padding-left:20px;
					padding-top: 30px;
					box-sizing:border-box;
					@media screen and (max-width:960px) {
						padding-left:0;
				  	}
					li{
						width: calc((100% - 40px) / 3);
						background-color: #f6f6f6;
						padding: 15px;
						box-sizing: border-box;
						display: flex;
						@media screen and (max-width:960px) {
						width: calc((100% - 20px) / 2);
				  		}
						a{
							text-decoration: none;
							display:flex;
							width:100%;
							flex-direction:column;
							justify-content: space-between;
							flex-grow: 1;
							img{
								display: block;
								margin-left: auto;
								margin-right: auto;
								margin-bottom: 10px;
								max-width: 100%;   /* 親要素の幅を超えない */
								max-height: 200px; /* 高さの上限 */
								height: auto;       /* 縦横比を維持 */
								width: auto;        /* 横幅も自動調整 */
								object-fit: contain; /* 枠内に収まるように表示（はみ出さない） */
							}
							p{
								background-color: #fa5002;
								color: #fff;
								text-align: center;
								display: block;
								width: 100%;
								margin-top: 0;
								margin-left: 0;
								margin-right: 0;
								margin-bottom: 0;
								border-radius: 4px;
							}
						}
					}
				}
			}
			&.image_texts{
				@media screen and (max-width:960px) {
				display: flex;
				flex-wrap: wrap;
				gap:20px;
				}
				.image_text{
					margin-left:20px;
					margin-bottom:40px;
					@media screen and (max-width:960px) {
						margin-left:0;
					}
					h4{
						margin-left:0;
						margin-right:0;
						& + div{
							display: flex;
							width: 100%;
							align-items: flex-start;
							@media screen and (max-width:960px) {
							flex-wrap: wrap;
						  	}
							img{
								width: calc(30% - 30px);
								height: auto;
								margin-top: 20px;
								@media screen and (max-width:960px) {
								width: 100%;
						  		}
							}
							.ittxt{
								width: 70%;
								@media screen and (max-width:960px) {
								width: 100%;
						  		}
							}
						}
					}
				}
			}
		}
		.active{
			background: #fa5002;
			color: #fff;
			&:after{
				background-color:#fff;
			}
			&:before{
				transform: rotate(-90deg);
			}
			& + .detailbox{
				max-height: 1500px;
			}
		}
	}
}
.content.productcat {
	.detail_nav {
		background-color: #f6f6f6;
		padding: 15px 20px;
		width: calc((100% - 40px) / 2);
		ul{
			display: block;
			li{
				margin-bottom: 10px;
			}
		}
	}
}