@charset 'UTF-8';

/*

    Base

*/

/*  color  */
:root {
	--main-color: #123f80;
	--dark-color: #0b2a5c;
	--accent-color: #d40000;
	--success-color: #1f8a4c;
	--warning-color: #ed6e00;
	--link-color: #1691d0;
	--price-color: #0f3b76;
	--sale-price-color: #d40000;
	--light-color: #f4f7fb;
	--border: #dedede;
}

/*  webkit  */
body {
	-webkit-text-size-adjust: 100%;
}
a {
	-webkit-tap-highlight-color: rgba(255,255,255,0.4);
}
img {
	-webkit-touch-callout: none;
}
input[type=text], input[type=password], select, textarea, button {
	max-width: 100%;
	-webkit-appearance: none;
	border-radius: 0;
}

/*  font  */
html { font-size: 8px;}
@media screen and (min-width: 768px) { html { font-size: 10px;}}
body {
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #222222;
	background-color: #ffffff;
}
a {
	color: inherit;
	transition: all 0.1s linear;
}
a:hover { opacity: 0.7;}

/*  size  */
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem;}
h2 { font-size: 2.0rem;}
h3 { font-size: 1.6rem;}

/*  common  */
.global ul,
.global li,
.global p,
.main ul:not(div.text-block ul),
.main li:not(div.text-block li),
.sidebar ul,
.sidebar li {
	margin: 0;
	list-style: none;
}
ul li, ol li {
	margin-left: 0;
}
.global a,
.main a,
.sidebar a {
	text-decoration: none;
}
div.wrapper {
	margin: 0 15px;
}
@media screen and (min-width: 768px) {
	div.wrapper {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 20px;
	}
	div.wrapper.narrow {
		max-width: 800px;
	}
}

/*  max width (iframe keeps its height attribute, e.g. Google Maps embeds)  */
body img {
	max-width: 100%;
	height: auto;
}
body iframe {
	max-width: 100%;
}

/*  icon  */
svg.sprite {
	display: none;
}
svg.icon {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/*  button  */
.button {
	display: inline-block;
	padding: 0.9em 2.4em;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	background-color: var(--main-color);
	border: 1px var(--main-color) solid;
	cursor: pointer;
}
.button.small  { padding: 0.7em 1.6em; font-size: 1.3rem;}
.button.xsmall { padding: 0.5em 1.2em; font-size: 1.2rem;}
.button.large  { padding: 1.1em 3.2em; font-size: 1.7rem;}
.button.strong { background-color: var(--success-color); border-color: var(--success-color);}
.button.light {
	color: var(--main-color);
	background-color: #ffffff;
}

/*  scroll lock while the menu is open  */
body.menuopen {
	overflow: hidden;
}

/*  visually hidden label  */
#arrivals div.carousel button.prev span,
#arrivals div.carousel button.next span,
#arrivals button.favorite span,
nav.global p.close button span,
footer.global ul.sns span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/*  notes  */
.notes {
	font-size: 1.2rem;
	color: #666666;
}

/*  label  */
span.label {
	display: inline-block;
	min-width: 8em;
	padding: 0.3em 0.8em;
	font-size: 1.2rem;
	color: #ffffff;
	text-align: center;
	background-color: var(--main-color);
}
span.label.information { background-color: #2b6cb8;}
span.label.product     { background-color: #4b8fbe;}
span.label.campaign    { background-color: var(--accent-color);}
span.label.case        { background-color: #6b7f99;}

/*  badge  */
span.badge {
	display: inline-block;
	min-width: 1.8em;
	padding: 0.1em;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #ffffff;
	text-align: center;
	background-color: var(--accent-color);
	border-radius: 1em;
}




/*

    Header

*/
header.global {
	position: relative;
	border-bottom: 1px var(--border) solid;
}

/*  utility  */
header.global div.utility {
	color: #ffffff;
	background-color: var(--dark-color);
}
header.global div.utility div.wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.6rem;
}
header.global div.utility p.catch {
	font-size: 1.2rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
header.global div.utility ul.shortcut {
	display: none;
}
@media screen and (min-width: 768px) {
	header.global div.utility ul.shortcut {
		display: flex;
		flex-shrink: 0;
		gap: 2.4em;
		font-size: 1.3rem;
	}
}

/*  container  */
header.global div.container div.wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}
@media screen and (min-width: 768px) {
	header.global div.container div.wrapper {
		flex-wrap: nowrap;
		gap: 3rem;
		padding-top: 1.6rem;
		padding-bottom: 1.6rem;
	}
}

/*  sitetop  */
header.global h1.sitetop, header.global p.sitetop {
	flex: 1 1 auto;
	font-size: 1.2rem;
	font-weight: normal;
}
header.global h1.sitetop a, header.global p.sitetop a {
	display: block;
}
header.global h1.sitetop img, header.global p.sitetop img {
	width: 16rem;
}
@media screen and (min-width: 768px) {
	header.global h1.sitetop, header.global p.sitetop {
		flex: 0 0 auto;
	}
	header.global h1.sitetop img, header.global p.sitetop img {
		width: 19rem;
	}
}

/*  search  */
header.global form.search {
	display: flex;
	order: 3;
	flex: 1 1 100%;
	border: 2px var(--main-color) solid;
}
header.global form.search select {
	flex: 0 0 auto;
	max-width: 14rem;
	height: 4.2rem;
	margin: 0;
	padding: 0 2.4rem 0 1rem;
	font-family: inherit;
	font-size: 1.3rem;
	color: #333333;
	background-color: var(--light-color);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.6rem center;
	background-size: 1.4rem;
	border: none;
	border-right: 1px var(--border) solid;
}
header.global form.search input[type=text] {
	flex: 1 1 auto;
	height: 4.2rem;
	margin: 0;
	padding: 0 1rem;
	font-family: inherit;
	font-size: 1.4rem;
	border: none;
}
header.global form.search button {
	flex: 0 0 auto;
	width: 5.4rem;
	height: 4.2rem;
	font-size: 2rem;
	color: #ffffff;
	background-color: var(--main-color);
	border: none;
	cursor: pointer;
}
header.global form.search button span {
	display: none;
}
@media screen and (min-width: 768px) {
	header.global form.search {
		order: 0;
		flex: 0 1 46rem;
		margin-left: auto;
	}
}

/*  usermenu  */
header.global ul.usermenu {
	display: flex;
	flex-shrink: 0;
	gap: 1.6rem;
	margin-left: auto;
}
header.global ul.usermenu a {
	display: block;
	position: relative;
	min-width: 4.8rem;
	text-align: center;
	color: #333333;
}
header.global ul.usermenu svg.icon {
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0 auto 0.2em;
}
header.global ul.usermenu span {
	font-size: 1.1rem;
}
header.global ul.usermenu span.badge {
	position: absolute;
	top: -0.6rem;
	right: 0.4rem;
}
@media screen and (min-width: 768px) {
	header.global ul.usermenu {
		gap: 2.4rem;
		margin-left: 0;
	}
}

/*  menubutton  */
header.global div.menubutton {
	position: relative;
	flex-shrink: 0;
	width: 3.2rem;
	height: 2.6rem;
	cursor: pointer;
}
header.global div.menubutton span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--main-color);
	transition: all 0.2s linear;
}
header.global div.menubutton span:nth-child(1) { top: 0;}
header.global div.menubutton span:nth-child(2) { top: 50%; margin-top: -1px;}
header.global div.menubutton span:nth-child(3) { bottom: 0;}
header.global div.menubutton.open span:nth-child(1) { top: 50%; margin-top: -1px; transform: rotate(45deg);}
header.global div.menubutton.open span:nth-child(2) { opacity: 0;}
header.global div.menubutton.open span:nth-child(3) { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg);}
@media screen and (min-width: 768px) {
	header.global div.menubutton {
		display: none;
	}
}




/*

    Global navigation

*/
div.menuoverlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 900;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	background-color: rgba(0,0,0,0.45);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
div.menuoverlay.open {
	visibility: visible;
	opacity: 1;
}
nav.global {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	width: 82%;
	max-width: 32rem;
	height: 100%;
	padding-top: 6rem;
	overflow-y: auto;
	visibility: hidden;
	background-color: #ffffff;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	transform: translateX(100%);
	transition: transform 0.25s ease, visibility 0.25s ease;
}
nav.global.open {
	visibility: visible;
	transform: translateX(0);
}
nav.global p.close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	margin: 0;
}
nav.global p.close button {
	display: block;
	width: 4rem;
	height: 4rem;
	font-size: 2rem;
	color: #333333;
	background: none;
	border: none;
	cursor: pointer;
}
nav.global ul li {
	border-bottom: 1px var(--border) solid;
}
nav.global ul li a {
	display: block;
	padding: 1.4em 1.6em;
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--main-color);
}
nav.global ul li a.sale {
	color: var(--accent-color);
}
@media screen and (min-width: 768px) {
	div.menuoverlay {
		display: none;
	}
	nav.global p.close {
		display: none;
	}
	nav.global {
		position: static;
		width: auto;
		max-width: none;
		height: auto;
		padding-top: 0;
		overflow: visible;
		visibility: visible;
		box-shadow: none;
		border-bottom: 1px var(--border) solid;
		transform: none;
	}
	nav.global ul {
		display: flex;
		justify-content: flex-start;
		gap: 4em;
	}
	nav.global ul li.right { margin-left: auto;}
	nav.global ul li {
		border-bottom: none;
	}
	nav.global ul li a {
		display: block;
		padding: 1.4em 0.2em;
		font-size: 1.4rem;
		border-bottom: 3px transparent solid;
	}
	nav.global ul li a:hover {
		opacity: 1;
		border-bottom-color: var(--main-color);
	}
	nav.global ul li a.sale:hover {
		border-bottom-color: var(--accent-color);
	}
}




/*

    Layout

*/
body > div.container {
	padding: 2rem 0 4rem;
}
body > div.container > div.wrapper {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
body > div.container div.main {
	min-width: 0;
}
@media screen and (min-width: 768px) {
	body > div.container {
		padding: 2.4rem 0 6rem;
	}
	body > div.container > div.wrapper {
		flex-direction: row;
		align-items: flex-start;
		gap: 3rem;
	}
	body > div.container aside.sidebar {
		order: 1;
		flex: 0 0 20rem;
	}
	body > div.container div.main {
		order: 2;
		flex: 1 1 auto;
	}
}




/*

    Sidebar

*/
aside.sidebar {
	order: 2;
}
aside.sidebar h2 {
	padding-left: 0.8em;
	font-size: 1.7rem;
	color: var(--main-color);
	border-left: 4px var(--main-color) solid;
}

/*  popular keywords  */
aside.sidebar section.popular {
	margin-bottom: 2.4rem;
}
aside.sidebar section.popular h2 {
	margin-bottom: 1rem;
}
aside.sidebar section.popular ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
aside.sidebar section.popular ul li a {
	display: block;
	padding: 0.35em 0.9em;
	font-size: 1.1rem;
	color: #333333;
	background-color: #ffffff;
	border: 1px var(--border) solid;
	border-radius: 999px;
}
aside.sidebar section.popular ul li a:hover {
	opacity: 1;
	color: var(--main-color);
	border-color: var(--main-color);
	background-color: var(--light-color);
}
aside.sidebar section.refine {
	margin-top: 2.4rem;
}
aside.sidebar section.refine h3 {
	padding-bottom: 0.6em;
	font-size: 1.4rem;
	border-bottom: 1px var(--border) solid;
}
aside.sidebar section.refine ul li {
	border-bottom: 1px #eeeeee solid;
}
aside.sidebar section.refine ul li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	padding: 0.75em 0.2em;
	font-size: 1.3rem;
	color: #333333;
}
aside.sidebar section.refine ul li a:hover {
	opacity: 1;
	background-color: #f5f5f5;
}
aside.sidebar section.refine ul li span.count {
	flex-shrink: 0;
	font-size: 1.2rem;
	color: #999999;
}
aside.sidebar section.refine ul li.disabled {
	opacity: 0.35;
}
aside.sidebar section.refine ul li.disabled a {
	pointer-events: none;
}
aside.sidebar section.refine ul li.current a {
	font-weight: bold;
	color: var(--main-color);
}

/*  price slider  */
aside.sidebar section.refine.price form {
	margin-top: 1.2rem;
}
aside.sidebar section.refine.price p.value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--main-color);
}
aside.sidebar section.refine.price p.value span.separator {
	font-weight: normal;
	color: #999999;
}
aside.sidebar section.refine.price div.slider {
	position: relative;
	height: 2.4rem;
	margin: 0.6rem 0.9rem 0;
}
aside.sidebar section.refine.price div.slider div.track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0.4rem;
	margin-top: -0.2rem;
	background-color: #e4e4e4;
	border-radius: 999px;
}
aside.sidebar section.refine.price div.slider div.fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--main-color);
	border-radius: 999px;
}
aside.sidebar section.refine.price div.slider input[type=range] {
	position: absolute;
	top: 0;
	left: -0.9rem;
	width: calc(100% + 1.8rem);
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
aside.sidebar section.refine.price div.slider input[type=range].front {
	z-index: 2;
}
aside.sidebar section.refine.price div.slider input[type=range]:focus {
	outline: none;
}
aside.sidebar section.refine.price div.slider input[type=range]::-webkit-slider-thumb {
	width: 1.8rem;
	height: 1.8rem;
	background-color: #ffffff;
	border: 2px var(--main-color) solid;
	border-radius: 50%;
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}
aside.sidebar section.refine.price div.slider input[type=range]::-moz-range-thumb {
	width: 1.8rem;
	height: 1.8rem;
	background-color: #ffffff;
	border: 2px var(--main-color) solid;
	border-radius: 50%;
	cursor: grab;
	pointer-events: auto;
}
aside.sidebar section.refine.price div.slider input[type=range]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--light-color);
}
aside.sidebar section.refine.price div.slider input[type=range]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var(--light-color);
}
aside.sidebar section.refine.price p.submit {
	margin: 0.8em 0 0;
}
aside.sidebar section.refine.price button {
	width: 100%;
	padding: 0.8em;
	font-family: inherit;
	font-size: 1.3rem;
	color: #333333;
	background-color: #ffffff;
	border: 1px var(--border) solid;
	cursor: pointer;
}
aside.sidebar section.refine.price button:hover {
	color: var(--main-color);
	border-color: var(--main-color);
	background-color: var(--light-color);
}

/*  keyword  */
aside.sidebar section.keyword {
	margin-top: 2.8rem;
}
aside.sidebar section.keyword h3 {
	font-size: 1.4rem;
}
aside.sidebar section.keyword form {
	margin-top: 0.8em;
}
aside.sidebar section.keyword input[type=text] {
	width: 100%;
	height: 4rem;
	margin: 0;
	padding: 0 1rem;
	font-family: inherit;
	font-size: 1.4rem;
}
aside.sidebar section.keyword p.submit {
	margin: 1em 0 0;
}
aside.sidebar section.keyword button {
	width: 100%;
	padding: 1em;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: bold;
	color: #ffffff;
	background-color: var(--main-color);
	border: none;
	cursor: pointer;
}
aside.sidebar section.keyword button span.count {
	font-size: 1.2rem;
	font-weight: normal;
}



/*  sidebanner  */
aside.sidebar div.sidebanner {
	display: none;
}
@media screen and (min-width: 768px) {
	aside.sidebar div.sidebanner {
		display: block;
		margin-top: 2.8rem;
	}
	aside.sidebar div.sidebanner p {
		margin: 0 0 1.2rem;
	}
	aside.sidebar div.sidebanner img {
		display: block;
		width: 100%;
	}
}




/*

    Main column blocks

*/
div.main > * + * {
	margin-top: 3.6rem;
}
@media screen and (min-width: 768px) {
	div.main > * + * {
		margin-top: 5rem;
	}
}




/*

    Subpage common

*/

/*  breadcrumbs  */
nav.breadcrumbs {
	margin: 1.6rem 0 0;
	font-size: 1.2rem;
	color: #666666;
}
nav.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
nav.breadcrumbs ol li:not(:first-child):before {
	content: '\203a';
	margin: 0 0.6em;
	color: #999999;
}
nav.breadcrumbs ol li a {
	color: var(--link-color);
}

/*  page heading  */
div.main h1.page {
	margin-top: 1.6rem;
	padding-bottom: 0.7em;
	font-size: 2rem;
	border-bottom: 2px #333333 solid;
}
@media screen and (min-width: 768px) {
	div.main h1.page {
		font-size: 2.4rem;
	}
}

/*  subpage section heading  */
div.main section h3:not(div.text-block h3) {
	margin-top: 2rem;
	padding-left: 0.7em;
	font-size: 1.6rem;
	border-left: 4px var(--main-color) solid;
}

/*  text block  */
:where(div.main div.text-block) p {
	margin: 1em 0;
	line-height: 1.9;
}

/*  form parts  */
div.main form.entrance input[type=text],
div.main form.entrance input[type=email],
div.main form.entrance input[type=tel],
div.main form.entrance input[type=password],
div.main form.entrance textarea,
div.main form input[type=text],
div.main form input[type=email],
div.main form input[type=tel],
div.main form input[type=password],
div.main form textarea {
	width: 100%;
	padding: 0.7em 1em;
	font-family: inherit;
	font-size: 1.4rem;
	border: 1px #cccccc solid;
	box-sizing: border-box;
}

/*  buttons (base .button rules live in the Base section)  */
.button.dark {
	color: #ffffff;
	background-color: #111111;
	border-color: #111111;
}
.button.wide {
	display: block;
	width: 100%;
	max-width: 46rem;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

/*  notes  */
div.main .notes {
	font-size: 1.2rem;
	color: #666666;
}

/*  labels  */
span.label.requirement {
	display: inline-block;
	min-width: 0;
	margin-right: 0.5em;
	padding: 0.1em 1em;
	font-size: 1.1rem;
	font-weight: bold;
	color: #ffffff;
	background-color: var(--accent-color);
}
span.label.optional {
	display: inline-block;
	min-width: 0;
	margin-right: 0.5em;
	padding: 0.1em 1em;
	font-size: 1.1rem;
	color: #666666;
	background-color: #eeeeee;
}




/*

    Main visual

*/
#toppage-mv {
	position: relative;
	overflow: hidden;
	background-color: var(--light-color);
}
#toppage-mv div.slider {
	position: relative;
	overflow: hidden;
}
#toppage-mv ul.main {
	position: relative;
}
#toppage-mv ul.main li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.6s linear;
}
#toppage-mv ul.main li.current {
	position: relative;
	opacity: 1;
	z-index: 1;
}
#toppage-mv ul.main li a,
#toppage-mv ul.main li img {
	display: block;
	width: 100%;
}
#toppage-mv div.nav {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	position: absolute;
	right: 0;
	bottom: 1.2rem;
	left: 0;
	z-index: 2;
}
#toppage-mv div.nav button {
	width: 1rem;
	height: 1rem;
	padding: 0;
	background-color: rgba(255,255,255,0.6);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}
#toppage-mv div.nav button.current {
	background-color: #ffffff;
}
#toppage-mv div.nav button span {
	display: none;
}
@media screen and (min-width: 768px) {
	#toppage-mv ul.main li img {
		aspect-ratio: 14 / 5;
		object-fit: cover;
		object-position: center;
	}
}

/*  thumbnails  */
#toppage-mv div.thumbnails {
	overflow: hidden;
	margin-top: 0.8rem;
}
#toppage-mv div.thumbnails ul {
	display: flex;
	gap: 0.8rem;
	transition: transform 0.6s ease;
}
#toppage-mv div.thumbnails ul li {
	flex: 0 0 calc(50% - 0.8rem);
}
#toppage-mv div.thumbnails ul li button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 2px transparent solid;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.1s linear;
}
#toppage-mv div.thumbnails ul li button:hover {
	opacity: 0.8;
}
#toppage-mv div.thumbnails ul li.current button {
	border-color: var(--main-color);
	opacity: 1;
}
#toppage-mv div.thumbnails ul li button img {
	display: block;
	width: 100%;
	aspect-ratio: 14 / 5;
	object-fit: cover;
	object-position: center;
}

/*

    Section heading

*/
div.main section h2:not(div.text-block h2) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: 0.7em;
	font-size: 1.8rem;
	border-bottom: 2px #333333 solid;
}
div.main section h2 a.more {
	font-size: 1.3rem;
	font-weight: normal;
	color: #555555;
	white-space: nowrap;
}
div.main section h2 a.more svg.icon {
	margin-left: 0.4em;
	stroke-width: 2;
	color: #999999;
}
@media screen and (min-width: 768px) {
	div.main section h2:not(div.text-block h2) {
		font-size: 2rem;
	}
}




/*

    Hero banners

*/
div.main ul.banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}
div.main ul.banners a,
div.main ul.banners img {
	display: block;
	width: 100%;
}
@media screen and (min-width: 768px) {
	div.main ul.banners {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

/*  featured banners  */
#featured ul.banners {
	margin-top: 1.8rem;
	grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px) {
	#featured ul.banners {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.6rem;
	}
}




/*

    Arrivals

*/
#arrivals div.carousel {
	position: relative;
	margin-top: 1.8rem;
}
#arrivals ul.main {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: 1.2rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
#arrivals ul.main::-webkit-scrollbar {
	display: none;
}
#arrivals ul.main li {
	display: flex;
	flex-direction: column;
	border: 1px var(--border) solid;
	scroll-snap-align: start;
}

/*  thumbnail  */
#arrivals span.thumbnail {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #ffffff;
}
#arrivals span.thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#arrivals span.label {
	position: absolute;
	top: 0.6rem;
	left: 0;
	min-width: 0;
	padding: 0.3em 0.9em;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}
#arrivals span.label.new  { background-color: var(--main-color);}
#arrivals span.label.sale { background-color: var(--accent-color);}
#arrivals button.favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	font-size: 2rem;
	color: #bbbbbb;
	background: none;
	border: none;
	cursor: pointer;
}
#arrivals button.favorite:hover {
	color: var(--accent-color);
}
#arrivals button.favorite svg.icon {
	fill: none;
	stroke-width: 1.6;
}
#arrivals button.favorite.on {
	color: var(--accent-color);
}
#arrivals button.favorite.on svg.icon {
	fill: currentColor;
}

/*  detail  */
#arrivals ul.main li a {
	display: block;
	padding: 1.2rem 1.2rem 0;
}
#arrivals span.maker {
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: #999999;
}
#arrivals span.name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 4.5em;
	margin-top: 0.3em;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5;
}
#arrivals span.spec {
	display: block;
	margin-top: 0.4em;
	font-size: 1.2rem;
	color: #666666;
}
#arrivals p.price {
	min-height: 4.9rem;
	margin: 0.8em 0 0;
	padding: 0 1.2rem 1.4rem;
	line-height: 1.4;
}
#arrivals ul.main li p.price {
	margin-top: auto;
}
#arrivals span.off {
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--accent-color);
	background-color: #fdecec;
}
#arrivals span.was {
	font-size: 1.2rem;
	color: #999999;
	text-decoration: line-through;
}
#arrivals span.now {
	display: block;
	margin-top: 0.2em;
	font-size: 2rem;
	font-weight: bold;
	color: var(--price-color);
}
#arrivals p.price.sale span.now {
	color: var(--sale-price-color);
}
#arrivals span.now span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}
/*  carousel nav  */
#arrivals div.carousel button.prev,
#arrivals div.carousel button.next {
	display: none;
}
@media screen and (min-width: 768px) {
	#arrivals ul.main {
		grid-auto-columns: calc((100% - 6.4rem) / 5);
		gap: 1.6rem;
		scroll-snap-type: none;
	}
	#arrivals div.carousel button.prev,
	#arrivals div.carousel button.next {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 12rem;
		z-index: 3;
		width: 4rem;
		height: 4rem;
		font-size: 2rem;
		color: #333333;
		background-color: #ffffff;
		border: 1px var(--border) solid;
		border-radius: 50%;
		box-shadow: 0 2px 10px rgba(0,0,0,0.18);
		cursor: pointer;
	}
	#arrivals div.carousel button.prev { left: -2rem;}
	#arrivals div.carousel button.next { right: -2rem;}
	#arrivals div.carousel button.prev svg.icon { transform: rotate(180deg);}
}




/*

    Pickup (usage / industry)

*/
ul.pickup {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem;
	margin-top: 1.8rem;
}
ul.pickup span.photo {
	display: block;
	background-color: #f7f7f7;
}
ul.pickup span.photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
ul.pickup span.name {
	display: block;
	margin-top: 0.8em;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 768px) {
	ul.pickup {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}




/*

    Ranking

*/
#ranking ul.tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2rem;
	width: fit-content;
	margin: 1.6rem auto 0;
	padding: 0.3rem;
	background-color: #e5e5e5;
	border-radius: 999px;
}
#ranking ul.tab button {
	padding: 0.6em 1.5em;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: bold;
	color: #777777;
	background: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
#ranking ul.tab button:hover {
	color: #333333;
}
#ranking ul.tab button.current {
	color: #ffffff;
	background-color: #000000;
}
#ranking ol.main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem;
	margin-top: 3.2rem;
	padding: 0;
}
#ranking ol.main li {
	position: relative;
}
#ranking ol.main li a {
	display: block;
}
#ranking span.rank {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 3rem;
	height: 3rem;
	font-size: 1.6rem;
	font-weight: bold;
	font-style: italic;
	color: #ffffff;
	background-color: #b7c9dd;
}
#ranking li:nth-child(1) span.rank { background-color: #d4b038;}
#ranking li:nth-child(2) span.rank { background-color: #a8a9ad;}
#ranking li:nth-child(3) span.rank { background-color: #b87234;}
#ranking span.thumbnail {
	display: block;
	background-color: #ffffff;
}
#ranking span.thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
#ranking span.name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 4.5em;
	margin-top: 0.9em;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5;
}
#ranking span.spec {
	display: block;
	margin-top: 0.4em;
	font-size: 1.2rem;
	color: #666666;
}
#ranking span.price {
	display: block;
	margin-top: 0.5em;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--price-color);
}
#ranking span.price.sale {
	color: var(--sale-price-color);
}
#ranking span.price span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}
@media screen and (min-width: 768px) {
	#ranking ol.main {
		grid-template-columns: repeat(5, 1fr);
		gap: 2rem;
	}
}




/*

    News

*/
#news ul.main {
	margin-top: 1.6rem;
	border-top: 1px var(--border) solid;
}
#news ul.main li {
	border-bottom: 1px var(--border) solid;
}
#news ul.main li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em 1.6em;
	padding: 1.4em 1em;
}
#news span.date {
	flex-shrink: 0;
	font-size: 1.3rem;
	color: #666666;
}
#news span.name {
	flex: 1 1 100%;
	font-size: 1.4rem;
	line-height: 1.6;
}
@media screen and (min-width: 768px) {
	#news ul.main li a {
		flex-wrap: nowrap;
		padding: 1.5em 2em;
	}
	#news span.name {
		flex: 1 1 auto;
	}
}




/*

    Company

*/
#company div.detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2.4rem;
}
#company p.photo {
	margin: 0;
	background-color: #f7f7f7;
}
#company p.photo img {
	display: block;
	width: 100%;
	aspect-ratio: 12 / 7;
	object-fit: cover;
}
#company p.lead {
	margin: 0;
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 1.5;
}
#company p.lead em {
	font-style: normal;
	color: var(--main-color);
}
#company div.text p {
	margin: 1.2em 0 0;
	font-size: 1.3rem;
	line-height: 2;
	color: #444444;
}
#company p.more {
	margin-top: 1.8em;
}
@media screen and (min-width: 768px) {
	#company div.detail {
		grid-template-columns: 1fr 1fr;
		gap: 4.8rem;
		align-items: center;
		margin-top: 3.2rem;
	}
	#company p.lead {
		font-size: 2.5rem;
	}
	#company div.text p {
		font-size: 1.4rem;
	}
}




/*

    Service

*/
#service ul.main {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 1.8rem;
}
#service ul.main li + li {
	border-top: 1px var(--border) solid;
}
#service ul.main li a {
	display: block;
	padding: 1.6rem 2rem;
}
#service ul.main li img {
	display: block;
	width: 100%;
}
@media screen and (min-width: 768px) {
	#service ul.main {
		grid-template-columns: repeat(3, 1fr);
		margin-top: 2.4rem;
	}
	#service ul.main li + li {
		border-top: none;
		border-left: 1px var(--border) solid;
	}
	#service ul.main li a {
		padding: 2rem 2.4rem;
	}
}




/*

    Column

*/
#column ul.main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.6rem 1.2rem;
	margin-top: 1.8rem;
}
#column span.photo {
	display: block;
	background-color: #f7f7f7;
}
#column span.photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
#column span.date {
	display: block;
	margin-top: 0.9em;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: #999999;
}
#column span.name {
	display: block;
	margin-top: 0.4em;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.6;
}
@media screen and (min-width: 768px) {
	#column ul.main {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
}






/*

    Footer

*/
footer.global {
	padding-top: 4rem;
	color: #ffffff;
	background-color: var(--dark-color);
}
footer.global div.wrapper {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
}
footer.global a {
	color: #ffffff;
}

/*  sitetop  */
footer.global div.sitetop p.logo img {
	width: 18rem;
}
footer.global div.sitetop p.text {
	margin-top: 1.6em;
	font-size: 1.2rem;
	line-height: 1.8;
	color: #c6d4e8;
}
footer.global ul.sns {
	display: flex;
	gap: 1.4rem;
	margin-top: 2rem;
}
footer.global ul.sns svg.icon {
	width: 2.6rem;
	height: 2.6rem;
	fill: #ffffff;
	stroke: none;
}

/*  sitemap  */
footer.global nav.sitemap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.8rem 2rem;
}
footer.global nav.sitemap h2 {
	font-size: 1.5rem;
	font-weight: bold;
}
footer.global nav.sitemap ul {
	margin: 1.2em 0 0;
	padding: 0;
}
footer.global nav.sitemap li {
	margin: 0;
	list-style: none;
}
footer.global nav.sitemap li + li {
	margin-top: 0.9em;
}
footer.global nav.sitemap li a {
	font-size: 1.3rem;
	color: #c6d4e8;
}

/*  license  */
footer.global p.license {
	margin: 3.2rem 0 0;
	font-size: 1.2rem;
	color: #c6d4e8;
}

/*  copyright  */
footer.global p.copyright {
	max-width: 1360px;
	margin: 4rem auto 0;
	padding: 1.6em 1em;
	font-size: 1.2rem;
	text-align: center;
	color: #b6c6dd;
	border-top: 1px rgba(255,255,255,0.15) solid;
}
@media screen and (min-width: 768px) {
	footer.global {
		padding-top: 5.6rem;
	}
	footer.global div.wrapper {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 5rem;
		row-gap: 2.4rem;
	}
	footer.global div.sitetop {
		flex: 0 0 26rem;
	}
	footer.global nav.sitemap {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
		gap: 4em;
	}
	footer.global p.license {
		flex: 1 1 100%;
		margin-top: 0;
		text-align: right;
	}
}




/*

    Flash message

*/
#message {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 1em 15px;
	font-weight: bold;
	color: #ffffff;
}
#message.success { background-color: #689f38;}
#message.failure { background-color: var(--accent-color);}
#message p { margin: 0;}

/*  Template adjustments: arrivals thumbnail image wrapped in a link  */
#arrivals ul.main li span.thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
}


/*

    Article body (migrated legacy contents)

*/

:where(div.main) div.text-block h2 {
	margin: 3em 0 1.5em;
	padding: 0.5em 0.75em;
	background-color: #eeeeee;
	border-bottom: 1px #cccccc solid;
	border-left: 2px #0097cc solid;
	display: block;
}
:where(div.main) div.text-block h2:where(:first-child) { margin-top: 0;}
:where(div.main) div.text-block h3 {
	margin: 2em 0 1em;
	padding: 0.5em 0;
	border-bottom: 1px #cccccc solid;
}
:where(div.main div.text-block) ul,
:where(div.main div.text-block) ol { margin: 1em 0;}
:where(div.main div.text-block) ul { list-style: disc outside;}
:where(div.main div.text-block) ol { list-style: decimal outside;}
:where(div.main div.text-block) ul ul { list-style: circle outside;}
:where(div.main div.text-block) ul li,
:where(div.main div.text-block) ol li { margin-left: 1.25em;}
:where(div.main) div.text-block img {
	max-width: 100%;
	height: auto;
}
:where(div.main) div.text-block table { margin: 1em 0;}
:where(div.main) div.text-block table th,
:where(div.main) div.text-block table td {
	border: none;
	background: none;
	border-bottom: 1px #eeeeee solid;
}
:where(div.main) div.text-block .notes {
	color: #666666;
	font-size: smaller;
}
:where(div.main) div.text-block .em {
	margin: 1em 0;
	padding: 0.5em 1em;
	background-color: #eeeeee;
}
:where(div.main) div.text-block a.button {
	display: inline-block;
	padding: 0.25em 0.5em;
	border: 1px #333333 solid;
	background-color: #333333;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	cursor: pointer;
}
:where(div.main) div.text-block a.button.type2 {
	background-color: #ffffff;
	border-color: #333333;
	color: #333333;
}
:where(div.main) div.text-block a.button.type3 {
	padding: 0.25em 3em;
	background-color: transparent;
	color: #333333;
	border-radius: 3px;
}
:where(div.main) div.text-block a.button.small { font-size: 1.3rem;}
:where(div.main) div.text-block a.button.large { font-size: 1.8rem;}
:where(div.main) div.text-block div.index {
	margin: 1em 0;
	padding: 1em;
	border: 1px #cccccc solid;
	background-color: #eeeeee;
}
:where(div.main) div.text-block div.index:before {
	content: 'INDEX';
	display: block;
	font-family: 'Lato', sans-serif;
}
:where(div.main) div.text-block div.index ul { margin: 0.5em 0 0;}
:where(div.main) div.text-block div.index ul li {
	margin: 0;
	list-style: none;
}
:where(div.main) div.text-block div.index ul li.term { margin-left: 1em;}

/*

    Article pages (column / service / special / news / page singles)

*/

/*  no sidebar on article pages: block flow keeps legacy content harmless when
    stray closing tags in migrated HTML push elements out of div.main, and
    shields the skeleton from legacy .wrapper rules in article CSS  */
body.article > div.container > div.wrapper { display: block;}

/*  legacy font metrics (old site: body 13px/17px, h3 19px fixed)  */
:where(body.article) div.text-block { font-size: 1.625rem;}
:where(body.article div.text-block) h3 { font-size: 2.375rem;}
@media screen and (min-width: 768px) {
	:where(body.article) div.text-block { font-size: 1.7rem;}
	:where(body.article div.text-block) h3 { font-size: 1.9rem;}
	body.article div.main {
		max-width: 800px;
		margin-right: auto;
		margin-left: auto;
	}
}
:where(div.main) div.text-block div.index ul li {
	margin: 0.4em 0;
	line-height: 1.8;
	list-style: none;
}
:where(div.main) div.text-block div.index ul li a {
	color: var(--link-color);
	text-decoration: none;
}
:where(div.main) div.text-block div.index ul li a:hover { text-decoration: underline;}

/*  ranking tab panels  */
#ranking ol.main[hidden] { display: none;}

/*

    Full-width article (service LP pages with the 'wide' flag)

*/

body.article.wide > div.container > div.wrapper {
	max-width: none;
	margin: 0;
	padding: 0;
}

/*  legacy LP anchor nav assumed the old fixed header (top: 55px); stick to the viewport top here  */
body.article nav.anc { top: 0;}
body.article.wide div.main { max-width: none;}
body.article.wide div.main nav.breadcrumbs,
body.article.wide div.main h1.page,
body.article.wide div.main nav.buttons {
	margin-right: 15px;
	margin-left: 15px;
}
@media screen and (min-width: 768px) {
	body.article.wide div.main nav.breadcrumbs,
	body.article.wide div.main h1.page,
	body.article.wide div.main nav.buttons {
		max-width: 1360px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 20px;
		padding-left: 20px;
	}
}

/*

    Proxy signin bar (admin impersonation)

*/

div.proxybar {
	padding: 0.8em 15px;
	font-size: 1.3rem;
	color: #ffffff;
	text-align: center;
	background-color: #555555;
}
div.proxybar a {
	margin-left: 1.5em;
	color: #ffffff;
	text-decoration: underline;
}

/*

    Preview bar (unpublished article preview)

*/

div.previewbar {
	padding: 0.8em 15px;
	font-size: 1.3rem;
	color: #ffffff;
	text-align: center;
	background-color: var(--warning-color);
}



/*

    Page: cart

*/


/*

    Cart

*/
#cart div.cart {
	display: flex;
	flex-direction: column;
	gap: 2.8rem;
}

/*

    Item list

*/
#cart section.list ul.items {
	margin-top: 1.6rem;
	border-top: 1px var(--border) solid;
}
#cart section.list ul.items > li {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 1.4rem;
	padding: 1.6rem 0;
	border-bottom: 1px var(--border) solid;
}

/*  thumbnail  */
#cart a.thumbnail {
	display: block;
	flex: 0 0 9rem;
	align-self: flex-start;
	background-color: #ffffff;
}
#cart a.thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/*  detail  */
#cart div.detail {
	flex: 1 1 0;
	min-width: 0;
}
#cart p.name {
	margin: 0;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
}
#cart p.name a {
	color: #222222;
}
#cart ul.options {
	margin-top: 0.6em;
	font-size: 1.2rem;
	color: #666666;
}
#cart ul.options li + li {
	margin-top: 0.2em;
}
#cart p.price {
	margin: 0.8em 0 0;
	font-size: 1.3rem;
}
#cart p.price span.amount { font-weight: bold;}
#cart p.price span.tax {
	margin-left: 0.2em;
	font-size: 1.1rem;
	color: #666666;
}

/*  control  */
#cart div.control {
	display: flex;
	flex: 1 1 100%;
	align-items: center;
	gap: 1.6rem;
}
#cart p.quantity {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}
#cart p.quantity label {
	font-size: 1.2rem;
	color: #666666;
}
#cart p.quantity input {
	width: 6.4rem;
	padding: 0.5em 0.3em 0.5em 0.8em;
	font-family: inherit;
	font-size: 1.4rem;
	text-align: center;
	border: 1px #cccccc solid;
	box-sizing: border-box;
}
#cart p.subtotal {
	margin: 0 0 0 auto;
	font-size: 1.3rem;
}
#cart p.subtotal span.amount {
	margin-left: 0.2em;
	font-size: 1.7rem;
	font-weight: bold;
}
#cart p.remove {
	margin: 0;
}
#cart p.remove a {
	font-size: 1.2rem;
	color: #666666;
	text-decoration: underline;
}
#cart section.list p.notes {
	margin-top: 1.2em;
}

/*

    Order summary

*/
#cart section.summary {
	padding: 2rem 1.6rem 2.4rem;
	background-color: var(--light-color);
}
#cart section.summary h3 {
	margin-top: 0;
}
#cart section.summary dl {
	margin: 1.6rem 0 0;
}
#cart section.summary dl > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	padding: 0.8em 0;
	font-size: 1.4rem;
}
#cart section.summary dl > div + div {
	border-top: 1px var(--border) solid;
}
#cart section.summary dt {
	margin: 0;
}
#cart section.summary dd {
	margin: 0;
	font-weight: bold;
}
#cart section.summary div.delivery dd em {
	font-style: normal;
}
#cart section.summary div.total {
	border-top: 2px #333333 solid;
}
#cart section.summary div.total dt {
	font-weight: bold;
}
#cart section.summary div.total dt span.tax {
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}
#cart section.summary div.total dd {
	font-size: 2.2rem;
}

/*  actions  */
#cart p.proceed {
	margin: 2rem 0 0;
}
#cart p.continue {
	margin: 1.2rem 0 0;
}

/*  coupon banner  */
#cart p.coupon {
	margin: 1.8rem 0 0;
}
#cart p.coupon a {
	display: block;
}
#cart p.coupon img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: contain;
}

/*

    PC layout

*/
@media screen and (min-width: 768px) {
	#cart div.cart {
		flex-direction: row;
		align-items: flex-start;
		gap: 3.2rem;
	}
	#cart section.list {
		flex: 7 1 0;
		min-width: 0;
	}
	#cart section.summary {
		flex: 3 0 0;
		padding: 2.4rem 2rem 2.8rem;
	}
	#cart section.list ul.items > li {
		flex-wrap: nowrap;
		gap: 2rem;
		padding: 2rem 0;
	}
	#cart a.thumbnail {
		flex-basis: 12rem;
	}
	#cart div.control {
		flex: 0 0 17rem;
		flex-direction: column;
		align-items: flex-end;
		gap: 1.2rem;
	}
	#cart p.subtotal {
		margin-left: 0;
	}
}




/*

    Template adjustments (form controls)

*/

/*  remove submit styled as the design link  */
#cart p.remove button {
	padding: 0;
	font-family: inherit;
	font-size: 1.2rem;
	color: #666666;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
}



/*

    Page: checkout confirm

*/


/*

    Checkout common

*/
#checkout-confirm div.checkout {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  steps  */
#checkout-confirm div.checkout ol.steps {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#checkout-confirm div.checkout ol.steps li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	position: relative;
	font-size: 1.2rem;
	color: #999999;
}
#checkout-confirm div.checkout ol.steps li span.number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	background-color: #ffffff;
	border: 2px #cccccc solid;
	border-radius: 50%;
	box-sizing: border-box;
}
#checkout-confirm div.checkout ol.steps li:not(:first-child):before {
	content: '';
	position: absolute;
	top: 1.6rem;
	right: calc(50% + 2.4rem);
	left: calc(-50% + 2.4rem);
	height: 2px;
	background-color: #cccccc;
	transform: translateY(-50%);
}
#checkout-confirm div.checkout ol.steps li.done span.number,
#checkout-confirm div.checkout ol.steps li.current span.number {
	color: #ffffff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}
#checkout-confirm div.checkout ol.steps li.done:before,
#checkout-confirm div.checkout ol.steps li.current:before,
#checkout-confirm div.checkout ol.steps li.current + li:before {
	background-color: var(--main-color);
}
#checkout-confirm div.checkout ol.steps li.current + li span.number {
	color: var(--main-color);
	background-color: #ffffff;
	border-color: var(--main-color);
}
#checkout-confirm div.checkout ol.steps li.current span.name {
	font-weight: bold;
	color: var(--main-color);
}
@media screen and (min-width: 768px) {
	#checkout-confirm div.checkout ol.steps li {
		font-size: 1.4rem;
	}
	#checkout-confirm div.checkout ol.steps li span.number {
		width: 4rem;
		height: 4rem;
		font-size: 1.8rem;
	}
	#checkout-confirm div.checkout ol.steps li:not(:first-child):before {
		top: 2rem;
		right: calc(50% + 2.8rem);
		left: calc(-50% + 2.8rem);
	}
}

/*  actions  */
#checkout-confirm div.checkout div.actions {
	margin-top: 3.6rem;
	text-align: center;
}
#checkout-confirm div.checkout div.actions p {
	margin: 0;
}
#checkout-confirm div.checkout div.actions p + p {
	margin-top: 4.8rem;
}
#checkout-confirm div.checkout div.actions a.button.large {
	min-width: 28rem;
	box-sizing: border-box;
}




/*

    Sections

*/
#checkout-confirm div.checkout section {
	margin-top: 3.2rem;
}
#checkout-confirm div.checkout section h3 {
	margin-top: 0;
}
#checkout-confirm div.checkout div.heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
#checkout-confirm div.checkout div.heading p {
	margin: 0;
}




/*

    Order items

*/
#checkout-confirm section.items ul.main {
	margin-top: 0.8rem;
}
#checkout-confirm section.items ul.main li {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 0.2rem 1.6rem;
	align-items: center;
	padding: 1.6rem 0;
	border-bottom: 1px var(--border) solid;
}
#checkout-confirm section.items span.thumbnail {
	grid-row: 1 / span 3;
	background-color: #ffffff;
}
#checkout-confirm section.items span.thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
#checkout-confirm section.items span.name {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5;
}
#checkout-confirm section.items span.quantity {
	font-size: 1.2rem;
	color: #666666;
}
#checkout-confirm section.items span.price {
	font-size: 1.6rem;
	font-weight: bold;
}
#checkout-confirm section.items span.price span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}




/*

    Delivery address

*/
#checkout-confirm section.delivery dl {
	margin: 0.8rem 0 0;
}
#checkout-confirm section.delivery dl dt {
	padding: 1em 0 0;
	font-size: 1.2rem;
	font-weight: bold;
	color: #666666;
}
#checkout-confirm section.delivery dl dd {
	margin: 0.2em 0 0;
	padding-bottom: 1em;
	border-bottom: 1px #eeeeee solid;
}
@media screen and (min-width: 768px) {
	#checkout-confirm section.delivery dl {
		display: grid;
		grid-template-columns: 16rem 1fr;
	}
	#checkout-confirm section.delivery dl dt {
		padding: 1em 0;
		font-size: 1.4rem;
		border-bottom: 1px #eeeeee solid;
	}
	#checkout-confirm section.delivery dl dd {
		margin: 0;
		padding: 1em 0;
	}
}




/*

    Payment method

*/
#checkout-confirm section.payment p.method {
	margin: 1.2rem 0 0;
	font-weight: bold;
}
#checkout-confirm section.payment p.notes {
	margin: 0.4em 0 0;
}




/*

    Total

*/
#checkout-confirm section.total dl {
	display: grid;
	grid-template-columns: 1fr auto;
	margin: 0.8rem 0 0;
}
#checkout-confirm section.total dl dt {
	padding: 1em 0;
	border-bottom: 1px #eeeeee solid;
}
#checkout-confirm section.total dl dd {
	margin: 0;
	padding: 1em 0;
	text-align: right;
	border-bottom: 1px #eeeeee solid;
}
#checkout-confirm section.total dl dt.grand {
	font-size: 1.6rem;
	font-weight: bold;
	border-bottom: none;
}
#checkout-confirm section.total dl dd.grand {
	font-size: 2rem;
	font-weight: bold;
	border-bottom: none;
}




/*

    Returns

*/
#checkout-confirm section.returns p.text {
	margin: 1.2rem 0 0;
	font-size: 1.3rem;
	line-height: 1.9;
}




/*

    Template adjustments (server form parts)

*/

/*  option lines inside item name  */
#checkout-confirm section.items span.name span.options {
	display: block;
	margin-top: 0.2em;
	font-size: 1.2rem;
	font-weight: normal;
	color: #666666;
}

/*  submit button in actions  */
#checkout-confirm div.checkout div.actions button.button.large {
	min-width: 28rem;
	font-family: inherit;
	box-sizing: border-box;
}

/*  Amazon Pay button  */
#checkout-confirm div.checkout div.actions div.amazonpay {
	max-width: 30rem;
	margin: 0 auto;
}
#checkout-confirm div.checkout div.actions div.amazonpay + p {
	margin-top: 4.8rem;
}



/*

    Page: checkout delivery

*/


/*

    Checkout common

*/
#checkout-delivery div.checkout {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  steps  */
#checkout-delivery div.checkout ol.steps {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#checkout-delivery div.checkout ol.steps li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	position: relative;
	font-size: 1.2rem;
	color: #999999;
}
#checkout-delivery div.checkout ol.steps li span.number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	background-color: #ffffff;
	border: 2px #cccccc solid;
	border-radius: 50%;
	box-sizing: border-box;
}
#checkout-delivery div.checkout ol.steps li:not(:first-child):before {
	content: '';
	position: absolute;
	top: 1.6rem;
	right: calc(50% + 2.4rem);
	left: calc(-50% + 2.4rem);
	height: 2px;
	background-color: #cccccc;
	transform: translateY(-50%);
}
#checkout-delivery div.checkout ol.steps li.done span.number,
#checkout-delivery div.checkout ol.steps li.current span.number {
	color: #ffffff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}
#checkout-delivery div.checkout ol.steps li.done:before,
#checkout-delivery div.checkout ol.steps li.current:before,
#checkout-delivery div.checkout ol.steps li.current + li:before {
	background-color: var(--main-color);
}
#checkout-delivery div.checkout ol.steps li.current + li span.number {
	color: var(--main-color);
	background-color: #ffffff;
	border-color: var(--main-color);
}
#checkout-delivery div.checkout ol.steps li.current span.name {
	font-weight: bold;
	color: var(--main-color);
}
@media screen and (min-width: 768px) {
	#checkout-delivery div.checkout ol.steps li {
		font-size: 1.4rem;
	}
	#checkout-delivery div.checkout ol.steps li span.number {
		width: 4rem;
		height: 4rem;
		font-size: 1.8rem;
	}
	#checkout-delivery div.checkout ol.steps li:not(:first-child):before {
		top: 2rem;
		right: calc(50% + 2.8rem);
		left: calc(-50% + 2.8rem);
	}
}

/*  actions  */
#checkout-delivery div.checkout div.actions {
	margin-top: 3.6rem;
	text-align: center;
}
#checkout-delivery div.checkout div.actions p {
	margin: 0;
}
#checkout-delivery div.checkout div.actions p + p {
	margin-top: 4.8rem;
}
#checkout-delivery div.checkout div.actions a.button.large {
	min-width: 28rem;
	box-sizing: border-box;
}




/*

    Delivery form

*/
#checkout-delivery form.delivery {
	margin-top: 2.8rem;
}
#checkout-delivery form.delivery dl.fields {
	margin: 0;
}
#checkout-delivery form.delivery dl.fields dt {
	margin-top: 2rem;
	font-size: 1.4rem;
	font-weight: bold;
}
#checkout-delivery form.delivery dl.fields dd {
	margin: 0.6em 0 0;
}

/*  name pair  */
#checkout-delivery form.delivery dd.pair {
	display: flex;
	gap: 1.2rem;
}

/*  postcode  */
#checkout-delivery form.delivery dd.postcode {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
#checkout-delivery form.delivery dd.postcode input[type=text] {
	width: 8rem;
	text-align: center;
}
#checkout-delivery form.delivery dd.postcode input[name=postcode2] {
	width: 10rem;
}

/*  select  */
#checkout-delivery form.delivery select {
	min-width: 18rem;
	padding: 0.7em 2.8em 0.7em 1em;
	font-family: inherit;
	font-size: 1.4rem;
	color: #222222;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 1.4rem;
	border: 1px #cccccc solid;
}




/*

    Template adjustments (server form parts)

*/

/*  zip field width (server field name is zip2)  */
#checkout-delivery form.delivery dd.postcode input[name=zip2] {
	width: 10rem;
}

/*  submit button in actions  */
#checkout-delivery div.checkout div.actions button.button.large {
	min-width: 28rem;
	font-family: inherit;
	box-sizing: border-box;
}

/*  saved destinations  */
#checkout-delivery ul.destinations {
	margin: 1.2rem 0 2.4rem;
	border-top: 1px var(--border) solid;
}
#checkout-delivery ul.destinations li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 0;
	border-bottom: 1px var(--border) solid;
}
#checkout-delivery ul.destinations li p.address {
	margin: 0;
	line-height: 1.6;
}
#checkout-delivery ul.destinations li p.address span.supplementary {
	font-size: 1.2rem;
	color: #666666;
}
#checkout-delivery ul.destinations li button.button {
	flex-shrink: 0;
	font-family: inherit;
}



/*

    Page: checkout finish

*/


/*

    Checkout common

*/
#checkout-finish div.checkout {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  steps  */
#checkout-finish div.checkout ol.steps {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#checkout-finish div.checkout ol.steps li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	position: relative;
	font-size: 1.2rem;
	color: #999999;
}
#checkout-finish div.checkout ol.steps li span.number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	background-color: #ffffff;
	border: 2px #cccccc solid;
	border-radius: 50%;
	box-sizing: border-box;
}
#checkout-finish div.checkout ol.steps li:not(:first-child):before {
	content: '';
	position: absolute;
	top: 1.6rem;
	right: calc(50% + 2.4rem);
	left: calc(-50% + 2.4rem);
	height: 2px;
	background-color: #cccccc;
	transform: translateY(-50%);
}
#checkout-finish div.checkout ol.steps li.done span.number,
#checkout-finish div.checkout ol.steps li.current span.number {
	color: #ffffff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}
#checkout-finish div.checkout ol.steps li.done:before,
#checkout-finish div.checkout ol.steps li.current:before,
#checkout-finish div.checkout ol.steps li.current + li:before {
	background-color: var(--main-color);
}
#checkout-finish div.checkout ol.steps li.current + li span.number {
	color: var(--main-color);
	background-color: #ffffff;
	border-color: var(--main-color);
}
#checkout-finish div.checkout ol.steps li.current span.name {
	font-weight: bold;
	color: var(--main-color);
}
@media screen and (min-width: 768px) {
	#checkout-finish div.checkout ol.steps li {
		font-size: 1.4rem;
	}
	#checkout-finish div.checkout ol.steps li span.number {
		width: 4rem;
		height: 4rem;
		font-size: 1.8rem;
	}
	#checkout-finish div.checkout ol.steps li:not(:first-child):before {
		top: 2rem;
		right: calc(50% + 2.8rem);
		left: calc(-50% + 2.8rem);
	}
}

/*  actions  */
#checkout-finish div.checkout div.actions {
	margin-top: 3.6rem;
	text-align: center;
}
#checkout-finish div.checkout div.actions p {
	margin: 0;
}
#checkout-finish div.checkout div.actions a.button.large {
	min-width: 28rem;
	box-sizing: border-box;
}




/*

    Complete message

*/
#checkout-finish div.message {
	margin-top: 3.2rem;
	text-align: center;
}
#checkout-finish div.message p {
	margin: 1.4em 0 0;
	font-size: 1.4rem;
	line-height: 1.9;
}
#checkout-finish div.message p.lead {
	margin-top: 0;
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--main-color);
}
#checkout-finish div.message p.number {
	display: inline-block;
	margin-top: 1.4em;
	padding: 0.8em 2.4em;
	font-size: 1.4rem;
	background-color: var(--light-color);
	border: 1px var(--border) solid;
}
#checkout-finish div.message p.number strong {
	margin-left: 0.5em;
	font-size: 1.8rem;
}
#checkout-finish div.message a {
	color: var(--link-color);
	text-decoration: underline;
}
@media screen and (min-width: 768px) {
	#checkout-finish div.message {
		margin-top: 4rem;
	}
	#checkout-finish div.message p.lead {
		font-size: 2.2rem;
	}
}




/*

    Template adjustments

*/

/*  secondary action  */
#checkout-finish div.checkout div.actions p + p {
	margin-top: 1.6rem;
}



/*

    Page: checkout payment

*/


/*

    Checkout common

*/
#checkout-payment div.checkout {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  steps  */
#checkout-payment div.checkout ol.steps {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#checkout-payment div.checkout ol.steps li {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0.8em;
	position: relative;
	font-size: 1.2rem;
	color: #999999;
}
#checkout-payment div.checkout ol.steps li span.number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	font-size: 1.5rem;
	font-weight: bold;
	background-color: #ffffff;
	border: 2px #cccccc solid;
	border-radius: 50%;
	box-sizing: border-box;
}
#checkout-payment div.checkout ol.steps li:not(:first-child):before {
	content: '';
	position: absolute;
	top: 1.6rem;
	right: calc(50% + 2.4rem);
	left: calc(-50% + 2.4rem);
	height: 2px;
	background-color: #cccccc;
	transform: translateY(-50%);
}
#checkout-payment div.checkout ol.steps li.done span.number,
#checkout-payment div.checkout ol.steps li.current span.number {
	color: #ffffff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}
#checkout-payment div.checkout ol.steps li.done:before,
#checkout-payment div.checkout ol.steps li.current:before,
#checkout-payment div.checkout ol.steps li.current + li:before {
	background-color: var(--main-color);
}
#checkout-payment div.checkout ol.steps li.current + li span.number {
	color: var(--main-color);
	background-color: #ffffff;
	border-color: var(--main-color);
}
#checkout-payment div.checkout ol.steps li.current span.name {
	font-weight: bold;
	color: var(--main-color);
}
@media screen and (min-width: 768px) {
	#checkout-payment div.checkout ol.steps li {
		font-size: 1.4rem;
	}
	#checkout-payment div.checkout ol.steps li span.number {
		width: 4rem;
		height: 4rem;
		font-size: 1.8rem;
	}
	#checkout-payment div.checkout ol.steps li:not(:first-child):before {
		top: 2rem;
		right: calc(50% + 2.8rem);
		left: calc(-50% + 2.8rem);
	}
}

/*  actions  */
#checkout-payment div.checkout div.actions {
	margin-top: 3.6rem;
	text-align: center;
}
#checkout-payment div.checkout div.actions p {
	margin: 0;
}
#checkout-payment div.checkout div.actions p + p {
	margin-top: 4.8rem;
}
#checkout-payment div.checkout div.actions a.button.large {
	min-width: 28rem;
	box-sizing: border-box;
}




/*

    Payment methods

*/
#checkout-payment form.payment section {
	margin-top: 1.2rem;
}
#checkout-payment section.methods ul.main {
	margin-top: 1.6rem;
}
#checkout-payment section.methods ul.main li {
	border: 1px var(--border) solid;
}
#checkout-payment section.methods ul.main li + li {
	margin-top: 1.2rem;
}
#checkout-payment section.methods label.name {
	display: block;
	padding: 1.1em 1.2em;
	font-size: 1.5rem;
	font-weight: bold;
	cursor: pointer;
}
#checkout-payment section.methods label.name input {
	margin-right: 0.8em;
	accent-color: var(--main-color);
}
#checkout-payment section.methods div.detail {
	display: none;
	padding: 1.6rem;
	background-color: var(--light-color);
	border-top: 1px var(--border) solid;
}
#checkout-payment section.methods ul.main li:has(input:checked) {
	border-color: var(--main-color);
}
#checkout-payment section.methods ul.main li:has(input:checked) div.detail {
	display: block;
}

/*  detail text  */
#checkout-payment section.methods div.detail p {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.8;
}
#checkout-payment section.methods div.detail p + p {
	margin-top: 0.8em;
}
#checkout-payment section.methods div.detail p.account {
	padding: 0.8em 1em;
	font-weight: bold;
	background-color: #ffffff;
	border: 1px var(--border) solid;
}

/*  card fields  */
#checkout-payment section.methods div.detail dl {
	margin: 0;
}
#checkout-payment section.methods div.detail dl dt {
	margin-top: 1.2rem;
	font-size: 1.3rem;
	font-weight: bold;
}
#checkout-payment section.methods div.detail dl dt:first-child {
	margin-top: 0;
}
#checkout-payment section.methods div.detail dl dd {
	margin: 0.4em 0 0;
}
#checkout-payment section.methods div.detail input[type=text] {
	max-width: 32rem;
	background-color: #ffffff;
}
#checkout-payment section.methods div.detail input.short {
	width: 10rem;
}
#checkout-payment section.methods dd.expiry {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
#checkout-payment section.methods dd.expiry select {
	padding: 0.6em 2.6em 0.6em 1em;
	font-family: inherit;
	font-size: 1.4rem;
	color: #222222;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 1.4rem;
	border: 1px #cccccc solid;
}
#checkout-payment section.methods dd.expiry span.separator {
	font-size: 1.3rem;
	color: #666666;
}




/*

    Coupon

*/
#checkout-payment section.coupon p {
	margin: 1.2rem 0 0;
}
#checkout-payment section.coupon input[type=text] {
	max-width: 40rem;
}




/*

    Membership appeal

*/
#checkout-payment div.membership {
	margin-top: 3.2rem;
	padding: 2rem 1.6rem;
	text-align: center;
	border: 2px var(--main-color) solid;
}
#checkout-payment div.membership p {
	margin: 0;
}
#checkout-payment div.membership p.heading {
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--main-color);
}
#checkout-payment div.membership p.lead {
	margin-top: 0.6em;
	font-weight: bold;
}
#checkout-payment div.membership p.register {
	margin-top: 1.2em;
	font-size: 1.3rem;
}
#checkout-payment div.membership p.register a {
	font-weight: bold;
	color: var(--link-color);
	text-decoration: underline;
}
@media screen and (min-width: 768px) {
	#checkout-payment div.membership {
		padding: 2.4rem 2rem;
	}
	#checkout-payment div.membership p.heading {
		font-size: 2rem;
	}
}




/*

    Template adjustments (server form parts)

*/

/*  selected fallback for browsers without :has()  */
#checkout-payment section.methods ul.main li.selected {
	border-color: var(--main-color);
}
#checkout-payment section.methods ul.main li.selected div.detail {
	display: block;
}

/*  PAY.JP hosted card fields  */
#checkout-payment section.methods div.detail div.pj-element {
	max-width: 32rem;
	padding: 0.7em 1em;
	background-color: #ffffff;
	border: 1px #cccccc solid;
	box-sizing: border-box;
}
#checkout-payment section.methods div.detail div.pj-element.compact {
	max-width: 16rem;
}
#checkout-payment #payment-errors {
	margin: 0 0 0.8em;
	font-size: 1.3rem;
	color: var(--warning-color);
}
#checkout-payment #payment-errors:empty {
	display: none;
}

/*  card save checkbox  */
#checkout-payment section.methods div.detail dd.save label {
	font-size: 1.3rem;
	cursor: pointer;
}

/*  submit button in actions  */
#checkout-payment div.checkout div.actions button.button.large {
	min-width: 28rem;
	font-family: inherit;
	box-sizing: border-box;
}



/*

    Page: column

*/


/*

    Column list

*/

/*  lead  */
#column div.main p.lead {
	margin-top: 1.6rem;
	line-height: 1.8;
}

/*  result count  */
#column div.main p.count {
	margin-top: 1.6rem;
	text-align: right;
}

/*  card grid (base card rules live in style.css under #column)  */
#column div.main ul.main {
	margin-top: 1.2rem;
}
#column div.main ul.main li a {
	display: block;
}

/*  pager  */
#column nav.page {
	margin-top: 3.2rem;
}
#column nav.page ol {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#column nav.page ol li a,
#column nav.page ol li span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.6rem;
	height: 3.6rem;
	padding: 0 0.5em;
	font-size: 1.4rem;
	color: #333333;
	border: 1px var(--border) solid;
	box-sizing: border-box;
}
#column nav.page ol li span.current {
	font-weight: bold;
	color: #ffffff;
	border-color: var(--main-color);
	background-color: var(--main-color);
}
#column nav.page ol li span.prev {
	color: #bbbbbb;
}
@media screen and (min-width: 768px) {
	#column nav.page {
		margin-top: 4rem;
	}
	#column nav.page ol li a,
	#column nav.page ol li span {
		min-width: 4rem;
		height: 4rem;
	}
}

/*  pager compat (server side pagination puts state classes on li)  */
#column nav.page ol li.current span {
	font-weight: bold;
	color: #ffffff;
	border-color: var(--main-color);
	background-color: var(--main-color);
}
#column nav.page ol li.disabled span {
	color: #bbbbbb;
}

/*

    Column single

*/

/*  article width (match old site content width: 1020px)  */
@media screen and (min-width: 768px) {
	#column.article div.main {
		max-width: 1020px;
	}
}

/*  published date  */
#column div.main p.published {
	margin-top: 1.2rem;
	text-align: right;
}

/*  eyecatch  */
#column div.main p.eyecatch {
	margin-top: 1.6rem;
}
#column div.main p.eyecatch img {
	display: block;
	width: 100%;
}

/*  table of contents (blockeditor nav block)  */
#column div.main div.text-block nav ul {
	margin: 0;
}
#column div.main div.text-block nav ul li {
	margin-left: 0;
	list-style: none;
}



/*

    Page: contact

*/


/*

    Contact form

*/
#contact div.main {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  lead  */
#contact div.contact div.text-block {
	margin-top: 2rem;
}

/*  form  */
#contact div.contact form {
	margin-top: 2.8rem;
}
#contact div.contact form dl {
	margin: 0;
}
#contact div.contact form dl dt {
	margin-top: 1.8em;
	font-weight: bold;
}
#contact div.contact form dl dt:first-child {
	margin-top: 0;
}
#contact div.contact form dl dd {
	margin: 0.6em 0 0;
}

/*  submit  */
#contact div.contact form p.submit {
	margin: 2.8em 0 0;
	text-align: center;
}

/*  notes  */
#contact div.contact ul.notes {
	margin-top: 2.4rem;
	padding-top: 1.6rem;
	border-top: 1px var(--border) solid;
}
#contact div.contact ul.notes li {
	margin-top: 0.5em;
	padding-left: 1.2em;
	text-indent: -1.2em;
	line-height: 1.7;
}
#contact div.contact ul.notes li:first-child {
	margin-top: 0;
}

@media screen and (min-width: 768px) {
	#contact div.contact form dl {
		display: grid;
		grid-template-columns: 22rem 1fr;
		align-items: start;
		gap: 2rem 2.4rem;
	}
	#contact div.contact form dl dt {
		margin-top: 0;
		padding-top: 0.7em;
	}
	#contact div.contact form dl dd {
		margin: 0;
	}
}



/*

    Page: faq

*/


/*

    FAQ

*/

/*  narrow readable column  */
#faq div.main {
	width: 100%;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  lead  */
#faq div.main p.lead {
	margin: 1.6em 0 0;
	line-height: 1.9;
}

/*  qa item  */
#faq div.main section details {
	margin-top: 1.2rem;
	border: 1px var(--border) solid;
}
#faq div.main section summary {
	display: flex;
	gap: 0.8em;
	position: relative;
	padding: 1.4rem 4rem 1.4rem 1.4rem;
	font-weight: bold;
	line-height: 1.6;
	cursor: pointer;
	list-style: none;
}
#faq div.main section summary::-webkit-details-marker {
	display: none;
}
#faq div.main section summary:hover {
	background-color: var(--light-color);
}
#faq div.main section summary::before {
	content: 'Q.';
	flex-shrink: 0;
	color: var(--main-color);
}

/*  open close indicator  */
#faq div.main section summary::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1.6rem;
	width: 0.8rem;
	height: 0.8rem;
	margin-top: -0.7rem;
	border-right: 2px #999999 solid;
	border-bottom: 2px #999999 solid;
	transform: rotate(45deg);
	transition: transform 0.15s linear;
}
#faq div.main section details[open] summary {
	background-color: var(--light-color);
	border-bottom: 1px var(--border) solid;
}
#faq div.main section details[open] summary::after {
	margin-top: -0.2rem;
	transform: rotate(-135deg);
}

/*  answer  */
#faq div.main section div.answer {
	position: relative;
	padding: 1.4rem 1.6rem 1.4rem 4rem;
}
#faq div.main section div.answer::before {
	content: 'A.';
	position: absolute;
	top: 1.4rem;
	left: 1.4rem;
	font-weight: bold;
	line-height: 1.8;
	color: var(--accent-color);
}
#faq div.main section div.answer p {
	margin: 0;
	line-height: 1.8;
}
#faq div.main section div.answer p + p {
	margin-top: 0.8em;
}
#faq div.main section div.answer ol {
	margin: 0;
	padding-left: 1.4em;
}
#faq div.main section div.answer ol li {
	line-height: 1.8;
}
#faq div.main section div.answer ol li + li {
	margin-top: 0.8em;
}
#faq div.main section div.answer a {
	color: var(--link-color);
	text-decoration: underline;
}

/*  contact  */
#faq div.main section.contact {
	margin-top: 3.2rem;
	padding: 2rem 1.6rem 2.4rem;
	border: 1px var(--border) solid;
}
#faq div.main section.contact h3 {
	margin-top: 0;
	padding-left: 0;
	border-left: none;
}
#faq div.main section.contact p {
	margin: 1em 0 0;
	line-height: 1.9;
}
#faq div.main section.contact p.action {
	margin-top: 1.6em;
	text-align: center;
}

@media screen and (min-width: 768px) {
	#faq div.main section details {
		margin-top: 1.6rem;
	}
	#faq div.main section summary {
		padding: 1.6rem 4.4rem 1.6rem 1.6rem;
		font-size: 1.5rem;
	}
	#faq div.main section div.answer {
		padding: 1.6rem 2rem 1.6rem 4.4rem;
	}
	#faq div.main section div.answer::before {
		top: 1.6rem;
		left: 1.6rem;
	}
}



/*

    Page: guide

*/


/*

    Guide

*/

/*  narrow layout  */
#guide div.main {
	width: 100%;
	max-width: 80rem;
	margin-right: auto;
	margin-left: auto;
}

/*  table of contents  */
#guide nav.contents {
	margin-top: 2.4rem;
}
#guide nav.contents ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}
#guide nav.contents ul li a.button {
	font-weight: normal;
}
#guide nav.contents ul li a.button:after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.6em;
	vertical-align: 0.2em;
	border-right: 1px currentColor solid;
	border-bottom: 1px currentColor solid;
	transform: rotate(45deg);
}

/*  sections  */
#guide div.main section {
	scroll-margin-top: 2rem;
}
#guide div.main section h3 {
	margin-top: 2.4rem;
}
#guide div.main section div.text-block p {
	margin: 0.8em 0 0;
}

/*  bank account box  */
#guide div.bank {
	margin: 1.2em 0;
	padding: 1.2em 1.6em;
	background-color: var(--light-color);
	border: 1px var(--border) solid;
}
#guide div.bank p {
	margin: 0;
	line-height: 2;
}

/*  warranty exclusion list  */
#guide ul.exclusion {
	margin: 1em 0 0;
	padding-left: 1.6em;
}
#guide ul.exclusion li {
	margin: 0.5em 0;
	line-height: 1.7;
	list-style: disc;
}

/*  contact button  */
#guide p.contact {
	margin: 1.6em 0 0;
}

@media screen and (min-width: 768px) {
	#guide nav.contents ul {
		gap: 1rem;
	}
	#guide div.main section {
		scroll-margin-top: 3rem;
	}
}



/*

    Page: item

*/


/*

    Product layout

*/
#item div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem;
	margin-top: 2rem;
}
@media screen and (min-width: 768px) {
	#item div.product {
		grid-template-columns: 42% 1fr;
		gap: 4rem;
		align-items: start;
	}
}

/*  gallery  */
#item div.gallery div.slider {
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
	border: 1px var(--border) solid;
}
#item div.gallery ul.main {
	position: relative;
}
#item div.gallery ul.main li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: opacity 0.4s linear;
}
#item div.gallery ul.main li.current {
	position: relative;
	opacity: 1;
	z-index: 1;
}
#item div.gallery ul.main li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
#item div.gallery div.slider button.prev,
#item div.gallery div.slider button.next {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 4rem;
	height: 4rem;
	padding: 0;
	font-size: 2rem;
	color: #333333;
	background-color: #ffffff;
	border: 1px var(--border) solid;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.18);
	cursor: pointer;
	transform: translateY(-50%);
}
#item div.gallery div.slider button.prev { left: 0.8rem;}
#item div.gallery div.slider button.next { right: 0.8rem;}
#item div.gallery div.slider button.prev svg.icon { transform: rotate(180deg);}
#item div.gallery div.slider button.prev span,
#item div.gallery div.slider button.next span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/*  thumbnails  */
#item div.gallery div.thumbnails {
	margin-top: 0.8rem;
}
#item div.gallery div.thumbnails ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.8rem;
}
#item div.gallery div.thumbnails ul li button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	border: 2px transparent solid;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.1s linear;
}
#item div.gallery div.thumbnails ul li button:hover {
	opacity: 0.8;
}
#item div.gallery div.thumbnails ul li.current button {
	border-color: var(--main-color);
	opacity: 1;
}
#item div.gallery div.thumbnails ul li button img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
@media screen and (min-width: 768px) {
	#item div.gallery div.thumbnails ul {
		grid-template-columns: repeat(5, 1fr);
	}
}

/*  name  */
#item div.detail h1 {
	font-size: 1.8rem;
	line-height: 1.5;
}
@media screen and (min-width: 768px) {
	#item div.detail h1 { font-size: 2.2rem;}
}

/*  tags  */
#item div.detail p.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.2rem 0 0;
}
#item div.detail p.tags span.label {
	min-width: 0;
	padding: 0.3em 1em;
}

/*  price  */
#item div.detail p.price {
	margin: 1.4rem 0 0;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.3;
	color: var(--price-color);
}
#item div.detail p.price.sale {
	color: var(--sale-price-color);
}
#item div.detail p.price span.off {
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
	font-size: 1.4rem;
	font-weight: bold;
	vertical-align: middle;
	color: var(--accent-color);
	background-color: #fdecec;
}
#item div.detail p.price span.was {
	margin-right: 0.4em;
	font-size: 1.5rem;
	font-weight: normal;
	vertical-align: middle;
	color: #999999;
	text-decoration: line-through;
}
#item div.detail p.price span.tax {
	margin-left: 0.2em;
	font-size: 1.3rem;
	font-weight: normal;
	color: #666666;
}

/*

    Order form

*/
#item form.order p.heading {
	margin: 2rem 0 0;
	font-size: 1.6rem;
	font-weight: bold;
}
#item form.order dl.options {
	margin: 0;
}
#item form.order dl.options dt {
	margin-top: 1.6rem;
	padding-bottom: 0.4em;
	font-size: 1.4rem;
	font-weight: bold;
	border-bottom: 1px var(--border) solid;
}
#item form.order dl.options dd {
	margin: 0.8rem 0 0;
}
#item form.order dl.options ul li + li {
	margin-top: 0.4rem;
}
#item form.order dl.options ul li label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.3em 0.2em;
	font-size: 1.4rem;
	cursor: pointer;
}
#item form.order dl.options input[type=radio] {
	flex-shrink: 0;
	margin: 0;
	accent-color: var(--main-color);
}
#item form.order dd.quantity input[type=number] {
	width: 4.5em;
	padding: 0.5em;
	font-family: inherit;
	font-size: 1.4rem;
	text-align: center;
	border: 1px #cccccc solid;
}

/*  submit  */
#item form.order p.submit {
	margin: 2.4rem 0 0;
}
#item form.order p.submit button {
	width: 100%;
	font-family: inherit;
}
#item form.order p.submit button svg.icon {
	margin-right: 0.5em;
	vertical-align: -0.15em;
}
@media screen and (min-width: 768px) {
	#item form.order p.submit button {
		width: auto;
		min-width: 32rem;
	}
}

/*  submit with coupon banner  */
#item form.order div.action {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 2.4rem;
}
#item form.order div.action p.submit {
	margin: 0;
}
#item form.order div.action p.submit button {
	display: block;
	width: 100%;
}
#item form.order p.coupon {
	margin: 0;
}
#item form.order p.coupon a {
	display: block;
}
#item form.order p.coupon img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 1;
	object-fit: contain;
}
@media screen and (min-width: 768px) {
	#item form.order div.action {
		flex-direction: row;
		align-items: flex-end;
		gap: 2rem;
	}
	#item form.order div.action p.submit {
		flex: 1 1 0;
		min-width: 0;
	}
	#item form.order div.action p.submit button {
		min-width: 0;
	}
	#item form.order div.action p.coupon {
		flex: 1 1 0;
		min-width: 0;
	}
}

/*

    Description

*/
#item section.description p {
	margin: 1em 0 0;
	line-height: 1.9;
}

/*

    Specification

*/
#item section.specification table {
	width: 100%;
	margin-top: 1.6rem;
	font-size: 1.4rem;
	border-collapse: collapse;
}
#item section.specification th,
#item section.specification td {
	padding: 0.9em 1em;
	text-align: left;
	vertical-align: top;
	border: 1px var(--border) solid;
}
#item section.specification th {
	width: 8em;
	font-weight: bold;
	white-space: nowrap;
	background-color: var(--light-color);
}
@media screen and (min-width: 768px) {
	#item section.specification th { width: 16em;}
}

/*

    Related items

*/
#item section.related ul.main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem;
	margin-top: 1.8rem;
}
#item section.related ul.main li {
	display: flex;
	flex-direction: column;
	border: 1px var(--border) solid;
}
#item section.related span.thumbnail {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #ffffff;
}
#item section.related span.thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#item section.related button.favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	font-size: 2rem;
	color: #bbbbbb;
	background: none;
	border: none;
	cursor: pointer;
}
#item section.related button.favorite:hover {
	color: var(--accent-color);
}
#item section.related button.favorite span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}
#item section.related ul.main li a {
	display: block;
	padding: 1.2rem 1.2rem 0;
}
#item section.related span.maker {
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: #999999;
}
#item section.related span.name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 4.5em;
	margin-top: 0.3em;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5;
}
#item section.related span.spec {
	display: block;
	margin-top: 0.4em;
	font-size: 1.2rem;
	color: #666666;
}
#item section.related p.price {
	margin: 0.8em 0 0;
	padding: 0 1.2rem 1.4rem;
	line-height: 1.4;
}
#item section.related ul.main li p.price {
	margin-top: auto;
}
#item section.related span.now {
	display: block;
	margin-top: 0.2em;
	font-size: 2rem;
	font-weight: bold;
	color: var(--price-color);
}
#item section.related p.price.sale span.now {
	color: var(--sale-price-color);
}
#item section.related span.now span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}
@media screen and (min-width: 768px) {
	#item section.related ul.main {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}
}

/*  Template adjustments: favorite button on the gallery photo  */
#item div.gallery div.slider button.favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	z-index: 2;
	width: 4rem;
	height: 4rem;
	padding: 0;
	font-size: 2.4rem;
	color: #bbbbbb;
	background: none;
	border: none;
	cursor: pointer;
}
#item div.gallery div.slider button.favorite:hover {
	color: var(--accent-color);
}
#item div.gallery div.slider button.favorite.on {
	color: var(--accent-color);
}
#item div.gallery div.slider button.favorite.on svg.icon {
	fill: currentColor;
}
#item div.gallery div.slider button.favorite span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}



/*

    Page: items

*/


/*

    Items
    Shared by the product list pages (body.itemlist): items / feature

*/

/*  toolbar  */
body.itemlist div.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-top: 2rem;
}
body.itemlist div.toolbar p.count {
	margin: 0;
	font-size: 1.3rem;
}
body.itemlist div.toolbar p.count em {
	margin: 0 0.15em;
	font-size: 1.8rem;
	font-weight: bold;
	font-style: normal;
	color: var(--main-color);
}
body.itemlist div.toolbar form.sort {
	display: flex;
	align-items: center;
	gap: 0.8em;
}
body.itemlist div.toolbar form.sort label {
	font-size: 1.2rem;
	color: #666666;
}
body.itemlist div.toolbar form.sort select {
	height: 3.6rem;
	padding: 0 2.8rem 0 1rem;
	font-family: inherit;
	font-size: 1.3rem;
	color: #333333;
	background-color: #ffffff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8rem center;
	background-size: 1.4rem;
	border: 1px var(--border) solid;
	cursor: pointer;
}

/*  product grid  */
body.itemlist ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem;
	margin-top: 1.6rem;
	padding: 0;
}
body.itemlist ul.products li {
	display: flex;
	flex-direction: column;
	border: 1px var(--border) solid;
}
@media screen and (min-width: 768px) {
	body.itemlist ul.products {
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem 1.6rem;
		margin-top: 2rem;
	}
}

/*  thumbnail  */
body.itemlist ul.products span.thumbnail {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: #ffffff;
}
body.itemlist ul.products span.thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
body.itemlist ul.products span.label {
	position: absolute;
	top: 0.6rem;
	left: 0;
	min-width: 0;
	padding: 0.3em 0.9em;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 0.05em;
}
body.itemlist ul.products span.label.new  { background-color: var(--main-color);}
body.itemlist ul.products span.label.sale { background-color: var(--accent-color);}
body.itemlist ul.products button.favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	width: 3.2rem;
	height: 3.2rem;
	padding: 0;
	font-size: 2rem;
	color: #bbbbbb;
	background: none;
	border: none;
	cursor: pointer;
}
body.itemlist ul.products button.favorite:hover {
	color: var(--accent-color);
}
body.itemlist ul.products button.favorite.on {
	color: var(--accent-color);
}
body.itemlist ul.products button.favorite.on svg.icon {
	fill: currentColor;
}
body.itemlist ul.products button.favorite span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/*  detail  */
body.itemlist ul.products li a {
	display: block;
	padding: 1.2rem 1.2rem 0;
}
body.itemlist ul.products span.maker {
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: #999999;
}
body.itemlist ul.products span.name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 4.5em;
	margin-top: 0.3em;
	font-size: 1.3rem;
	font-weight: bold;
	line-height: 1.5;
}
body.itemlist ul.products span.spec {
	display: block;
	margin-top: 0.4em;
	font-size: 1.2rem;
	color: #666666;
}
body.itemlist ul.products p.price {
	min-height: 4.9rem;
	margin: 0.8em 0 0;
	padding: 0 1.2rem 1.4rem;
	line-height: 1.4;
}
body.itemlist ul.products li p.price {
	margin-top: auto;
}
body.itemlist ul.products span.off {
	margin-right: 0.5em;
	padding: 0.1em 0.5em;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--accent-color);
	background-color: #fdecec;
}
body.itemlist ul.products span.was {
	font-size: 1.2rem;
	color: #999999;
	text-decoration: line-through;
}
body.itemlist ul.products span.now {
	display: block;
	margin-top: 0.2em;
	font-size: 2rem;
	font-weight: bold;
	color: var(--price-color);
}
body.itemlist ul.products p.price.sale span.now {
	color: var(--sale-price-color);
}
body.itemlist ul.products span.now span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}

/*  pager  */
body.itemlist nav.page {
	margin-top: 3.2rem;
}
body.itemlist nav.page ol {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.itemlist nav.page ol li {
	margin: 0;
}
body.itemlist nav.page a,
body.itemlist nav.page span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3.6rem;
	height: 3.6rem;
	padding: 0 0.5em;
	font-size: 1.4rem;
	color: #333333;
	text-decoration: none;
	border: 1px var(--border) solid;
}
body.itemlist nav.page a:hover {
	opacity: 1;
	color: var(--main-color);
	border-color: var(--main-color);
	background-color: var(--light-color);
}
body.itemlist nav.page li.current span {
	font-weight: bold;
	color: #ffffff;
	background-color: var(--main-color);
	border-color: var(--main-color);
}
body.itemlist nav.page li.disabled span {
	color: #bbbbbb;
}
@media screen and (min-width: 768px) {
	body.itemlist nav.page {
		margin-top: 4rem;
	}
}

/*  Template adjustments: thumbnail image wrapped in a link  */
body.itemlist ul.products span.thumbnail a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
}



/*

    Page: law

*/


/*

    Legal notice

*/

#law div.main {
	width: 100%;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

/*  legal table  */
#law dl.legal {
	margin: 0;
	border: 1px #cccccc solid;
	border-bottom: none;
	font-size: 1.4rem;
}
#law dl.legal div.row {
	border-bottom: 1px #cccccc solid;
}
#law dl.legal div.row dt {
	padding: 0.8em 1em;
	font-weight: bold;
	background-color: #f2f6fb;
}
#law dl.legal div.row dd {
	margin: 0;
	padding: 0.8em 1em;
	line-height: 1.8;
}

/*  lists in cells  */
#law dl.legal div.row dd ul.plain,
#law dl.legal div.row dd ul.payment {
	margin: 0;
	padding: 0;
	list-style: none;
}
#law dl.legal div.row dd ul.payment li:not(:first-child) {
	margin-top: 0.6em;
}
#law dl.legal div.row dd ul.payment li span.timing {
	display: block;
	padding-left: 1em;
	font-size: 1.2rem;
	color: #666666;
}
#law dl.legal div.row dd p.notes {
	margin: 0.6em 0 0;
}

@media screen and (min-width: 768px) {
	#law dl.legal div.row {
		display: grid;
		grid-template-columns: 22rem 1fr;
	}
	#law dl.legal div.row dt {
		padding: 1em 1.2em;
		border-right: 1px #cccccc solid;
	}
	#law dl.legal div.row dd {
		padding: 1em 1.4em;
	}
}



/*

    Page: login

*/


/*

    Login

*/

/*  form card  */
#login div.entry {
	max-width: 530px;
	margin-right: auto;
	margin-left: auto;
}
#login form.entrance {
	padding: 2.8rem 2rem 3.2rem;
	background-color: #ffffff;
	border: 1px var(--border) solid;
	box-sizing: border-box;
}
#login form.entrance h2 {
	font-size: 1.8rem;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#login form.entrance {
		padding: 4rem 4.8rem 4.4rem;
	}
	#login form.entrance h2 {
		font-size: 2rem;
	}
}

/*  fields  */
#login form.entrance dl {
	margin: 2.4rem 0 0;
}
#login form.entrance dt {
	font-size: 1.3rem;
	font-weight: bold;
}
#login form.entrance dd {
	margin: 0.5em 0 0;
}
#login form.entrance dd + dt {
	margin-top: 1.6em;
}

/*  password visibility toggle  */
#login span.password {
	display: block;
	position: relative;
}
#login span.password input {
	padding-right: 4rem;
}
#login span.password button.toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 4rem;
	height: 100%;
	padding: 0;
	font-size: 1.8rem;
	color: #999999;
	background: none;
	border: none;
	cursor: pointer;
}
#login span.password button.toggle span {
	display: inline-block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/*  remember  */
#login p.remember {
	margin: 1.6em 0 0;
	font-size: 1.4rem;
}
#login p.remember label {
	cursor: pointer;
}

/*  submit  */
#login p.submit {
	margin: 1.6em 0 0;
}
#login p.submit .button {
	font-family: inherit;
}

/*  help link  */
#login p.help {
	margin: 1.6em 0 0;
	font-size: 1.3rem;
	text-align: center;
}
#login p.help a {
	color: var(--link-color);
	text-decoration: underline;
}

/*  registration  */
#login div.register {
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 1px var(--border) solid;
}
#login div.register p.lead {
	margin: 0;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
}



/*

    Page: member

*/


/*

    Corporate member login

*/

/*  form card  */
#member div.entry {
	max-width: 530px;
	margin-right: auto;
	margin-left: auto;
}
#member form.entrance {
	padding: 2.8rem 2rem 3.2rem;
	background-color: #ffffff;
	border: 1px var(--border) solid;
	box-sizing: border-box;
}
#member form.entrance h2 {
	font-size: 1.8rem;
	text-align: center;
}
@media screen and (min-width: 768px) {
	#member form.entrance {
		padding: 4rem 4.8rem 4.4rem;
	}
	#member form.entrance h2 {
		font-size: 2rem;
	}
}

/*  fields  */
#member form.entrance dl {
	margin: 2.4rem 0 0;
}
#member form.entrance dt {
	font-size: 1.3rem;
	font-weight: bold;
}
#member form.entrance dd {
	margin: 0.5em 0 0;
}
#member form.entrance dd + dt {
	margin-top: 1.6em;
}

/*  submit  */
#member p.submit {
	margin: 2rem 0 0;
}
#member p.submit .button {
	font-family: inherit;
}



/*

    Page: mypage

*/


/*

    Mypage layout

*/
#mypage div.account {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	margin-top: 2.4rem;
}
@media screen and (min-width: 768px) {
	#mypage div.account {
		flex-direction: row;
		align-items: flex-start;
		gap: 3.6rem;
	}
}

/*

    Mypage navigation

*/
#mypage nav.menu ul {
	display: flex;
	gap: 0.8rem;
	padding-bottom: 0.4rem;
	overflow-x: auto;
}
#mypage nav.menu ul li {
	flex: 0 0 auto;
}
#mypage nav.menu ul li a {
	display: block;
	padding: 0.7em 1.2em;
	font-size: 1.3rem;
	color: #333333;
	white-space: nowrap;
	border: 1px var(--border) solid;
}
#mypage nav.menu ul li a.logout {
	color: #666666;
}
@media screen and (min-width: 768px) {
	#mypage nav.menu {
		flex: 0 0 22rem;
	}
	#mypage nav.menu ul {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0;
		overflow: visible;
		border: 1px var(--border) solid;
	}
	#mypage nav.menu ul li a {
		padding: 1em 1.4em;
		font-size: 1.4rem;
		border: none;
	}
	#mypage nav.menu ul li + li a {
		border-top: 1px var(--border) solid;
	}
	#mypage nav.menu ul li a:hover {
		opacity: 1;
		color: var(--main-color);
		background-color: var(--light-color);
	}
	#mypage nav.menu ul li a.logout {
		background-color: #fafafa;
	}
}

/*

    Main content

*/
#mypage div.content {
	flex: 1 1 auto;
	min-width: 0;
}
#mypage div.content section + section {
	margin-top: 3.6rem;
}
@media screen and (min-width: 768px) {
	#mypage div.content section + section {
		margin-top: 4.4rem;
	}
}

/*  greeting and points  */
#mypage section.greeting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2.4rem;
	padding: 1.6rem;
	background-color: var(--light-color);
	border: 1px var(--border) solid;
}
#mypage section.greeting p.name {
	font-size: 1.6rem;
	font-weight: bold;
}
#mypage section.greeting p.points {
	display: flex;
	align-items: baseline;
	gap: 0.7em;
	font-size: 1.3rem;
	color: #444444;
}
#mypage section.greeting p.points em {
	font-size: 2.6rem;
	font-style: normal;
	font-weight: bold;
	line-height: 1;
	color: var(--main-color);
}
#mypage section.greeting p.points span.unit {
	margin-left: -0.4em;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--main-color);
}
@media screen and (min-width: 768px) {
	#mypage section.greeting {
		padding: 2rem 2.4rem;
	}
	#mypage section.greeting p.name {
		font-size: 1.8rem;
	}
	#mypage section.greeting p.points em {
		font-size: 3rem;
	}
}

/*  order status labels  */
#mypage span.label {
	min-width: 0;
	padding: 0.3em 1em;
	font-size: 1.1rem;
	background-color: var(--price-color);
}

/*  order history  */
#mypage ul.history {
	margin-top: 1.6rem;
	border-top: 1px var(--border) solid;
}
#mypage ul.history li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.6em;
	padding: 0.1em 0.4em;
	border-bottom: 1px var(--border) solid;
}
#mypage ul.history div.summary {
	flex: 1 1 100%;
}
#mypage ul.history p.number {
	font-size: 1.4rem;
	font-weight: bold;
}
#mypage ul.history p.date {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 0.5em;
	font-size: 1.2rem;
	color: #666666;
}
#mypage ul.history p.total {
	font-size: 1.6rem;
	font-weight: bold;
}
#mypage ul.history p.total span.tax {
	margin-left: 0.3em;
	font-size: 1.1rem;
	font-weight: normal;
	color: #666666;
}
#mypage ul.history p.detail {
	margin-left: auto;
}
@media screen and (min-width: 768px) {
	#mypage ul.history li {
		flex-wrap: nowrap;
		padding: 0.2em 1em;
	}
	#mypage ul.history div.summary {
		flex: 1 1 auto;
	}
	#mypage ul.history p.total {
		flex-shrink: 0;
	}
	#mypage ul.history p.detail {
		flex-shrink: 0;
		margin-left: 0;
	}
}

/*  profile  */
#mypage section.profile dl {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 1.6rem;
	border-top: 1px var(--border) solid;
}
#mypage section.profile dl dt {
	padding: 1em 0.4em 0;
	font-size: 1.2rem;
	font-weight: bold;
	color: #666666;
}
#mypage section.profile dl dd {
	margin: 0;
	padding: 0.4em 0.4em 1em;
	font-size: 1.4rem;
	border-bottom: 1px var(--border) solid;
}
#mypage section.profile p.edit {
	margin-top: 1.6rem;
}
@media screen and (min-width: 768px) {
	#mypage section.profile dl {
		grid-template-columns: 20rem 1fr;
	}
	#mypage section.profile dl dt {
		display: flex;
		align-items: center;
		padding: 1.1em 1.4em;
		font-size: 1.3rem;
		background-color: var(--light-color);
		border-bottom: 1px var(--border) solid;
	}
	#mypage section.profile dl dd {
		padding: 1.1em 1.6em;
	}
	#mypage section.profile p.edit {
		margin-top: 2rem;
	}
}



/*

    Page: news

*/


/*

    News

*/

/*  lead  */
#news div.main p.lead {
	margin-top: 1.6rem;
	line-height: 1.8;
}

/*  list  */
#news div.main ul.main {
	margin-top: 2.4rem;
	list-style: none;
}
#news div.main ul.main li {
	margin: 0;
	border-bottom: 1px #cccccc solid;
}
#news div.main ul.main li a {
	display: block;
	padding: 1.2em 0.5em;
	color: inherit;
	text-decoration: none;
}
#news div.main ul.main li a:hover span.name { text-decoration: underline;}
#news div.main ul.main li a span.date {
	display: block;
	color: #888888;
	font-family: 'Lato', sans-serif;
}

/*  published date  */
#news div.main p.published { margin-top: 1.6rem;}

@media screen and (min-width: 768px) {
	#news div.main ul.main li a {
		display: flex;
		align-items: baseline;
		gap: 2em;
	}
	#news div.main ul.main li a span.date { flex-shrink: 0;}
}



/*

    Page: privacy

*/


/*

    Privacy policy

*/
#privacy div.main {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}

/*  lead  */
#privacy div.policy div.text-block {
	margin-top: 2rem;
}

/*  section  */
#privacy div.policy section {
	margin-top: 3.2rem;
}
#privacy div.policy section p {
	margin: 1em 0 0;
	line-height: 1.9;
}

/*  numbered clauses  */
#privacy div.policy section ol {
	margin: 1em 0 0;
	padding-left: 1.7em;
}
#privacy div.policy section ol li {
	margin: 0.6em 0 0;
	line-height: 1.9;
	list-style: decimal;
}

/*  bullet items  */
#privacy div.policy section ul {
	margin: 0.5em 0 0;
	padding-left: 1.4em;
}
#privacy div.policy section ul li {
	margin: 0.4em 0 0;
	line-height: 1.9;
	list-style: disc;
}
#privacy div.policy section ul ul li {
	list-style: circle;
}

/*  contact office  */
#privacy div.policy p.office {
	margin-top: 1.2em;
	padding: 1.2em 1.5em;
	background-color: var(--light-color);
}



/*

    Page: service

*/


/*

    Service list

*/
#service ul.services {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2.4rem;
}
#service ul.services li {
	border: 1px var(--border) solid;
}
#service ul.services li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

/*  photo  */
#service ul.services span.photo {
	display: block;
	background-color: #f7f7f7;
}
#service ul.services span.photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/*  detail  */
#service ul.services span.detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.6rem 1.8rem 2rem;
}
#service ul.services span.name {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
	color: var(--main-color);
}
#service ul.services span.summary {
	margin: 0.7em 0 1.4em;
	font-size: 1.3rem;
	line-height: 1.8;
	color: #444444;
}
#service ul.services span.button {
	margin-top: auto;
	align-self: flex-start;
}

@media screen and (min-width: 768px) {
	#service ul.services {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.4rem;
	}
}
@media screen and (min-width: 1020px) {
	#service ul.services {
		grid-template-columns: repeat(3, 1fr);
	}
}



/*

    Page: special

*/


/*

    Feature

*/

/*  hero banner  */
#special section.hero {
	margin-top: 1.6rem;
}
#special section.hero p.banner {
	margin: 0;
}
#special section.hero p.banner img {
	display: block;
	width: 100%;
	height: auto;
}

/*  lineup  */
#special section.lineup h1.page {
	margin-top: 2.4rem;
}
#special section.lineup p.lead {
	margin: 1.2em 0 0;
	font-size: 1.3rem;
	line-height: 1.9;
	color: #444444;
}
@media screen and (min-width: 768px) {
	#special section.lineup p.lead {
		font-size: 1.4rem;
	}
}

/*

    Case study

*/
#special section.casestudy {
	padding: 3.2rem 1.6rem;
	background-color: var(--light-color);
}
#special section.casestudy h2 {
	display: block;
	margin: 0;
	padding-bottom: 0;
	font-size: 1.8rem;
	color: var(--main-color);
	text-align: center;
	line-height: 1.5;
	border-bottom: none;
}
@media screen and (min-width: 768px) {
	#special section.casestudy {
		padding: 4rem 3.2rem;
	}
	#special section.casestudy h2 {
		font-size: 2.6rem;
	}
}

/*  cases  */
#special section.casestudy ul.cases {
	margin: 2.4rem 0 0;
	padding: 0;
}
#special section.casestudy ul.cases li {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	padding: 1.6rem;
	background-color: #ffffff;
	border: 1px var(--border) solid;
}
#special section.casestudy ul.cases li + li {
	margin-top: 1.6rem;
}
#special section.casestudy ul.cases span.thumbnail {
	display: block;
	flex-shrink: 0;
}
#special section.casestudy ul.cases span.thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
#special section.casestudy ul.cases div.detail {
	min-width: 0;
}
#special section.casestudy ul.cases p.meta {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	font-size: 1.2rem;
	color: var(--main-color);
}
#special section.casestudy ul.cases p.meta span:not(:first-child):before {
	content: '\007c';
	margin: 0 0.7em;
	color: #bbbbbb;
}
#special section.casestudy ul.cases h3 {
	margin: 0.6em 0 0;
	padding: 0;
	font-size: 1.8rem;
	line-height: 1.5;
	border: none;
}
#special section.casestudy ul.cases p.text {
	margin: 0.8em 0 0;
	font-size: 1.3rem;
	line-height: 1.9;
	color: #444444;
}
@media screen and (min-width: 768px) {
	#special section.casestudy ul.cases li {
		flex-direction: row;
		align-items: flex-start;
		gap: 2.4rem;
		padding: 2.4rem;
	}
	#special section.casestudy ul.cases li + li {
		margin-top: 2rem;
	}
	#special section.casestudy ul.cases span.thumbnail {
		width: 26rem;
	}
	#special section.casestudy ul.cases h3 {
		font-size: 2rem;
	}
	#special section.casestudy ul.cases p.text {
		font-size: 1.4rem;
	}
}

/*  contact  */
#special section.casestudy div.contact {
	margin-top: 2.4rem;
	padding: 2rem 1.6rem;
	background-color: #ffffff;
	border: 2px var(--main-color) solid;
	text-align: center;
}
#special section.casestudy div.contact h3 {
	margin: 0;
	padding: 0;
	font-size: 1.7rem;
	color: var(--main-color);
	border: none;
}
#special section.casestudy div.contact p.text {
	margin: 0.8em 0 0;
	font-size: 1.3rem;
	line-height: 1.8;
	color: #444444;
}
#special section.casestudy div.contact p.button-area {
	margin: 1.6rem 0 0;
}
#special section.casestudy div.contact svg.icon {
	margin-left: 0.5em;
	width: 1.2rem;
	height: 1.2rem;
}
@media screen and (min-width: 768px) {
	#special section.casestudy div.contact {
		margin-top: 3.2rem;
		padding: 2.8rem;
	}
	#special section.casestudy div.contact h3 {
		font-size: 2rem;
	}
}



/*

    Page: terms

*/


/*

    Terms of use

*/

#terms div.main {
	width: 100%;
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
}

/*  article  */
#terms div.main section.article {
	margin-top: 1rem;
}
#terms section.article ol.items {
	margin: 1em 0 0;
	padding-left: 1.8em;
	font-size: 1.4rem;
	line-height: 1.9;
}
#terms section.article ol.items li {
	margin: 0.4em 0;
}

@media screen and (min-width: 768px) {
	#terms div.main section.article {
		margin-top: 1.6rem;
	}
}