/* product
---------------------------*/
.product__ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	.cat-item {
		a {
			font-size: 16px;
			display: inline-block;
			border-radius: 4px;
			background-color: var(--gray-300);
			padding: 5px 10px;
			border: 1px solid var(--gray-100);
			&:hover {
				color: var(--green);
				background-color: var(--green-light);
				border-color: var(--green);
			}
		}
		&.active {
			a {
				color: var(--green);
				background-color: var(--green-light);
				border-color: var(--green);
			}
		}
	}
	@media (max-width: 767px) {
		flex-direction: row;
		flex-wrap: wrap;
		.cat-item {
			flex: 0 1 calc(50% - 8px);
			a {
				font-size: 14px;
				width: 100%;
				padding: 10px;
			}
		}
	}
}

/* product
---------------------------*/
.product__arrow{
	transition: .3s;
}
.product__arrow--hover {
	display: none;
	transition: .3s;
}
.product__img {
	transition: .3s;
}

.product__link {
	&:hover {
		.product__photo {
			background: var(--green);
			border: 1px solid var(--green);
			border-radius: 28px;
		}
		.product__img {
			filter: brightness(110%);
		}
		.product__arrow{
			display: none;
		}
		.product__arrow--hover {
			display: block;
		}
	}
}

.product__photo {
	border: 1px solid var(--black);
	border-radius: 4px;
	padding: 4px 6.5px;
	transition: .3s;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
}

/* product-download
---------------------------*/
.product-download {
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border: 1px solid var(--gray-100);
		border-radius: 4px;
		padding: 15px 24px;
	 }
 }

 .product-download__txt {
	 font-size: 14px;
 }

 .product-download__photo {
	 transition: .3s;
 }

 .product-download {
	a {
		&:hover {
			background: var(--green-light);
			.product-download__photo {
				transform: translateY(3px);
			}
		}
	}
 }

 /* product-contact
---------------------------*/
.product-contact {
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10px;
		border: 1px solid var(--gray-100);
		border-radius: 4px;
		padding: 15px 24px;
	 }
 }

 .product-contact__txt {
	 font-size: 14px;
 }

 .product-contact__photo {
	 transition: .3s;
 }

 .product-contact {
	a {
		&:hover {
			background: var(--green-light);

			.product-contact__photo {
				transform: translateX(6px);
			}
		}
	}
 }

  /* product YouTubeサイズ調整
---------------------------*/

 .wp-block-embed iframe {
	width: 100%;
	height: 100%;
 }
 .wp-block-embed-youtube .wp-block-embed__wrapper {
	width: 100%;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	max-width: 680px;
	margin: auto;
}

 /* product-pdf
---------------------------*/
.product-pdf {
		display: inline-block;
		a {
		 padding-bottom: 4px;
		 position: relative;
		 display: flex;
		 align-items: center;
		 color: var(--green);
		 font-size: .875rem;
		 &:before {
			 content: '';
			 display: block;
			 position: absolute;
			 left: 0;
			 bottom: 0;
			 width: 100%;
			 height: 1px;
			 background: var(--gray-100);
			 transition: .3s;
		 }
			&:hover {
				color: var(--green);
				&::before {
					background: var(--green);
					width: 100%;
				}
				.product-pdf__photo {
					transform: translateY(3px);
				}
			}
		}
		.product-pdf__photo {
			transition: .3s;
		}
	}

	.product__img {
		position: relative;
	}
	.product__tag {
		background: var(--green);
		color: #fff;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 10px;
		position: absolute;
		top: 0;
		left: 0;
		transform: translateY(-50%);
		z-index: var(--z-index-num);
	}
	.product__sp--box {
		display: none;
	}
	@media (max-width: 639px) {
		.product__tag {
			padding: 2px 4px;
			font-size: 12px;
			top: 0;
			left: 0;
		}

		.product__img {
			width: 92px;
		}
		.product__ttlbox {
			width: calc(100% - 92px);
		}
		.product__pc--box {
			display: none;
		}
		.product__sp--box {
			display: flex;
			gap: 10px;
		}
		.product__photo {
			margin-left: 8px;
		}
}

/* 詳細ページ */
.product__ttl {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}