/*
Theme Name: piupiu
Theme URI: https://m-piu.pro/
Description: theme for m+
Author: plantica
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&family=Oxanium:wght@300&display=swap');

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*:focus {
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	cursor: pointer;
}

*:where(:not(fieldset, progress, meter)) {
	border-width: 0;
	border-style: solid;
	background-origin: border-box;
	background-repeat: no-repeat;
}

html {
	block-size: 100%;
	-webkit-text-size-adjust: none;
}
@media (prefers-reduced-motion: no-preference) {
	:where(html:focus-within) {
		scroll-behavior: smooth;
	}
}

body {
	text-rendering: optimizeSpeed;
}
:where(body) {
	min-block-size: 100dvb;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
@supports not (min-block-size: 100dvb) {
	:where(body) {
		block-size: 100%;
	}
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
	display: block;
}

:where(img, svg, video) {
	block-size: auto;
	max-inline-size: 100%;
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
	color: inherit;
	font: inherit;
	font-size: inherit;
	letter-spacing: inherit;
}

:where(textarea) {
	resize: vertical;
}
@supports (resize: block) {
	:where(textarea) {
		resize: block;
	}
}

:where(button, label, select, summary, [role=button], [role=option]) {
	cursor: pointer;
}

:where(:disabled) {
	cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
	cursor: not-allowed;
}

:where(p, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
}

:where(ul[class], ol[class]) {
	list-style: none;
	margin: 0;
}

table {
	border-collapse: collapse;
}

a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	cursor: pointer;
}
a:has(> img) {
	text-decoration: none;
}

*:focus {
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: pointer;
}


/*--base--*/

:root {
	--col-MPIU: #3b0000;
	--col-LINK: #1587a7;
	--col-BLK: #050301;
	--col-TXT: #373533;
	--col-GRY: #575552;
	--col-ASH: #777572;
	--col-SLV: #a5a3a0;
	--col-ART: #e8e5e0;
	--col-BG: #f0ede8;
	--col-PRL: #f3f1ec;
	--col-SNW: #fefcf7;
	--breadcrumb-fix-height: 38px;
	--breadcrumb-flw-height: 55px;
	--aspect-ratio-screen: 12/5;
	--aspect-ratio-panorama: 16/9;
	--aspect-ratio-film: 3/2;
	--aspect-ratio-display: 4/3;
	--aspect-ratio-square: 1/1;
}

html {
	background-color: var(--col-BG);
	scroll-behavior: smooth;
}

body {
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100dvh;
	max-width: 1200px;
	min-width: 320px;
	margin: 0 auto;
	box-shadow: rgba(5, 3, 1, 0.2) 0 0 1px;
}
body#INDEXBODY {
	position: relative;
}
body details summary::-webkit-details-marker {
	display: none;
}

/*--body > header--*/

body#INDEXBODY > header {
	position: relative;
	display: grid;
	grid-auto-rows: auto 1fr;
	min-height: calc(100dvh + 1px);
}
body > header:not([ID]),
body#INDEXBODY > header > div {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 auto;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--col-ART);
	transition: all 0.5s ease-out;
}
body#INDEXBODY > header > div {
	position: relative;
	background-color: var(--col-BG);
	z-index: 1;
}
@media screen and (min-width: 521px) {
	body#INDEXBODY > header > aside {
		background-image: url(/img/m-piu.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 600px;
	}
	html.landscape > body#INDEXBODY > header > aside {
		background-position: bottom left;
		background-size: 50%;
		margin: clamp(20px, 9px + 3.64vw, 52px);
	}
}
@media screen and (min-width: 632px) {
	html.portrait > body#INDEXBODY > header > aside {
		margin: 32px 0;
	}
}
@media screen and (max-width: 520px) {
	html.portrait > body#INDEXBODY > header {
		background-image: url(/img/m-piu.jpg);
		background-position: bottom -1px center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}
html.portrait > body#INDEXBODY > header > aside > button {
	margin-top: calc(8dvh + 17dvw);
	width: 100%;
	color: var(--col-SNW);
	background: transparent;
}
html.landscape > body#INDEXBODY > header > aside > button {
	visibility: hidden;
}
body > header figure {
	padding-left: clamp(20px, 9px + 3.64vw, 52px);
}
body > header figure img {
	width: clamp(50px, 36px + 3.96vw, 70px);
	height: auto;
}
body > header nav {
	flex: 1;
	padding: 0 clamp(20px, 9px + 3.64vw, 52px);
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
@media screen and (max-width: 520px) {
	body > header nav {
		flex: 0 0 100%;
		justify-content: space-between;
		margin-top: 16px;
	}
}
body > header nav hr {
	order: -1;
	width: 100%;
	height: 0;
	border: none;
}
body > header nav details {
	display: contents;
}
body > header nav details summary {
	order: -2;
	display: block;
	padding: clamp(8px, 5px + 0.59vw, 12px) 0 clamp(8px, 5px + 0.59vw, 12px) clamp(20px, 13px + 1.47vw, 30px);
}
@media screen and (max-width: 520px) {
	body > header nav details summary {
		padding-left: 0;
	}
}
body > header nav details dl {
	display: grid;
	align-items: baseline;
	gap: 6px 10px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	width: min(100%, 570px);
	overflow: hidden;
}
body > header nav details dl dd {
	grid-column: span 2;
}
body > header nav details dl dd:last-of-type {
	padding-bottom: 16px;
}
body > header nav details dl dd span {
	display: block;
}
body > header nav details dl dt {
	padding-top: 16px;
}
body > header nav details dl dt:first-of-type {
	padding-top: 24px;
}

/*--body > main--*/

body > main {
	--article-blank: 56px;
	--section-blank-max: 32px;
	--section-blank: 24px;
	--section-blank-min: 16px;
	--h2-blank: 8px;
	/*-- display: grid; --*/
	/*-- grid-auto-rows: auto 1fr; --*/
}
body > main:is(#TOPICS, #PRODUCT-DETAIL) {
	position: relative;
}
body > main :is(input, select, textarea) {
		max-width: calc(100dvw - clamp(20px, 9px + 3.64vw, 52px)*2);
}
body > main span.ib {
	display: inline-block;
}

body > main#PRODUCT-DETAIL > div {
	z-index: 3;
}
@media screen and (min-width: 800px) {
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > div {
		position: absolute;
		top: 63px;
		right: 0;
		bottom: var(--section-blank);
		left: 50%;
		height: calc(385px - (63px + var(--section-blank)));
		display: grid;
		align-items: center;
		justify-items: end;
		padding-left: clamp(20px, 9px + 3.64vw, 52px);
		background: var(--col-BG);
	}
	body > main#PRODUCT-DETAIL > div {
		top: 0;
		bottom: 0;
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > div img {
		max-height: calc(385px - (63px + var(--section-blank)));
		width: 100%;
		object-fit: cover;
	}
	body > main#PRODUCT-DETAIL > div img {
		height: 385px;
		max-height: 385px;
		padding-bottom: 1px;
	}
}
body > main#PRODUCT-DETAIL > div > p {
	width: 100%;
	text-align: center;
}

body > main > header {
	position: sticky;
	height: 255px;
	top: -217px;
	display: grid;
	align-content: space-between;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) 1fr clamp(20px, 9px + 3.64vw, 52px);
	padding-top: var(--section-blank-min);
	background-color: transparent;
	border-bottom: 1px solid var(--col-ART);
	z-index: 2;
}
body > main > header:is(.minimal, .list) { /*-- minimal --*/
	height: 120px;
	top: -82px;
}
@media screen and (min-width: 800px) {
	body > main > header:is(.minimal, .list) { /*-- minimal --*/
		top: -100px;
		height: 155px;
		padding-top: var(--h2-blank);
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > header {
		top: -330px;
		height: 385px;
		padding-top: var(--h2-blank);
	}
}
body > main > header > * {
	grid-column: 2;
}
body > main > header:is(.minimal, .list) h1 { /*-- minimal --*/
	padding: var(--section-blank) 0;
}
body > main > header ul {
	grid-column: 1/4;
	position: sticky;
	top: 0;
	height: var(--breadcrumb-flw-height);
	display: flex;
	align-items: center;
	padding: 0 clamp(20px, 9px + 3.64vw, 52px);
	background-color: var(--col-BG);
	z-index: 1;
}
@media screen and (max-width: 799px) {
	body > main > header ul {
		height: var(--breadcrumb-fix-height);
		flex-wrap: wrap;
	}
}
body > main > header ul li {
	list-style-type: none;
	flex-shrink: 0;
}
body > main > header ul li a {
	display: inline-block;
}
body > main > header ul li:nth-last-child(2) {
	flex: 1;
	overflow: hidden;
}
body > main#TOPICS > header aside {
	padding-bottom: var(--section-blank);
}
body > main#PRODUCT-DETAIL > header {
	background: var(--col-BG);
}
body > main#PRODUCT-DETAIL > header > div {
	display: grid;
}
body > main#PRODUCT-DETAIL > header h1 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 0.5em;
}
body > main#PRODUCT-DETAIL > header h1 + small {
	padding-bottom: var(--section-blank-min);
}
body > main#PRODUCT-DETAIL > header p.price {
	display: grid;
	gap: 6px 2px;
	align-items: baseline;
	justify-items: end;
	grid-template-columns: 1fr auto;
	padding: var(--section-blank-min) 0;
}
body > main#PRODUCT-DETAIL > header p.price span:last-of-type {
	grid-column: span 2;
}
@media screen and (min-width: 800px) {
	body > main:is(#TOPICS, #PRODUCT-DETAIL) header > *:not(ul) {
		width: 50%;
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) header h1 {
		padding-top: var(--h2-blank);
	}
	body > main#TOPICS > header aside {
		padding-top: var(--article-blank);
	}
}

/*--body > main article--*/

body > main article {
	--article-bg: var(--col-BG);
	background: var(--article-bg);
	padding-bottom: var(--article-blank);
}
body > main:is(#TXT, #CONTACT, #REREASE, #RETAILERS, #PRODUCT-TABLE) article { /*-- minimal --*/
	--article-bg: var(--col-PRL);
}
body > main:is(#CONTACT, #REREASE, #RETAILERS) article { /*-- minimalist --*/ /*-- h2sticky使うならoverflow禁止--*/
	overflow: hidden;
}
body > main:is(#REREASE, #RETAILERS, #FAQs) article { /*-- minimalist --*/ 
	padding-bottom: 0;
}
body > main > article ul:not([class]) li {
	list-style-type: circle;
}
body > main > article .warning {
	display: flex;
	align-items: baseline;
	column-gap: 0.35em;
}
body > main > article > p,
body > main > article > section p,
body > main#PRODUCT-DETAIL > article > details > div > p {
		margin-top: var(--section-blank-min);
}
body > main > article > :is(ol, ul) ,
body > main > article > section :is(ol, ul) {
	margin-top: var(--section-blank-min);
}
body > main > article > *:not(section) {
		padding: 0 clamp(20px, 9px + 3.64vw, 52px);
}
body > main > article > *:not(section):first-child {
		margin-top: var(--article-blank);
}
body > main#FAQs > article > section:not(:first-of-type) {
	border-top: 1px solid var(--col-ART);
}
body > main > article > section,
body > main#PRODUCT-DETAIL > article > details > div,
body > main#FAQs > article > section > details > div {
	display: grid;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) clamp(10px, 5px + 1.59vw, 24px) 1fr 1fr 1fr clamp(10px, 5px + 1.59vw, 24px) clamp(20px, 9px + 3.64vw, 52px);
}
body > main > article > section > *,
body > main#PRODUCT-DETAIL > article > details > div > *,
body > main#FAQs > article > section > details > div > * {
	grid-column: 2/7;
}
body > main > article > section > :is(ol, ul, h4),
body > main#FAQs > article > section > details > div > h4,
body > main#FAQs > article > section > details > div > h4 + * {
	grid-column: 3/7;
}
body > main > article > section > h2 {
	position: sticky;
	top: calc(var(--breadcrumb-fix-height) + var(--h2-blank) - var(--article-blank));
	grid-column: 1/8;
	padding: var(--article-blank) clamp(20px, 9px + 3.64vw, 52px) var(--h2-blank);
	background-color: var(--article-bg);
	border-bottom: 1px solid var(--col-ART);
	z-index: 1;
}
@media screen and (min-width: 800px) {
	body > main > article > section > h2 {
		top: calc(var(--breadcrumb-flw-height) + var(--h2-blank) - var(--article-blank));
	}
}
body > main > article > section > h2 + *,
body > main > article > section > figure.h2img + * {
	margin-top: calc(var(--h2-blank) + var(--section-blank-min));
}
body > main > article > section h3,
body > main > article > section h4 {
	margin-top: var(--section-blank);
}
body > main > article > section ol:not([class]),
body > main > article > section ul:not([class]),
body > main > article ul.ng {
	display: grid;
	gap: 10px 0;
}
body#INDEXBODY > main#INDEX > article {
	padding-bottom: 0;
}
body#INDEXBODY > main#INDEX > article > section.topics {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
body#INDEXBODY > main#INDEX > article > section.topics h1 {
	padding-bottom: var(--section-blank);
}
body#INDEXBODY > main#INDEX > article > section.topics ul {
	display: grid;
	align-items: baseline;
	grid-template-columns: auto 1fr;
	gap: 0 12px;
}

@media screen and (min-width: 521px) {
	html.portrait > body#INDEXBODY > main#INDEX > article > section.topics ul {
		grid-template-columns: auto auto auto 1fr;
		gap: 0 16px;
	}
}
html.landscape > body#INDEXBODY > main#INDEX > article > section.topics ul {
	max-inline-size: fit-content;
	margin-left: auto;
}


body#INDEXBODY > main#INDEX > article > section.topics ul li {
	list-style-type: none;
	display: contents;
}
body#INDEXBODY > main#INDEX > article > section.topics ul li p {
	grid-column: span 2;
	margin: 0 0 var(--section-blank-min);
}
body#INDEXBODY > main#INDEX > article > ul.information {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: var(--article-blank) 0 var(--section-blank-max);
	padding: 0;
	background-color: var(--col-ART);
	border-top: 1px solid var(--col-ART);
	border-bottom: 1px solid var(--col-ART);
}
body#INDEXBODY > main#INDEX > article > ul.information li {
	flex: 1;
	display: grid;
	place-items: center;
	min-width: 250px;
	background-color: var(--col-BG);
	padding: clamp(10px, 5px + 1.59vw, 24px);
}
body#INDEXBODY > main#INDEX > article > ul.information li span {
	display: block;
}
body#INDEXBODY > main#INDEX > article section.map {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
}
body#INDEXBODY > main#INDEX > article section.map > div {
	flex: 1.6;
	padding: 0 clamp(20px, 9px + 3.64vw, 52px) 0 calc(clamp(20px, 9px + 3.64vw, 52px) + clamp(10px, 5px + 1.59vw, 24px));
	margin: var(--article-blank) 0 var(--section-blank-max);
	min-width: 280px;
}
body#INDEXBODY > main#INDEX > article section.map > div h1 {
	padding-bottom: var(--section-blank-max);
}
body#INDEXBODY > main#INDEX > article section.map > div h1 span {
	display: block;
}
body#INDEXBODY > main#INDEX > article section.map > div h2 {
	margin-top: var(--section-blank);
}
body#INDEXBODY > main#INDEX > article section.map > div a.google-maps {
	display: flex;
	align-items: flex-end;
	-moz-column-gap: 8px;
			 column-gap: 8px;
	justify-content: flex-end;
	padding: var(--h2-blank) 0 var(--section-blank);
}
body#INDEXBODY > main#INDEX > article section.map > div a.google-maps::before {
	content: "";
	display: inline-block;
	height: 1.25rem;
	width: 1.25rem;
	vertical-align: middle;
	background-image: url(/svg/map.svg);
	background-repeat: no-repeat;
}
body#INDEXBODY > main#INDEX > article section.map > div ul li {
	margin-top: 0;
}
body#INDEXBODY > main#INDEX > article section.map > div ul + p {
	margin-top: var(--h2-blank);
}
body#INDEXBODY > main#INDEX > article section.map > figure {
	flex: 1;
	min-width: 280px;
	margin: var(--section-blank-max) 0 0;
}
body#INDEXBODY > main#INDEX > nav {
	position: sticky;
	bottom: 0;
	padding: 12px clamp(20px, 9px + 3.64vw, 52px);
	background-color: var(--col-BG);
	border-top: 1px solid var(--col-ART);
}
body#INDEXBODY > main#INDEX > nav button {
	display: block;
	margin-left: auto;
}
body#INDEXBODY > main#INDEX > nav button img {
	display: block;
	height: clamp(0.688rem, 0.545rem + 0.71vw, 0.938rem);
	margin-bottom: -0.075em;
}
html.portrait > body#INDEXBODY > main#INDEX > article {
	display: grid;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) clamp(10px, 5px + 1.59vw, 24px) 1fr clamp(10px, 5px + 1.59vw, 24px) clamp(20px, 9px + 3.64vw, 52px);
}
html.portrait > body#INDEXBODY > main#INDEX > article > * {
	grid-column: 3;
}
html.portrait > body#INDEXBODY > main#INDEX > article > section.topics {
	margin-top: var(--article-blank);
}
html.portrait > body#INDEXBODY > main#INDEX > article > section.topics :is(h1, ul) {
	padding: var(--section-blank-max) 0 0;
}
@media screen and (min-width: 521px) {
	html.landscape > body#INDEXBODY > main#INDEX > article > section.topics {
		position: absolute;
		top: 160px;
		right: clamp(20px, 9px + 3.64vw, 52px);
		min-height: calc(100dvh - 160px);
		padding: 0 clamp(20px, 9px + 3.64vw, 52px) 100px calc(clamp(20px, 9px + 3.64vw, 52px) * 2);
		max-width: 50%;
	}
}
html.portrait > body#INDEXBODY > main#INDEX > article > ul.information,
html.portrait > body#INDEXBODY > main#INDEX > article > section.map {
	grid-column: 1/6;
}

body > main:is(#TOPICS, #PRODUCT-DETAIL) > article {
	--article-bg: var(--col-ART);
	border-top: 1px solid transparent;
}
body > main#TOPICS > article dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px clamp(16px, 3px + 4.09vw, 52px);
		margin-top: var(--section-blank-min);
}
body > main:is(#TOPICS, #PRODUCT-DETAIL, #FAQs) > article small:not([class]) {
	display: flex;
	gap: 0 0.1em;
	padding-top: 6px;
}
body > main:is(#TOPICS, #PRODUCT-DETAIL, #FAQs) > article small:not([class])::before {
		content: "※";
}
body > main#TOPICS > article > section > section {
	margin: 32px -15px 0;
	padding: 0 calc(15px + clamp(10px, 5px + 1.59vw, 24px)) var(--section-blank);
	background-color: rgba(254, 252, 247, 0.17);
	outline: 1px solid var(--col-BG);
	outline-offset: -1px;
}
body > main#TOPICS > article > section > section > ul {
	gap: 8px 0;
	margin-top: var(--section-blank);
}
body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > h2 {
	border-bottom: 1px solid #dfdcd7;
}
body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure {
	margin-top: var(--section-blank);
}
body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure.h2img {
	grid-column: 1/5;
}
@media screen and (max-width: 799px) {
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure.h2img {
		margin-top: 0;
		grid-column: 1/8;
	}
}
@media screen and (min-width: 667px) {
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > .parallel-r {
		grid-column: 2/5;
		padding-right: clamp(20px, 9px + 3.64vw, 52px);
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure.parallel-r {
		grid-column: 5/8;
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > .parallel-l,
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure.single {
		grid-column: 4/7;
		padding-left: clamp(20px, 9px + 3.64vw, 52px);
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > .single-l {
		grid-column: 2/4;
	}
	body > main:is(#TOPICS, #PRODUCT-DETAIL) > article > section > figure.parallel-l {
		grid-column: 1/4;
	}
}
body > main > article > aside.lower {
	padding-top: var(--section-blank);
	margin-left: auto;
	max-inline-size: fit-content;
}
body > main > div.list,
body > main:is(#REREASE, #RETAILERS) article > div,
body > main#PRODUCT-TABLE article > section { /*-- minimalist --*/
	display: grid;
	padding: 0;
	background-color: var(--col-ART);
}
body > main > div.list {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-template-rows: min-content;
	gap: 1px;
}
body > main#PAGINATION > div.list > article {
	display: grid;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) 1fr clamp(20px, 9px + 3.64vw, 52px);
	padding-bottom: 0;
}
body > main#PAGINATION > div#ARCHIVE > article {
	grid-template-rows: 1fr auto auto 3fr;
}
body > main#PAGINATION > div#TAXONOMY > article {
	grid-template-rows: 1fr auto auto auto;
}
body > main > div.list > article > h2 {
	margin-bottom: var(--section-blank);
	padding-top: var(--article-blank);
}
body > main > div.list > article > small.tag,
body > main:is(#TOPICS, #PRODUCT) header aside small.tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.5em;
	margin: var(--h2-blank) 0 0.8em;
}
body > main > div.list > article > small.tag a,
body > main:is(#TOPICS, #PRODUCT) header aside small.tag a,
body > main > div.list > article > time,
body > main:is(#TOPICS, #PRODUCT) header aside time {
	display: flex;
	align-items: center;
	column-gap: 0.2em;
	line-height: 1;
}
body > main#PRODUCT-DETAIL > article > dl {
	display: grid;
	align-items: baseline;
	gap: 0 clamp(10px, 5px + 1.59vw, 24px);
	grid-template-columns: auto auto;
	margin-top: 0;
	padding-top: var(--article-blank);
	padding-bottom: var(--section-blank-min);
	background: var(--col-BG);
}
@media screen and (min-width: 800px) {
	body > main#PRODUCT-DETAIL > article > dl {
		justify-content: right;
	}
}
body > main#PRODUCT-DETAIL > article > dl dd + dd {
	grid-column: 2;
}

body > main#PRODUCT-DETAIL > article section.variation {
	--article-bg: var(--col-BG);
	background: var(--col-BG);
}
body > main#PRODUCT-DETAIL > article > section.variation ul {
	grid-column: 2/7;
	display: grid;
	gap: 24px 16px;
	grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
	padding: var(--section-blank-min) 0;
}
body > main#PRODUCT-DETAIL > article > section.variation ul li {
	position: relative;
	list-style-type: none;
	margin-top: 0;
}
body > main#PRODUCT-DETAIL > article > section.variation ul li::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 8px;
	background: linear-gradient(to bottom left, var(--col-BG) 50%, transparent 50%) top left/100% 50% no-repeat, linear-gradient(to top left, var(--col-BG) 50%, transparent 50%) bottom left/100% 50% no-repeat;
}
body > main#PRODUCT-DETAIL > article > section.variation ul li a {
	display: flex;
	justify-content: flex-end;
	padding-right: 12px;
	background: var(--col-BG);
	border-top: 8px solid;
	overflow: hidden;
}
body > main#PRODUCT-DETAIL > article > details {
	padding: var(--article-blank) 0 0;
	background-color: var(--col-BG);
}
body > main#FAQs > article > section > h2 {
	background: var(--col-BG);
	border-bottom: 0;
}
body > main#FAQs > article > section > details {
	grid-column: 1/8;
	margin-top: 0;
	padding: var(--h2-blank) 0;
	background-color: var(--col-PRL);
	border-top: 1px solid var(--col-ART);
}
body > main#FAQs > article > section > details:first-of-type {
    margin-top: var(--section-blank-min);
}
body > main#PRODUCT-DETAIL > article > details summary,
body > main#FAQs > article > section > details summary {
	display: grid;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) 1fr clamp(20px, 9px + 3.64vw, 52px) clamp(20px, 9px + 3.64vw, 52px);
	align-items: baseline;
}
body > main#FAQs > article > section > details summary {
	align-items: center;
	background-color: var(--col-PRL);
}
body > main#PRODUCT-DETAIL > article > details summary h2 {
	grid-column: 2/3;
	grid-row: 1;
	padding-right: 0.5em;
	padding-bottom: var(--h2-blank);
}
body > main#FAQs > article > section > details summary h3 {
	grid-column: 2/3;
	padding-right: 0.5em;
	margin-top: 0;
}
body > main#PRODUCT-DETAIL > article > details summary::after,
body > main#FAQs > article > section > details summary::after {
	grid-column: 3/4;
	grid-row: 1;
	display: grid;
	place-items: center;
	padding-bottom: var(--h2-blank);
	aspect-ratio: 1/1;
}
body > main#PRODUCT-DETAIL > article > details > div,
body > main#FAQs > article > section > details > div {
	overflow: hidden;
}
body > main#PRODUCT-DETAIL > article > details	div > *:first-child,
body > main#FAQs > article > section > details > div > *:first-child {
	margin-top: calc(var(--h2-blank) + var(--section-blank-min));
}
body > main#PRODUCT-DETAIL > article > details	div > *:last-child,
body > main#FAQs > article > section > details > div > *:last-child {
	padding-bottom: var(--section-blank);
}
body > main#PAGINATION > nav {
	background: var(--col-ART);
	border-top: 1px solid var(--col-ART);
}
body > main#PAGINATION > nav > div.nav-links {
	display: flex;
	column-gap: 1px;
}
body > main#PAGINATION > nav > div.nav-links > * {
	flex: 1;
	padding: 8px;
	background-color: var(--col-PRL);
}
body > main#PAGINATION > nav > div.nav-links > span {
	background-color: var(--col-BG);
}
@media screen and (max-width: 520px) {
	body > main#PAGINATION > nav > div.nav-links > a:is(.prev, .next) {
		display: none;
	}
}
body > main > div.list > article > * {
	grid-column: 2;
}
body > main > div.list > article > div {
	grid-column: 1/4;
	display: flex;
	flex-direction: column;
}
body > main > div#ARCHIVE > article > div > *:not(a.thumbnail) {
	margin-top: var(--section-blank-min);
	padding: 0 clamp(20px, 9px + 3.64vw, 52px);
}
body > main > div#TAXONOMY > article > :is(small, p) {
	justify-content: flex-end;
	justify-self: flex-end;
}
body > main > div#TAXONOMY > article > div > ul.colorbar {
	display: flex;
	order: 1;
	column-gap: 1px;
	background-color: var(--col-SLV);
}
body > main > div#TAXONOMY > article > div > ul.colorbar li {
	flex: 1;
	display: block;
	height: 8px;
	margin-top: 0;
}
body > main > div#TAXONOMY > article > div > ul.colorbar li span {
	display: none;
}
body > main > div.list > article > div > a.thumbnail {
	display: block;
	margin-top: auto;
	padding: var(--section-blank) 0 0;
}
body > main > div#ARCHIVE > article > div > ul,
body > main:is(#TOPICS, #PRODUCT) > article > ul {
	list-style-type: circle;
	display: grid;
	gap: 10px 0;
	padding-left: calc(clamp(20px, 9px + 3.64vw, 52px) + clamp(10px, 5px + 1.59vw, 24px));
}
body > main#REREASE article > div {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0 1px;
	border-top: 1px solid var(--col-ART);
}
body > main#RETAILERS article > div {
	grid-template-columns: repeat(auto-fit, minmax(73px, 1fr));
	gap: 1px;
	border-top: 1px solid var(--col-ART);
}
body > main#PRODUCT-TABLE article > section {
	gap: 1px;
	border-bottom: 1px solid var(--col-ART);
}
body > main:is(#REREASE, #RETAILERS) article > div:first-of-type {
	margin-top: var(--section-blank);
}
body > main:is(#REREASE, #RETAILERS) article > div > *,
body > main#PRODUCT-TABLE article > section > * { /*-- minimalist --*/
	background-color: var(--col-PRL);
}
body > main#REREASE article > div > * {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 3px clamp(20px, 9px + 3.64vw, 52px) var(--section-blank-min) ;
}
body > main#REREASE article > div > h2,
body > main#REREASE article > div > h2 + p {
	padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px) 0 ;
}
@media screen and (min-width: 800px) {
	body > main#REREASE article > div {
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
	}
	body > main#REREASE article > div > *,
	body > main#REREASE article > div > h2,
	body > main#REREASE article > div > h2 + p {
		padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px);
	}
}
body > main#RETAILERS article > div > * {
	padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px);
}
body > main#RETAILERS article > div dl {
	grid-column: 1/span 5;
	display: grid;
	gap: 12px 1.5ch;
}
body > main#RETAILERS article > div dl dd {
	display: grid;
}
body > main#RETAILERS article > div ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 0;
	background-color: var(--col-ART);
}
body > main#RETAILERS article > div ul li {
	flex: 1;
	list-style-type: none;
	display: grid;
	place-items: center;
	margin-top: 0;
	background-color: var(--col-PRL);
}
body > main#RETAILERS article > div ul li a,
body > main#RETAILERS article > div ul li img {
	display: block;
	width: clamp(16px, 16px + 0.23vw, 18px);
}
body > main#RETAILERS article > div aside {
	grid-column: span 6;
	padding-bottom: var(--section-blank-max);
}
@media screen and (max-width: 520px) {
	body > main#RETAILERS article > div :is(dl, ul, aside) {
		grid-column: 1/span 4;
	}
	body > main#RETAILERS article > div dl {
		padding-top: var(--article-blank);
		padding-bottom: calc(var(--section-blank-min) * 0.75);
	}
	body > main#RETAILERS article > div ul {
		flex-direction: row;
	}
	body > main#RETAILERS article > div ul li {
		padding: var(--section-blank-min) 0;
	}
	body > main#RETAILERS article > div aside {
		padding-top: var(--section-blank-min);
		padding-bottom: var(--article-blank);
	}
}
body > main#PRODUCT-TABLE article > section > h2 {
	background: var(--col-BG);
	border-bottom: 0;
}
@media screen and (min-width: 800px) {
	body > main#PRODUCT-TABLE article > section > h2 {
		padding: calc(var(--article-blank) - 0.1em) clamp(20px, 9px + 3.64vw, 52px) calc(var(--h2-blank) + 0.1em);
	}		
}
body > main#PRODUCT-TABLE article > section.attention > *:not(h2) {
	grid-column: 1/8;
	margin: 0;
	padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px);
}
body > main#PRODUCT-TABLE article > section > h3 {
	grid-column: 1/8;
	display: grid;
	align-content: start;
	margin: 0;
	padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px);
}
body > main#PRODUCT-TABLE article > section > h3.has_list {
	grid-column: 1/4;
}
body > main#PRODUCT-TABLE article > section > ul {
	grid-column: 4/8;
	gap: 8px 0;
	margin: 0;
	padding: var(--section-blank) clamp(20px, 9px + 3.64vw, 52px);
}
body > main#PRODUCT-TABLE article > section > ul li {
	list-style-type: none;
}
body > main#PRODUCT-TABLE article > section > small {
	grid-column: 1/8;
	margin-top: 0;
	padding: var(--section-blank-min) clamp(20px, 9px + 3.64vw, 52px) var(--h2-blank);
}

/*-- footer --*/

body > footer {
	display: grid;
	gap: 8px;
	grid-template-columns: clamp(20px, 9px + 3.64vw, 52px) auto 1fr clamp(20px, 9px + 3.64vw, 52px);
	padding-bottom: 16px;
	background-color: var(--col-BG);
	border-top: 1px solid var(--col-ART);
}
body > footer figure {
	grid-column: 2/3;
	grid-row: 1;
	margin-left: -8px;
}
body > footer figure img {
	width: clamp(50px, 36px + 3.96vw, 70px);
	height: auto;
	margin: 0 auto;
}
body > footer ul#NAV {
	grid-column: 2/4;
	grid-row: 2;
	padding-bottom: 8px;
}
body > footer ul#NAV > li {
	padding-top: 8px;
}
body > footer ul#NAV > li ul {
	display: flex;
	gap: 0 12px;
	justify-content: flex-end;
}
body > footer ul#SNS {
	grid-column: 2/4;
	grid-row: 3;
	display: flex;
	gap: 8px 24px;
	justify-content: flex-end;
	padding: 8px 0;
}
body > footer ul li {
	list-style: none;
}
body > footer ul#SNS li a {
	display: block;
}
body > footer ul li a img {
	height: clamp(15px, 14px + 0.34vw, 18px);
}
body > footer small#footer-COPYRIGHT {
	grid-column: 2/4;
	grid-row: 4;
	padding-top: 5px;
}

/*-- font-setting --*/

@font-face {
	font-family: "Noto Serif JP";
	src: local("NotoSerifJP-Light"), url("https://m-piu.pro/fonts/NotoSerifJP-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: local("NotoSerifJP-Regular"), url("https://m-piu.pro/fonts/NotoSerifJP-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Noto Serif JP";
	src: local("NotoSerifJP-Medium"), url("https://m-piu.pro/fonts/NotoSerifJP-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Oxanium";
	src: local("Oxanium-Light"), url("https://m-piu.pro/fonts/Oxanium-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}

body {
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
	color: var(--col-TXT);
}
body a {
	color: var(--col-BLK);
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--col-LINK);
	text-underline-offset: 0.3em;
}
body a[target="_blank"] {
	text-decoration-color: var(--col-MPIU);
}
body :is(strong, em) {
	font-weight: 600;
	font-style: normal;
}
body del {
	color: var(--col-ASH);
	text-decoration-thickness: from-font;
	text-decoration-style: double;
}
body .nw {
  white-space: nowrap;
}

body > header nav details summary {
	color: rgba(5, 3, 1, 0.73);
	font-size: clamp(0.75rem, 0.643rem + 0.54vw, 0.938rem);
	letter-spacing: 0.035rem;
	transition: all 0.5s ease-in-out;
}
body > header nav details summary::after {
	content: "×";
	display: inline-block;
	margin-left: 0.5em;
	color: var(--col-MPIU);
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
	transform: rotateZ(45deg);
	transition: transform 0.7s;
}
body > header nav details[open] summary {
	color: rgb(5, 3, 1);
}
body > header nav details[open] summary::after {
	transform: rotateZ(0deg);
}
body > header nav details dl {
	line-height: 1.75;
	word-break: break-word;
}
body > header nav details dl dt {
	font-size: clamp(0.688rem, 0.545rem + 0.71vw, 0.938rem);
	letter-spacing: 0.0725rem;
}
body > header nav details dl dd {
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
}

body > main h1 {
	font-size: clamp(1.188rem, 1.074rem + 0.57vw, 1.5rem);
	font-weight: 500;
	line-height: 1.7;
}
body > main h2 {
	font-size: clamp(1.063rem, 0.972rem + 0.45vw, 1.313rem);
	font-weight: 500;
	line-height: 1.555;
}
body > main h3 {
	color: var(--col-BLK);
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	font-weight: 500;
	letter-spacing: 0.035rem;
	line-height: 1.625;
}
body > main h4 {
	color: var(--col-BLK);
	font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.035rem;
	line-height: 1.875;
	text-indent: -1.35em;
}
body > main h4::before {
	content: "▷";
	margin-right: 0.35em;
	color: var(--col-ASH);
}
body > main :is(p, li, dl),
body > footer li {
	color: var(--col-BLK);
	font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
	line-height: 1.875;
}
body > main p {
	letter-spacing: 0.0725rem;
}
body > main li, body dl,
body > footer li {
	letter-spacing: 0.05rem;
}
body > main :is(small, time),
body > footer small {
	letter-spacing: 0.035rem;
}
body#INDEXBODY > main#INDEX > article h1 {
	font-size: clamp(1.313rem, 1.153rem + 0.8vw, 1.75rem);
	letter-spacing: 0.0725rem;
}
body#INDEXBODY > main#INDEX > article h1 span {
	font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
	letter-spacing: 0.05rem;
}
body#INDEXBODY > main#INDEX > article > section.topics ul li span {
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
}
body#INDEXBODY > main#INDEX > article > section.topics ul li > a {
	color: var(--col-MPIU);
	font-size: clamp(0.688rem, 0.545rem + 0.71vw, 0.938rem);
	text-decoration: none;
}
body#INDEXBODY > main#INDEX > article > ul.information li {
	letter-spacing: 0.0725rem;
}
body#INDEXBODY > main#INDEX > article > ul.information li span {
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
	line-height: 1.555;
}
body#INDEXBODY > main#INDEX > article section.map > div h1 {
	letter-spacing: 0.0725rem;
}
body#INDEXBODY > main#INDEX > article > section.map > div h2 {
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
}
body#INDEXBODY > main#INDEX > article > section.map > div > a.google-maps {
	font-size: clamp(0.813rem, 0.741rem + 0.36vw, 0.938rem);
}
body#INDEXBODY > main#INDEX > article > section.map > div ul li {
	font-size: clamp(0.813rem, 0.741rem + 0.36vw, 0.938rem);
}
body#INDEXBODY > main#INDEX > article > section.map > div ul + p {
	font-size: clamp(0.813rem, 0.741rem + 0.36vw, 0.938rem);
}

body > main > header:is(.minimal, .list) h1 span { /*-- minimal --*/
	font-size: smaller;
}
body > main > header ul li {
	font-size: clamp(0.688rem, 0.545rem + 0.71vw, 0.938rem);
	white-space: nowrap;
}
body > main > header ul li:not(:first-of-type):not(:last-of-type)::before {
	content: "-";
	padding: 0 5px;
	color: var(--col-ASH);
}
body > main > header:not(.minimal) ul li:nth-of-type(n+2):nth-of-type(-n+3)::before {
	content: ">";
	padding: 0 8px;
}
body > main > header ul li a {
	display: inline-block;
}
body > main > header ul li img {
	display: block;
	height: clamp(0.688rem, 0.545rem + 0.71vw, 0.938rem);
	margin-bottom: -0.075em;
}
body > main > header h1 {
	letter-spacing: 0.0725rem;
	line-height: 1.555;
}
body > main#PRODUCT-DETAIL > header h1 span {
	font-size: smaller;
}
body > main#PRODUCT-DETAIL > header h1 + small {
	font-size: clamp(0.75rem, 0.714rem + 0.18vw, 0.813rem);
}
body > main#PRODUCT-DETAIL > header small + p {
	font-size: clamp(0.813rem, 0.741rem + 0.36vw, 0.938rem);
}
body > main#PRODUCT-DETAIL > header p.price {
	font-family: "Oxanium", sans-serif;
	font-weight: 300;
	color: var(--col-TXT);
	font-size: clamp(1.063rem, 0.972rem + 0.45vw, 1.313rem);
	letter-spacing: 0.025em;
	line-height: 1;
}
body > main#PRODUCT-DETAIL > header p.price span {
	color: var(--col-ASH);
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
}

body > main > article i {
	padding: 0 0.25em;
	color: var(--col-TXT);
	font-size: smaller;
}
body > main > article ul.ng li {
	list-style-type: none;
	text-indent: -1.35em;
}
body > main > article ul.ng li::before {
	content: "×";
	margin-right: 0.35em;
	color: var(--col-MPIU);
}
body > main > article .warning::before {
		content: "⚠";
		color: var(--col-MPIU);
		font-weight: 500;
		font-size: smaller;
}
body > main article section > h2 {
	letter-spacing: 0.0725rem;
}
body > main > article > aside.lower > * {
	font-size: smaller;
}
body > main > div.list > article > h2 {
	letter-spacing: 0.035rem;
}
body > main > div.list > article > small.tag a::before,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside small.tag a::before,
body > main > div.list > article > time::before,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside time::before {
	content: "";
	display: inline-block;
	height: 1rem;
	width: 1rem;
	vertical-align: middle;
}
body > main > div.list > article > small.tag a,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside small.tag a {
	text-decoration: none;
	color: var(--col-MPIU);
}
body > main > div.list > article > small.tag a::before,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside small.tag a::before {
	background-image: url(/svg/tag.svg);
	background-repeat: no-repeat;
}
body > main > div.list > article > small.leather a::before {
	background-image: url(/svg/leather.svg);
}
body > main > div.list > article > time,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside time {
	font-size: smaller;
	color: var(--col-TXT);
}
body > main > div.list > article > time::before,
body > main:is(#TOPICS, #PRODUCT-DETAIL) header aside time::before {
	background-image: url(/svg/date.svg);
	background-repeat: no-repeat;
}
body > main#PRODUCT-DETAIL > article > dl dt {
	color: var(--col-GRY);
	font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
	font-weight: 300;
	letter-spacing: 0rem;
}
body > main#PRODUCT-DETAIL > article > dl dd {
	color: var(--col-TXT);
	font-size: clamp(0.875rem, 0.839rem + 0.18vw, 0.938rem);
	letter-spacing: 0.035rem;
}
body > main#PRODUCT-DETAIL > article > section.variation h2::after {
		content: " - color options";
		color: var(--col-TXT);
		font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
		font-weight: 300;
		letter-spacing: 0.035rem;
}
body > main#PRODUCT-DETAIL > article > section.variation ul li a {
	font-size: clamp(0.813rem, 0.741rem + 0.36vw, 0.938rem);
	text-decoration: none;
	white-space: nowrap;
}
body > main#PRODUCT-DETAIL > article > details summary::after,
body > main#FAQs > article > section > details summary::after {
	content: "×";
	color: var(--col-MPIU);
	transform: rotateZ(45deg);
	transition: transform 0.7s;
}
body > main#PRODUCT-DETAIL > article > details[open] summary::after,
body > main#FAQs > article > section > details[open] summary::after {
	transform: rotateZ(0deg);
}
body > main#PRODUCT-DETAIL > article > details summary h2,
body > main#FAQs > article > section > details summary h3 {
	letter-spacing: 0.0725rem;
}

body > main > div.list > article > h2 a {
	color: var(--col-TXT);
}
body > main > div.list > article > h2 b {
	display: block;
	font-weight: lighter;
	font-size: clamp(0.75rem, 0.265rem + 2.07vw, 0.938rem);
}
body > main > div.list > article > div a.more-link {
	font-size: smaller;
	text-align: right;
}
body > main#PAGINATION > div#TAXONOMY > article > p {
	padding-bottom: 10px;
	color: var(--col-TXT);
	font-family: "Oxanium", sans-serif;
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	letter-spacing: 0.035rem;
	line-height: 1;
}
body > main#PAGINATION > nav > div.nav-links > * {
	color: var(--col-GRY);
	text-align: center;
	font-size: smaller;
}
body > main#PAGINATION > nav > div.nav-links a {
	text-decoration: none;
	color: var(--col-MPIU);
}
body > main#RETAILERS article > h2 {
	font-weight: 300;
	letter-spacing: 0.035rem;
}
body > main#REREASE article > div > h2,
body > main#RETAILERS article > div dl dt {
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	letter-spacing: 0.0725rem;
	line-height: 1.625;
}
body > main#RETAILERS article > div dl dt span {
	font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
	font-weight: 300;
}
body > main:is(#REREASE, #RETAILERS) article > p,
body > main#RETAILERS article > div :is(dl dd, aside) {
	color: var(--col-TXT);
	font-size: clamp(0.75rem, 0.265rem + 2.07vw, 0.938rem);
	font-weight: 300;
	letter-spacing: 0.05rem;
}
body > main#REREASE article > div > p {
	color: var(--col-TXT);
	font-size: clamp(0.813rem, 0.777rem + 0.18vw, 0.875rem);
	font-weight: 300;
	letter-spacing: 0.05rem;
}
body > main#RETAILERS article > div dl dd span,
body > main#PRODUCT-TABLE article > section > h3 span {
	color: var(--col-TXT);
	font-size: clamp(0.625rem, 0.482rem + 0.71vw, 0.875rem);
	font-weight: 300;
}
body > main#PRODUCT-TABLE article > section > ul li span {
	padding-left: 0.1em;
	color: var(--col-MPIU);
}
body > main#PRODUCT-TABLE article > section > small span {
	padding-right: 0.1em;
	color: var(--col-MPIU);
}
body > footer a {
	color: var(--col-TXT);
	text-decoration: none;
}
body > footer ul#NAV li {
	font-size: clamp(0.813rem, 0.777rem + 0.18vw, 0.875rem);
	text-align: right;
}
body > footer small#footer-COPYRIGHT {
	font-size: clamp(0.813rem, 0.777rem + 0.18vw, 0.875rem);
	letter-spacing: normal;
	text-align: right;
}

/*-- colorbar --*/
.pd--cho01,
.pd--cho01 a {
	color: #472913;
	background-color: #472913;
}
.pd--blk02,
.pd--blk02 a {
	color: #050301;
	background-color: #050301;
}
.pd--brw03,
.pd--brw03 a {
	color: #513314;
	background-color: #513314;
}
.pd--cml05,
.pd--cml05 a {
	color: #a35c1f;
	background-color: #a35c1f;
}
.pd--dbr07,
.pd--dbr07 a {
	color: #443322;
	background-color: #443322;
}
.pd--cog08,
.pd--cog08 a {
	color: #803a22;
	background-color: #803a22;
}
.pd--tab09,
.pd--tab09 a {
	color: #38221e;
	background-color: #38221e;
}
.pd--sin13,
.pd--sin13 a {
	color: #73371f;
	background-color: #73371f;
}
.pd--prg14,
.pd--prg14 a {
	color: #591b37;
	background-color: #591b37;
}
.pd--gri18,
.pd--gri18 a {
	color: #5e593b;
	background-color: #5e593b;
}
.pd--npl19,
.pd--npl19 a {
	color: #d18b1b;
	background-color: #d18b1b;
}
.pd--blch20,
.pd--blch20 a {
	color: #1b517a;
	background-color: #1b517a;
}
.pd--red21,
.pd--red21 a {
	color: #a51013;
	background-color: #a51013;
}
.pd--blu22,
.pd--blu22 a {
	color: #1b517a;
	background-color: #1b517a;
}
.pd--lbr23,
.pd--lbr23 a {
	color: #bd853a;
	background-color: #bd853a;
}
.pd--org24,
.pd--org24 a {
	color: #e8662a;
	background-color: #e8662a;
}
.pd--moc25,
.pd--moc25 a {
	color: #8c471f;
	background-color: #8c471f;
}
.pd--ctg30,
.pd--ctg30 a {
	color: #402111;
	background-color: #402111;
}
.pd--ots32,
.pd--ots32 a {
	color: #08415e;
	background-color: #08415e;
}
.pd--nvpp33,
.pd--nvpp33 a {
	color: #283752;
	background-color: #283752;
}
.pd--rspp34,
.pd--rspp34 a {
	color: #d15f5b;
	background-color: #d15f5b;
}
.pd--olv39,
.pd--olv39 a {
	color: #525025;
	background-color: #525025;
}
.pd--nvy40,
.pd--nvy40 a {
	color: #283752;
	background-color: #283752;
}
.pd--ocn41,
.pd--ocn41 a {
	color: #0a5b5b;
	background-color: #0a5b5b;
}
.pd--ros43,
.pd--ros43 a {
	color: #d15f5b;
	background-color: #d15f5b;
}
.pd--kha45,
.pd--kha45 a {
	color: #59522d;
	background-color: #59522d;
}
.pd--Brs46,
.pd--Brs46 a {
	color: #850000;
	background-color: #850000;
}
.pd--Boc47,
.pd--Boc47 a {
	color: #293752;
	background-color: #293752;
}
.pd--Bbo48,
.pd--Bbo48 a {
	color: #2f3320;
	background-color: #2f3320;
}
.pd--Bcg49,
.pd--Bcg49 a {
	color: #803a22;
	background-color: #803a22;
}
.pd--Lrd61,
.pd--Lrd61 a {
	color: #a51013;
	background-color: #a51013;
}
.pd--ppl63,
.pd--ppl63 a {
	color: #591b37;
	background-color: #591b37;
}
.pd--Bdb67,
.pd--Bdb67 a {
	color: #443322;
	background-color: #443322;
}
.pd--grn68,
.pd--grn68 a {
	color: #4c5e47;
	background-color: #4c5e47;
}
.pd--Qcm83,
.pd--Qcm83 a {
	color: #a35c1f;
	background-color: #a35c1f;
}
.pd--Qch84,
.pd--Qch84 a {
	color: #472913;
	background-color: #472913;
}
.pd--Qye85,
.pd--Qye85 a {
	color: #fabc37;
	background-color: #fabc37;
}
.pd--Qrd86,
.pd--Qrd86 a {
	color: #a51013;
	background-color: #a51013;
}
.pd--Qgn87,
.pd--Qgn87 a {
	color: #4c5e47;
	background-color: #4c5e47;
}
.pd--Qnv88,
.pd--Qnv88 a {
	color: #283752;
	background-color: #283752;
}
.pd--Qbk89,
.pd--Qbk89 a {
	color: black;
	background-color: black;
}
.pd--Bgn90,
.pd--Bgn90 a {
	color: #364d2f;
	background-color: #364d2f;
}
.pd--Bbg91,
.pd--Bbg91 a {
	color: #3d1f1f;
	background-color: #3d1f1f;
}
.pd--bgd92,
.pd--bgd92 a {
	color: #3d1f1f;
	background-color: #3d1f1f;
}
.pd--wht04,
.pd--wht04 a {
	background-color: #fefcf7;
	border-color: #fefcf7 !important;
}
.pd--beg15,
.pd--beg15 a {
	background-color: #debe8c;
	border-color: #debe8c !important;
}
.pd--tan26,
.pd--tan26 a {
	background-color: #debe8c;
	border-color: #debe8c !important;
}
.pd--ntr27,
.pd--ntr27 a {
	background-color: #f3f1ec;
	border-color: #f3f1ec !important;
}
.pd--bon38,
.pd--bon38 a {
	background-color: #cc9a5c;
	border-color: #cc9a5c !important;
}
.pd--none00,
.pd--none00 a {
	background-color: var(--col-SLV);
	border-color: var(--col-SLV) !important;
}
.pd--tbbe16 {
	background: linear-gradient(45deg, #38221e 0%, #38221e 50%, #cc9a5c 50%, #cc9a5c 100%);
}
.pd--tbbe16 a {
	border-image: linear-gradient(90deg, #38221e 0%, #38221e 50%, #cc9a5c 50%, #cc9a5c 100%) !important;
	border-image-slice: 1 !important;
}
.pd--tbch17 {
	background: linear-gradient(45deg, #38221e 0%, #38221e 50%, #472913 50%, #472913 100%);
}
.pd--tbch17 a {
	border-image: linear-gradient(90deg, #38221e 0%, #38221e 50%, #472913 50%, #472913 100%) !important;
	border-image-slice: 1 !important;
}
.pd--01 {
	background: linear-gradient(55deg, #a51013 0%, #a51013 35%, #debe8c 35%, #debe8c 65%, #1b517a 65%, #1b517a 100%);
}
.pd--01 a {
	border-image: linear-gradient(90deg, #a51013 0%, #a51013 33%, #debe8c 33%, #debe8c 66%, #1b517a 66%, #1b517a 100%) !important;
	border-image-slice: 1 !important;
}
.pd--02 {
	background: linear-gradient(55deg, #050301 0%, #050301 35%, #38221e 35%, #38221e 65%, #debe8c 65%, #debe8c 100%);
}
.pd--02 a {
	border-image: linear-gradient(90deg, #050301 0%, #050301 33%, #38221e 33%, #38221e 66%, #debe8c 66%, #debe8c 100%) !important;
	border-image-slice: 1 !important;
}
.pd--03 {
	background: linear-gradient(55deg, #803a22 0%, #803a22 35%, #d18b1b 35%, #d18b1b 65%, #4c5e47 65%, #4c5e47 100%);
}
.pd--03 a {
	border-image: linear-gradient(90deg, #803a22 0%, #803a22 33%, #d18b1b 33%, #d18b1b 66%, #4c5e47 66%, #4c5e47 100%) !important;
	border-image-slice: 1 !important;
}
.pd--04 {
	background: linear-gradient(55deg, #a51013 0%, #a51013 35%, #debe8c 35%, #debe8c 65%, #1b517a 65%, #1b517a 100%);
}
.pd--04 a {
	border-image: linear-gradient(90deg, #a51013 0%, #a51013 33%, #debe8c 33%, #debe8c 66%, #1b517a 66%, #1b517a 100%) !important;
	border-image-slice: 1 !important;
}
.pd--05 {
	background: linear-gradient(55deg, #050301 0%, #050301 35%, #38221e 35%, #38221e 65%, #debe8c 65%, #debe8c 100%);
}
.pd--05 a {
	border-image: linear-gradient(90deg, #050301 0%, #050301 33%, #38221e 33%, #38221e 66%, #debe8c 66%, #debe8c 100%) !important;
	border-image-slice: 1 !important;
}
.pd--06 {
	background: linear-gradient(55deg, #803a22 0%, #803a22 35%, #d18b1b 35%, #d18b1b 65%, #4c5e47 65%, #4c5e47 100%);
}
.pd--06 a {
	border-image: linear-gradient(90deg, #803a22 0%, #803a22 33%, #d18b1b 33%, #d18b1b 66%, #4c5e47 66%, #4c5e47 100%) !important;
	border-image-slice: 1 !important;
}
.pd--07 {
	background: linear-gradient(55deg, #a51013 0%, #a51013 35%, #debe8c 35%, #debe8c 65%, #1b517a 65%, #1b517a 100%);
}
.pd--07 a {
	border-image: linear-gradient(90deg, #a51013 0%, #a51013 33%, #debe8c 33%, #debe8c 66%, #1b517a 66%, #1b517a 100%) !important;
	border-image-slice: 1 !important;
}
.pd--08 {
	background: linear-gradient(55deg, #803a22 0%, #803a22 35%, #38221e 35%, #38221e 65%, #debe8c 65%, #debe8c 100%);
}
.pd--08 a {
	border-image: linear-gradient(90deg, #803a22 0%, #803a22 33%, #38221e 33%, #38221e 66%, #debe8c 66%, #debe8c 100%) !important;
	border-image-slice: 1 !important;
}
.pd--09 {
	background: linear-gradient(55deg, #d18b1b 0%, #d18b1b 35%, #debe8c 35%, #debe8c 65%, #4c5e47 65%, #4c5e47 100%);
}
.pd--09 a {
	border-image: linear-gradient(90deg, #d18b1b 0%, #d18b1b 33%, #debe8c 33%, #debe8c 66%, #4c5e47 66%, #4c5e47 100%) !important;
	border-image-slice: 1 !important;
}

/*--Contact Form 7--*/
body > main#CONTACT form.wpcf7-form {
	display: grid;
	gap: var(--section-blank-max);
	margin: var(--article-blank) auto 0;
} 
body > main#CONTACT form.wpcf7-form > div > * {
	font-weight: 300;
}
body > main#CONTACT form.wpcf7-form > div:not(.send) > p {
	display: grid;
	gap: 5px 0;
}
@media screen and (min-width: 800px) {
	body > main#CONTACT form.wpcf7-form > div:not(.send) > p {
		grid-template-columns: 25% 1fr;
	}
}
body > main#CONTACT form.wpcf7-form > div label {
	font-size: clamp(0.875rem, 0.839rem + 0.18vw, 0.938rem);
}
body > main#CONTACT form.wpcf7-form > div :is(input, select, textarea) {
	background: var(--col-SNW);
	border: 1px solid var(--col-ART);
	padding: 5px 8px;
	color: var(--col-BLK);
	font-size: clamp(0.938rem, 0.776rem + 0.69vw, 1rem);
	letter-spacing: 0.035rem;
}
body > main#CONTACT form.wpcf7-form > div textarea {
	width: 100%;
}
body > main#CONTACT form.wpcf7-form > div .wpcf7-form-control::-webkit-input-placeholder,
body > main#CONTACT form.wpcf7-form > div .wpcf7-form-contro::placeholder {
	color: var(--col-ASH);
}
body > main#CONTACT form.wpcf7-form .wpcf7-not-valid-tip {
	padding: 3px;
	color: var(--col-MPIU);
	font-size: clamp(0.813rem, 0.777rem + 0.18vw, 0.875rem);
}
body > main#CONTACT form.wpcf7-form .screen-reader-response {
	display: none;
}
body > main#CONTACT form.wpcf7-form > aside {
	margin: 0 auto;
}
body > main#CONTACT form.wpcf7-form > aside > p {
	margin-top: var(--section-blank-min);
}
body > main#CONTACT form.wpcf7-form > aside ul {
	display: grid;
	gap: 10px 0;
	margin-top: var(--section-blank-min);
	padding-left: clamp(10px, 5px + 1.59vw, 24px);
}
body > main#CONTACT form.wpcf7-form > div.send {
	display: grid;
	place-items: center;
	padding-top: var(--section-blank-max);
}
body > main#CONTACT form.wpcf7-form > div.send input.wpcf7-submit {
	padding: var(--section-blank-min) var(--section-blank-max);
	font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
	font-weight: 500;
	letter-spacing: 0.075rem;
	line-height: 1;
	color: var(--col-SNW);
	background: var(--col-MPIU);
	border-radius: 2px;
	box-shadow: 0 3px 5px -1px rgba(0,0,0,0.1);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
body > main#CONTACT form.wpcf7-form > div.send .wpcf7-spinner {
	display: block;
	margin: 5px auto 0;
}
body > main#CONTACT div.wpcf7 form.wpcf7-form .wpcf7-response-output {
	border-width: 1px;
}


.wpcf7 .ajax-loader {
	order: -1;
	margin: 5px;
}

/*--common--*/
.screen-reader-text {
	position: absolute !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}