@charset "UTF-8";

/*--------------------------------------------------------------------
product.html
product.css
--------------------------------------------------------------------*/

/*------------product---------------------------------------------------------------*/
/*一覧*/
#prodlist section ul {
	display: flex;
	flex-flow: wrap;
	gap: 60px 55px;
	counter-reset: item;
}
#prodlist section ul li img { width: 100%; }
#prodlist section ul li {
	display: flex;
	flex-direction: column;
	width: calc((100% - 55px) / 2);
}
#prodlist section ul li p + p {
	margin: 20px auto;
	text-align: center;
	font: bold 1.125em / 1.2 var(--gothic);
	color: var(--co-sky);
}
#prodlist ul li .Btn { margin-top: auto; }
#prodlist p { margin-top: 80px; }

@media (max-width: 760px) {
	#prodlist section ul { gap: 40px 25px; }
	#prodlist section ul li { width: calc((100% - 25px) / 2); }
}

@media (max-width: 450px) {
	#prodlist section ul li {
		width: 100%;
		max-width: 330px;
		margin: 0 auto;
	}
}

/*詳細*/
.prodDetail .NoBg > h4,
.prodDetail .NoBg h4.NoLine {
	position: relative;
	margin-bottom: 20px;
	padding-left: 0;
	border-left: 0 none;
	text-align: left;
}
.prodDetail .NoBg.about > h4 {
	text-align: center;
	color: var(--co-sky);
}
.prodDetail .topCerFoam {
	position: relative;
	font: bold 2em / 1.2 var(--gothic);
}
.prodDetail .Bg {
	padding: 30px 20px;
	background-color: var(--co-gray02);
	border-radius: 10px;
}
.prodDetail .Bg + .Bg { margin-top: 40px; }
.prodDetail #flesec {
	display: flex;
	flex-flow: row;
	gap: 20px;
	width: 92%;
	max-width: 1100px;
	margin: 0 auto;
	margin:  40px auto 0;
}
.prodDetail #flesec section + section { margin-top: 0; }
.prodDetail section h5 {
	display: inline-block;
	margin-top: 2em;
	margin-bottom: 0.5em;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-sky);
	border-radius: 999px;
	font: bold 1.25em / 1.2 var(--gothic);
	color: var(--co-white);
}
.prodDetail section h5:first-of-type { margin-top: 0; }
.prodDetail .prodList {
	display: flex;
	flex-flow: row-reverse;
	gap: 40px;
}
.prodDetail .NoBg > .prodList {
	flex-flow: row;
	align-items: center;
}
.prodDetail .prodList.fleRow { flex-flow: row; }
.prodDetail .prodList.fleRowRev { flex-flow: row-reverse; }
.prodDetail .phoList,
.prodDetail .phoList03 {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
}
.prodDetail .phoList03 { margin-bottom: 20px; }
.prodDetail .phoList li { width: calc((100% - 20px) / 2); }
.prodDetail .phoList03 li { width: calc((100% - 20px * 2) / 3); }
.prodDetail .phoList li p + p,
.prodDetail .phoList03 li p + p {
	margin-top: 0.25em;
	text-align: center;
}
.prodDetail .prodPho {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
.prodDetail .prodPho ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.prodDetail .prodTxt {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.prodDetail .wi38 { max-width: 380px; }
.prodDetail .wi64 { max-width: 640px; }
.prodDetail .wi60 { max-width: 600px; }
.prodDetail .wi48 { max-width: 480px; }
.prodDetail .wiHalf { max-width: 510px; }
.prodDetail .prodTxt ul.burner li {
	padding-left: 2.3em;
	text-indent: -1.5em;
}
.prodDetail .prodTxt ul.burner li::before {
	padding-right: 0.3em;
	content: "〇";
	font: bold 1.125em / 1.2 var(--gothic);
}
.prodDetail .circle li,
.prodDetail .MarkSqu li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
.prodDetail .circle li:not(:first-of-type),
.prodDetail .MarkSqu li:not(:first-of-type) { margin-top: 0.5em; }
.prodDetail .circle li::before {
	padding-right: 0.3em;
	content: "〇";
}
.prodDetail .MarkSqu li::before {
	padding-right: 0.3em;
	content: "◆";
}
.prodDetail .prodTxt ul#pareNum { counter-reset: number 0; }
.prodDetail .prodTxt ul#pareNum li {
	margin-top: 0.5em;
	padding-left: 1.5em;
	text-indent: -1.5em;
	counter-increment: number 1;
}
.prodDetail .prodTxt ul#pareNum li::before {
	padding-right: 0.5em;
	content: counter(number) ")";
}
.prodDetail .prodTxt ul.burner li:not(:first-of-type) { margin-top: 1em; }
.prodDetail .prodTxt ul.burner li span { font: bold 1.125em / 1.2 var(--gothic); }
.prodDetail ul.typeList {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 20px;
}
.prodDetail ul.typeList li.Btn {
	width: calc((100% - 20px) / 2);
	max-width: inherit;
}
.prodDetail ul.typeList li.Btn01 { margin: 0; }
.prodDetail table tr th:not(:last-of-type) { border-right: 1px solid var(--co-sky); }
.prodDetail table tr td:not(:last-of-type) { border-right: 1px solid var(--co-gray30); }
.prodDetail table tr td:last-of-type { border-left: 1px solid var(--co-gray30); }
.prodDetail table tr th { vertical-align: middle; }
.prodDetail table tr td:not(:last-of-type) { text-align: center; }
.prodDetail table tr th sup { font-weight: bold; }
.prodDetail table#porcelain tr th { width: auto; min-width: inherit; }
.prodDetail table#porcelain tr th.BorRno { border-right: 0 none; }
.prodDetail table#porcelain tr:first-of-type th { text-align: center; }
.prodDetail table#porcelain tr th.verWrit {
	width: calc(40px + 1em);
	writing-mode: vertical-rl;
	font-feature-settings: initial;
	text-align: center;
	vertical-align: middle;
}
.prodDetail table#porcelain tr td {
	border-left: 1px solid var(--co-gray30);
	text-align: center;
	vertical-align: middle;
}
.prodDetail table.composition tr th,
.prodDetail table.composition tr td {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.prodDetail table.composition tr:nth-child(2) th { border-right: 1px solid var(--co-sky); }
.prodDetail table.material tr th,
.prodDetail table.material tr td {
	width: auto;
	min-width: inherit;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.prodDetail table.material tr td.BorderNo { border-right: 0 none; }
.prodDetail table.topTh tr th {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.prodDetail table.btmCent tr:last-of-type td:not(:first-of-type) {
	text-align: left;
	vertical-align: top;
}
.prodDetail table.fullCent tr th,
.prodDetail table.fullCent tr td {
	text-align: center;
	vertical-align: middle;
}
.prodDetail .scroll + p { margin-top: 0.5em; }
.prodDetail ol {
	padding-left: 2em;
	list-style: decimal;
}
.prodDetail ol li:not(:first-of-type) { margin-top: 0.5em; }
.prodDetail ol#study { list-style: upper-roman; }
.prodDetail ol.alphabet { list-style: lower-alpha; }
.prodDetail ul.NoGuar { margin-top: 0.5em; }
.prodDetail ul.NoGuar li {
	padding-left: 1em;
	text-indent: -1em;
}
.prodDetail .txtList03 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	margin-top: 1em;
}
.prodDetail .txtList03 li,
.prodDetail .txtList03 dl { width: calc((100% - 40px * 2) / 3); }
.prodDetail .txtList03 li span,
.prodDetail .filtra dt,
.prodDetail h6 {
	display: inline-block;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-black);
	border-radius: 999px;
	font: bold 1em / 1.2 var(--gothic);
	color: var(--co-white);
}
.prodDetail h6 { margin: 1em 0 0.5em; }
.prodDetail .txtList03 dt {
	display: inline-block;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-red);
	border-radius: 999px;
	font: bold 1em / 1.2 var(--gothic);
	color: var(--co-white);
}
.prodDetail .txtList03 p { margin-top: 0.5em; }
.prodDetail .marTop20 { margin-top: 20px; }
.prodDetail .imgTxt {
	margin-top: 1em;
	text-align: center;
}
.prodDetail .imgTxt p + p { margin-top: 0.25em; }
.prodDetail .Installation {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}
.prodDetail .Installation dl { width: calc((100% - 40px) / 2); }
.prodDetail .Installation dl dt {
	display: inline-block;
	margin-bottom: 0.5em;
	padding: 0.25em 1em 0.15em;
	background-color: var(--co-sky);
	border-radius: 999px;
	font: bold 1.25em / 1.2 var(--gothic);
	color: var(--co-white);
}

@media (max-width: 979px) {
	.prodDetail table tr th,
	.prodDetail table tr td { display: table-cell; }
	.scroll p { display: none; }
	.prodDetail .txtList03 { gap: 10px 20px; }
	.prodDetail .txtList03 li,
	.prodDetail .txtList03 dl { width: calc((100% - 20px) / 2); }
}

@media (max-width: 820px) {
	.prodDetail .Bg { padding: 15px; }
	.prodDetail .prodList,
	.prodDetail .NoBg .prodList  {
		flex-flow: column;
		gap: 20px;
	}
	.prodDetail .prodList.fleRow { flex-flow: column; }
	.prodDetail .prodPho ul {
		flex-direction: row;
		gap: 10px;
	}
	.prodDetail .phoList03 li { width: calc((100% - 20px) / 2); }
	.prodDetail #flesec {
		flex-flow: column;
		gap: 40px;
	}
}

@media (max-width: 540px) {
	.scroll p { display: block; }
	.prodDetail .txtList03 li,
	.prodDetail .txtList03 dl { width: 100%; }
	.prodDetail .Installation {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		gap: 20px;
	}
	.prodDetail .Installation dl { width: 100%; }
}

@media (max-width: 400px) {
	.prodDetail .prodPho ul {
		flex-direction: column;
		gap: 10px;
	}
	.prodDetail .phoList li,
	.prodDetail .phoList03 li { width: 100%; }
	.prodDetail ul.typeList {
		flex-direction: row;
		gap: 20px;
	}
}

/*下部ナビ*/
#prodNav {
	width: 90%;
	max-width: 1100px;
	margin: 100px auto 0;
}
#prodNav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#prodNav ul li {
	display: flex;
	flex-direction: column;
	width: calc((100% - 10px * 3) / 4);
}
#prodNav ul li p + p {
	margin: 10px auto;
	text-align: center;
	font: bold 0.75em / 1.2 var(--gothic);
}
#prodNav ul li .Btn { margin-top: auto; }
#prodNav ul li .Btn a { font: bold 0.75em / 1.2 var(--gothic); }
#prodNav ul li .Btn a::before {
	width: 10px;
	height: 10px;
	background-size: cover;
}
#prodNav ul li .Btn02 {
	width: 75%;
	max-width: 156px;
}

@media (max-width: 680px) {
	#prodNav ul li { width: calc((100% - 10px) / 2); }
	#prodNav ul li .Btn02 {
		width: 100%;
		max-width: inherit;
	}
}

@media (max-width: 380px) {
	#prodNav ul li { width: calc((100% - 10px) / 2); }
}