@charset "utf-8";
img[src*="icon_sound"][src$="svg"] {
	display: inline-block;
	height: 1em;
	width: auto;
}

.heading-product {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.list-category, .list-product {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			gap: 16px;
}
:is(.list-category, .list-product)>* {
	border-radius: 4px;
	width: calc(50% - 8px);
	text-align: center;
}
:is(.list-category, .list-product)>* a {
	display: block;
	padding: 16px;
}
:is(.list-category, .list-product) img {
	margin: 0 auto 8px;
}
.list-category>* {
	background: #eee;
}
.list-category img {
	width: 64px;
	height: 64px;
}
.list-product img {
	aspect-ratio: 8 / 5;
	background: #fff;
	object-fit: scale-down;
}

.list-faq dt, .list-heading {
	cursor: pointer;
	position: relative;
	transition: .3s;
}
.list-faq dt:after, .list-heading:after {
	background: #333;
	content: "";
	-webkit-clip-path: polygon(0 45%, 45% 45%, 45% 0, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%);
	        clip-path: polygon(0 45%, 45% 45%, 45% 0, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%);
	display: inline-block;
	position: absolute;
		top: calc(50% - 8px);
		right: 16px;
	-webkit-transition: .3s;
		 -o-transition: .3s;
			transition: .3s;
	width: 16px;
	height: 16px;
}
.list-faq dt.on:after, .list-heading.on:after {
	-webkit-clip-path: polygon(0 45%, 45% 45%, 45% 45%, 55% 45%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 55%, 45% 55%, 45% 55%, 0 55%);
	        clip-path: polygon(0 45%, 45% 45%, 45% 45%, 55% 45%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 55%, 45% 55%, 45% 55%, 0 55%);
}
.list-faq dd {
	padding: 16px 0 16px 64px;
}
.list-faq dt {
	border-bottom: 1px solid #ddd;
	font-weight: bold;
	padding: 16px 64px;
}
.list-faq dt:before {
	background: #ccc;
	border-radius: 50%;
	content: "Q";
	display: inline-block;
	padding: 4px;
	margin: 0 16px 0 -48px;
	text-align: center;
	width: 32px;
	height: 32px;
}
.list-heading {
	background: #eee;
	border-radius: 4px;
	font-size: 2rem;
	font-weight: bold;
	margin: 16px 0;
	padding: 16px 48px 16px 16px;
	text-align: left;
}

.support {
	padding: 0 16px;
}
.support h1 {
	border-bottom: 1px solid #ccc;
	font-size: 2.4rem;
	font-weight: 500;
	margin: 16px auto;
	padding-bottom: 8px;
	text-align: center;
}
.support h3 {
	padding: 16px 16px 0;
}
.illustration{
	margin: 10px 10px 30px 0px;
	width: 250px;}
   

@media screen and (min-width:769px) {
	.list-category>* {
		width: calc(calc(100% - 48px) / 4);
	}
	.list-product>* {
		width: calc(calc(100% - 64px) / 5);
	}
	:is(.list-category, .list-product)>*:hover, .list-faq dt:hover, .list-heading:hover {
		opacity: .8;
	}
	.support h1 {
		font-size: 2.8rem;
	}
}