@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap');

:root {
	--link-color: #a7b8d0;
	--ui-color: #e4e9f1;
	--input-color: rgba(0,0,0,.06);
	--sub-color: #e4ddae;
	--highlight-color: #ffff90;
	--base-color: #f7f8fb;
	--border-color: rgba(0,0,0,.1);
	--strong-color: #e7ada0;
	font-size: 16px;
	}

* {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-style: normal;
	list-style: none;
	line-height: inherit;
	text-decoration: none;
	color: inherit;
	vertical-align: top;
	}

body {
	padding: 0;
	text-align: center;
	font-family: "Zen Kaku Gothic New", system-ui;
	font-weight: 400;
	font-style: normal;
	line-height: 160%;
	color: #555;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	color: #000;
	}

a {
	cursor: pointer;
	}

img {
	width: 100%;
	max-width: 100%;
	}
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
textarea {
	padding: 4px 8px;
	width: 100%;
	min-width: 10rem;
	border: none;
	border-radius: 4px;
	background: var(--input-color);
	outline: none;
	appearance: none;
	font-size: inherit;
	line-height: 24px;
	color: #444;
	box-sizing: border-box;
	}
	input[type=text]:focus,
	input[type=email]:focus,
	input[type=tel]:focus,
	input[type=number]:focus,
	input[type=password]:focus,
	input[type=search]:focus,
	textarea:focus {
		background: var(--ui-color);
		}

input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
	width: 24px;
	height: 24px;
	background-size: 24px;
	box-sizing: border-box;
	vertical-align: top;
	}

select {
	display: block;
	appearance: none;
	width: 100%;
	max-width: 100%;
	padding: 0 32px 0 12px;
	border: none;
	border-radius: 8px;
	background: url("../image/arrow_select.svg") no-repeat right center var(--ui-color);
	background-size: 28px;
	line-height: 32px;
	font-size: inherit;
	color: inherit;
	outline: none;
	}
select:hover {
	filter: brightness(1.04);
	}
	select.bid-price {
		background-size: 36px;
		font-size: 1.3rem;
		line-height: 44px;
		}
	select:disabled {
		background-color: #eee;
		color: #999;
		}

textarea {
	display: block;
	width: 100%;
	}
textarea.auto-adjust {
	resize: none;
	line-height: 1.5rem;
	overflow-anchor: none;
	}

header.global, main, footer.global {
	position: relative;
	z-index: 10;
	}

	header.global {
		z-index: 100;
		}

	body.light-detail header.global {
		display: none;
		}

header.global #logo {
	max-width: 640px;
	margin: 64px auto 0 auto;
	}

header.global ul {
	display: flex;
	justify-content: center;
	column-gap: 1rem;
	padding: 24px 0 48px 0;
	font-weight: 700;
	}

header.global ul a,
header.global ul label {
	display: block;
	position: relative;
	padding: 1rem;
	line-height: 1rem;
	}

	header.global ul li.selected > a,
	header.global ul li.selected > label {
		color: var(--link-color);
		}

header.global ul li > a::after,
header.global ul li > label::after {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: -0.2rem;
	left: 1rem;
	height: 4px;
	background: #000;
	transition: transform 100ms ease-out;
	transform: scaleX(0);
	}

	header.global ul li.selected a::after,
	header.global ul li.selected label::after {
		transform: scaleX(1);
		background: var(--link-color);
		}

header.global ul a:hover::after {
	transform: scaleX(1);
	}

header.global ul .account {
	position: relative;
	height: 3rem;
	border-radius: 1rem;
	}

header.global ul .account * {
	display: block;
	}

header.global ul .account label {
	position: relative;
	transition: background 100ms linear, color 100ms ease-in-out;
	z-index: 2;
	}

	header.global ul .account:hover label {
		color: #000;
		}

header.global ul .account .content {
	position: absolute;
	top: 0;
	left: 0;
	padding-top: 3rem;
	width: 100%;
	height: 3rem;
	border-radius: 1rem;
	box-sizing: border-box;
	transition: background 100ms linear, color 200ms ease-in-out, height 200ms ease-in-out;
	color: #fff;
	overflow: hidden;
	}

	header.global ul .account:hover .content {
		height: 11rem;
		background: var(--link-color);
		color: #fff;
		}

header.global ul .account em {
	padding-bottom: 0.5rem;
	font-size: 1rem;
	color: rgba(0,0,0,.5);
	font-weight: 400;
	opacity: 0;
	transition: opacity 100ms linear;
	}

	header.global ul .account:hover em {
		opacity: 1.0;
		}

	header.global ul .account em::after {
		content: "さん";
		font-size: .8rem;
		}

header.global ul .account a {
	box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
	background: rgba(255,255,255,.1);
	}

	header.global ul .account a:hover {
	background: rgba(255,255,255,.2);
		}

main {
	text-align: left;
	}

	body.light-detail main {
		padding: 64px 0;
		}

footer.global {
	margin-top: 64px;
	padding: 48px;
	background: var(--base-color);
	}

	body.light-detail footer.global {
		display: none;
		}

footer.global ul {
	display: flex;
	justify-content: center;
	}

footer.global li {
	position: relative;
	padding: 0 1.5rem;
	line-height: 2rem;
	}

footer.global li:not(:first-child)::before {
	content: "";
	position: absolute;
	top: .5rem;
	left: 0;
	height: 1rem;
	border-left: 1px dotted var(--border-color);
	}

footer.global .copyright {
	display: block;
	margin-top: 2rem;
	font-size: .8rem;
	text-align: center;
	}





input[type=submit],
.button {
	display: block;
	padding: 4px 0;
	appearance: none;
	background: #000;
	border: none;
	border-radius: .2rem;
	text-align: center;
	color: #fff;
	line-height: 36px;
	font-weight: 700;
	}

	input[type=submit] {
		padding: 8px 48px 8px 24px;
		background: url("../image/arrow_next_white.svg") no-repeat right 12px center #000;
		background-size: 12px 24px;
		}

	.button.cancel {
		padding: 8px 24px 8px 48px;
		background: url("../image/arrow_prev_black.svg") no-repeat left 12px center #ccc;
		background-size: 12px 24px;
		color: #000 !important;
		text-decoration: none !important;
		}

	.list-filter input.button {
		flex-shrink: 0;
		position: relative;
		padding: 0;
		width: 32px;
		height: 32px;
		border-radius: 0 4px 4px 0;
		background: url("../image/icon_search.svg") no-repeat center center rgba(0,0,0,.05);
		background-size: 24px;
		font-size: 0;
		}

.mobile {
	display: none !important;
	}

.cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

.access {
	display: block;
	padding: 4px 16px;
	background: url("../image/arrow_next_white.svg") no-repeat right 12px center rgba(200, 0, 0, 1);
	animation: blink 0.7s alternate infinite linear;
	background-size: 12px 24px;
	border-radius: .2rem;
	color: #fff;
	line-height: 36px;
	font-weight: 700;
	color: #fff;
	vertical-align: bottom;
	}

	.access.live {
		background: radial-gradient(at 50% 50%, rgba(220, 0, 0, 1), rgba(210, 00, 0, 1));
		animation: blink 0.7s alternate infinite linear;
		color: #fff;
		font-size: 1.1rem;
		text-align: center;
		}
	
	@-webkit-keyframes hue {
		from {  -webkit-filter: hue-rotate(30deg) }
		to { -webkit-filter: hue-rotate(90deg) }
		}
	
	@-webkit-keyframes blink {
		from {  -webkit-filter: brightness(1.0) }
		to { -webkit-filter: brightness(1.2) }
		}

.column {
	display: flex !important;
	gap: .5rem;
	align-items: center;
	}

	.column.numbers input {
		width: 4rem;
		min-width: 0;
		}

.splide:not(.splided) {
	visibility: visible !important;
	}

	.splide#auction-overview:not(.splided) {
		margin-bottom: 0 !important;
		padding-bottom: 64px !important;
		border-bottom: 1px solid var(--border-color) !important;
		}

.splide__slide {
	border: none !important;
	}

	.splide:not(.splided) {
		width: 100% !important;
		overflow-x: auto !important;
		}

.splide:not(.splided) .splide__track {
	overflow: visible !important;
	}

.splide:not(.splided) .splide__list {
	gap: 64px !important;
	padding-left: 64px !important;
	}

	.splide.is-initialized:not(.is-active) .splide__list {
		display: flex !important;
		}

.splide:not(.splided) .splide__list::after {
	content: "";
	display: block;
	padding-right: 1px;
	height: 64px;
	flex-shrink: 1;
	}

.index .splide__arrow--prev {
	left: 0 !important;
	width: 48px !important;
	height: 96px !important;
	border-radius: 0 48px 48px 0 !important;
	background: url("../image/arrow_prev_white.svg") no-repeat center center #000 !important;
	background-size: 8px 32px !important;
	opacity: 1 !important;
	}

.index .splide__arrow--next {
	right: 0 !important;
	width: 48px !important;
	height: 96px !important;
	border-radius: 48px 0 0 48px !important;
	background: url("../image/arrow_next_white.svg") no-repeat center center #000 !important;
	background-size: 8px 32px !important;
	opacity: 1 !important;
	}

	#links .splide__arrow--prev,
	.detail .splide__arrow--prev {
		left: -24px !important;
		width: 48px !important;
		height: 48px !important;
		border-radius: 24px !important;
		background: url("../image/arrow_prev_white.svg") no-repeat left 18px center #000 !important;
		background-size: 8px 32px !important;
		opacity: 1 !important;
		}
	
	#links .splide__arrow--next,
	.detail .splide__arrow--next {
		right: -24px !important;
		width: 48px !important;
		height: 48px !important;
		border-radius: 24px !important;
		background: url("../image/arrow_next_white.svg") no-repeat right 18px center #000 !important;
		background-size: 8px 32px !important;
		opacity: 1 !important;
		}

	#links .splide__arrow--prev {
		left: 12px !important;
		}
	
	#links .splide__arrow--next {
		right: 12px !important;
		}

.splide__arrow--prev:disabled,
.splide__arrow--next:disabled {
	background-color: #ddd !important;
	}

.splide__arrow--prev svg,
.splide__arrow--next svg {
	display: none !important;
	}

.splide__pagination {
	display: flex !important;
	gap: 16px !important;
	bottom: -64px !important;
	padding: 0 !important;
	}

.splide__pagination::before,
.splide__pagination::after {
	content: "";
	flex-grow: 1;
	margin-right: 16px;
	border-bottom: 1px dotted rgba(0,0,0,.4);
	}

	.splide__pagination::after {
		margin-right: 0;
		margin-left: 16px;
		}

.splide__pagination__page {
	display: block !important;
	width: 40px !important;
	height: 8px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	background-color: rgba(0,0,0,.1) !important;
	transform: scale(1) !important;
	opacity: 1 !important;
	}

.splide__pagination__page.is-active {
	background-color: rgba(0,0,0,1) !important;
	}

#login-contents {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	}

	body.login #login-contents {
		display: flex;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		}

#login-contents .mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.6);
	z-index: 1;
	}

	body.login.withdraw #login-contents .mask {
		pointer-events: none;
		}

#login-contents form {
	position: relative;
	max-width: 560px;
	margin: 48px auto;
	border-radius: 1rem;
	box-sizing: border-box;
	background: #fff;
	z-index: 10;
	}

	body.login.forget #login-contents form#login-form,
	body.login #login-contents form#forget-form {
		display: none;
		}

	body.login.forget #login-contents form#forget-form {
		display: block;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		}

#login-contents .title {
	position: relative;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 0 8px rgba(0,0,0,.1);
	font-size: 1.1rem;
	line-height: 44px;
	color: var(--main-color);
	text-align: center;
	}

#login-contents .close,
#login-contents .back {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 24px;
	color: var(--link-color);
	font-size: .9rem;
	font-weight: 700;
	line-height: 44px;
	z-index: 10;
	}

	#login-contents .back {
		position: absolute;
		top: 0;
		right: auto;
		left: 0;
		}

	body.login.withdraw #login-contents .close {
		display: none;
		}

#login-contents p {
	margin: 0 32px 1rem 32px;
	text-align: left;
	}

#login-contents .input {
	padding: 0 32px;
	}

#login-contents .input div {
	position: relative;
	margin-bottom: 16px;
	background-color: var(--ui-base-color);
	border-radius: 8px;
	}

#login-contents label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 16px;
	line-height: 48px;
	font-size: .9rem;
	opacity: .7;
	}

#login-contents label::after {
	content: "：";
	}

#login-contents div input {
	padding: 12px 12px 12px 7rem;
	}

#login-contents div input#password {
	padding-right: 3rem;
	}

#login-contents div input#email {
	padding-left: 9rem;
	}

#login-contents #password-toggler {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	background: url("../image/ui_visible.svg") no-repeat center center;
	background-size: 40px;
	}

	#login-contents #password-toggler.visible {
		background-image: url("../image/ui_hide.svg");
		}

#login-contents footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
	padding: 16px 32px 32px 32px;
	border-radius: 0 0 16px 16px;
	background: var(--base-color);
	box-sizing: border-box;
	}

#login-contents #login-form footer::after {
	content: "";
	position: absolute;
	right: 32px;
	bottom: 96px;
	left: 32px;
	border-top: 1px solid var(--border-color);
	}

	body.login.withdraw #login-contents #login-form footer::after {
		display: none;
		}

#login-contents #forget {
	color: var(--link-color);
	text-decoration: underline;
	line-height: 48px;
	}

#login-contents #forget br {
	display: none;
	}

#login-contents .button {
	padding: 0 40px 0 24px;
	background: url("../image/arrow_next_white.svg") no-repeat right 16px center #000;
	background-size: 8px 16px;
	box-sizing: border-box;
	line-height: 48px;
	}

	#login-contents #forget-form .button {
		width: 100%;
		}

#login-contents #signup {
	display: block;
	margin-top: 32px;
	width: 100%;
	}

	body.login.withdraw #login-contents #signup {
		display: none;
		}

#signup-form {
	max-width: 720px;
	margin: auto;
	padding: 0 64px;
	}

	#signup-form.complete {
		text-align: center;
		}

#signup-form h1 {
	margin-bottom: 2rem;
	font-size: 3rem;
	line-height: 3rem;
	}

#signup-form .error {
	margin-top: 1rem;
	padding: 8px 16px 16px 16px;
	border-radius: 8px;
	background: var(--strong-color);
	font-size: .9rem;
	}

#signup-form .error strong {
	line-height: 2rem;
	}

#signup-form a {
	color: var(--link-color);
	text-decoration: underline;
	}

#signup-form dl {
	margin-top: 2rem;
	}

#signup-form dl div {
	overflow: hidden;
	}

#signup-form dl dt {
	position: relative;
	float: left;
	width: 13rem;
	padding: 1rem 3rem 1rem 0;
	border-top: 1px solid var(--border-color);
	line-height: 32px;
	box-sizing: border-box;
	}

	#signup-form dl div.required dt::before,
	#signup-form dl div.optional dt::before {
		content: "任意";
		position: absolute;
		top: 1rem;
		right: 1rem;
		line-height: inherit;
		font-size: .75rem;
		color: rgba(0,0,0,.6);
		}

	#signup-form dl div.required dt::before {
		content: "必須";
		color: var(--strong-color);
		}

	#signup-form dl div dt small {
		font-size: .9rem;
		vertical-align: baseline;
		}

#signup-form dl dd {
	display: block;
	margin-left: 13rem;
	padding: 1rem 0;
	border-top: 1px solid var(--border-color);
	}

#signup-form.confirm dl label {
	color: rgba(0,0,0,.5);
	line-height: 32px;
	}

#signup-form dl i.note {
	display: block;
	margin-top: .5rem;
	font-size: .9rem;
	}

#signup-form dl span {
	display: block;
	line-height: 32px;
	}

#signup-form footer {
	display: flex;
	justify-content: center;
	padding-top: 3rem;
	gap: 24px;
	border-top: 1px solid var(--border-color);
	text-align: center;
	}

	#signup-form.complete footer {
		border: none;
		}

#memo-form {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(200,200,200,.5);
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	z-index: 50000;
	}

	body.memo #memo-form {
		display: block;
		}

#memo-form label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 64px 20%;
	}

#memo-form i {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	text-align: left;
	font-size: 1.5rem;
	color: #000;
	}

#memo-form textarea {
	padding: 16px 24px;
	background: rgba(80,80,80,.5) !important;
	font-size: 2rem;
	color: #fff;
	}

#memo-form ul {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
	}

#memo-form ul .button {
	width: 144px;
	padding: 8px 0 !important;
	background-image: none;
	text-align: center;
	font-size: 1.2rem;
	}

#memo-form ul .button.cancel {
	background-color: rgba(255,255,255,.5);
	}

#loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255,255,255,.5);
	transition: opacity 0.4s linear;
	opacity: 0;
	pointer-events: none;
	z-index: 100000;
	}

	body.loading #loader {
		opacity: 1;
		pointer-events: auto;
		}

#loader .circle-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: transparent;
	stroke: #000;
	stroke-width: 8;
	animation: dash 2s ease infinite, rotate 2s linear infinite;
	}

@keyframes dash {
	0% {
		stroke-dasharray: 1,188;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 141,188;
		stroke-dashoffset: -40;
	}
	100% {
		stroke-dasharray: 141,188;
		stroke-dashoffset: -188;
	}
}

@keyframes rotate {
	0% {transform: translate(-50%, -50%) rotate(0deg) }
	100% {transform: translate(-50%, -50%) rotate(360deg) }
}

#toast {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: var(--link-color);
	color: #fff;
	transition: transform .4s ease-in-out;
	transform: translateY(-300%);
	z-index: 100000;
	}

	body.toast #toast {
		transform: translateY(0);
		}
	
	#toast.error {
		background-color: var(--strong-color);
		}

#toast var {
	display: block;
	padding: 16px;
	text-align: center;
	line-height: 1.5rem;
	}




/* ---------- index ---------- */

#auction-overview {
	margin-bottom: 32px;
	}

#auction-overview .overview-item {
	position: relative;
	width: 360px;
	}

#auction-overview .overview-item:not(.index)::before {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	top: 50%;
	left: -64px;
	margin-top: -32px;
	background: url("../image/separator_vertical.svg") no-repeat 0 0 / 64px;
	}

#auction-overview .next-time {
	padding: 16px;
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
	color: #fff;
	}

	#auction-overview .n0 .next-time {
		display: none;
		}

#auction-overview .next-time dt {
	display: block;
	margin-bottom: 4px;
	font-size: .9rem;
	}

#auction-overview .next-time dd,
#counter div {
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 2px;
	}

	#counter .tens,
	#counter .ones {
		display: block;
		padding: 4px 0;
		width: 24px;
		border-radius: 8px;
		background-color: #000;
		font-family: "Barlow Condensed", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-size: 32px;
		line-height: 36px;
		text-align: center;
		}

	#counter i {
		display: block;
		width: 1.2rem;
		font-weight: 500;
		font-size: .8rem;
		line-height: 16px;
		text-align: center;
		}

	#auction-overview.open .next-time dt,
	#auction-overview.open .next-time dd#counter {
		display: none;
		}

#auction-overview .index #open-auction {
	display: none;
	}

	#auction-overview.open .index #open-auction {
		display: flex;
		gap: 1rem;
		width: 100%;
		}

#auction-overview.open .index #open-auction i {
	font-size: .9rem;
	line-height: 1.2rem;
	white-space: nowarp;
	}

#auction-overview.open .index #open-auction a {
	flex-grow: 1;
	padding: 4px 8px;
	}

#auction-overview .index .content {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	}

#auction-overview .index {
	width: 360px;
	background-color: #000;
	}

	#auction-overview.splided .index {
		aspect-ratio: 2/3;
		}

#auction-overview .index::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url("../image/bg_screen.png") repeat 0 0;
	background-size: 3px;
	}

#auction-overview .index .items {
	display: block;
	margin-top: 0 !important;
	background-color: #000;
	}

#auction-overview .overview-item.placeholder {
	display: none;
	}

	#auction-overview .n0 .overview-item.placeholder {
		display: block;
		}

	#auction-overview .n1 .overview-item.placeholder:last-child {
		display: block;
		}

#auction-overview .overview-item .thumbnail {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4/5;
	}

	#auction-overview .overview-item.placeholder .thumbnail {
		background: url("/assets/image/placeholder.svg") no-repeat center center #f6f6f6;
		background-size: contain;
		}

#auction-overview .overview-item:not(.index) label {
	position: absolute;
	left: 0;
	right: 0;
	padding: 16px; 
	transform: translateY(-100%);
	background-color: rgba(40,56,85,.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	}

#auction-overview .overview-item.index label {
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: column;
	flex-grow: 1;
	margin: 0;
	padding: 0 16px;
	color: #fff;
	}

#auction-overview .overview-item label h1,
#auction-overview .overview-item label em {
	padding-bottom: 12px;
	font-size: 1.4rem;
	font-weight: 900;
	line-height: 100%;
	color: #fff;
	}

#auction-overview .overview-item label em {
	padding-bottom: 4px;
	line-height: 36px;
	}

#auction-overview .overview-item label i {
	font-size: .9rem;
	line-height: 100%;
	}

#auction-overview .overview-item label time {
	display: flex;
	justify-content: start;
	gap: 8px;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 16px;
	color: var(--sub-color);
	}

#auction-overview .overview-item label time img {
	width: 4px;
	height: 16px;
	}

#auction-overview .overview-item .items {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	}

#auction-overview .overview-item.index .items .list,
#auction-overview .overview-item .items li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 4px;
	position: relative;
	flex-basis: calc((100% - 24px) / 4);
	aspect-ratio: 1;
	background-color: #000;
	text-align: center;
	}

	#auction-overview .overview-item .items li:nth-child(n+4) {
		display: none;
		}

	#auction-overview .overview-item .items li.placeholder {
		background: url("/assets/image/placeholder.svg") no-repeat center center #f6f6f6;
		background-size: contain;
		}
	
	#auction-overview .overview-item .items li.list {
		display: flex;
		}
	
	#auction-overview .overview-item.placeholder .items li.list {
		background: url("/assets/image/placeholder.svg") no-repeat center center #f6f6f6;
		background-size: contain;
		}

#auction-overview .list strong {
	display: block;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	text-align: center;
	font-size: 36px;
	line-height: 100%;
	color: #fff;
	}

#auction-overview .list small {
	display: inline-block;
	padding-right: 16px;
	background: url("../image/arrow_next_white.svg") no-repeat right center;
	background-size: 8px 16px;
	font-size: .8rem;
	line-height: 16px;
	color: #fff;
	}

#link h1 {
	margin: 0 0 48px 0;
	padding: 128px 0 48px 0;
	background: url("../image/separator_horizontal.svg") no-repeat center bottom / 64px;
	font-size: 3rem;
	line-height: 5rem;
	font-weight: 900;
	}

#link ul {
	}

#link li {
	padding: 24px;
	border: 1px solid #eee;
	}

	#link:not(.splided) li {
		width: 216px;
		}

#link li:not(:first-child) {
	border-left: none;
	}

#link .icon {
	position: relative;
	width: auto;
	height: 80px;
	margin: 0 auto 24px auto;
	}

	#link .icon.instagram {
		width: 80px;
		}

	#link .icon.instagram::after {
		content: "";
		position: absolute;
		right: -16px;
		bottom: 0;
		width: 20px;
		height: 20px;
		background: url("../image/icon_instagram.png") no-repeat center center;
		background-size: contain;
		}

#link .icon img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

#link .icon.instagram img {
	border-radius: 50%;
	}

#link em {
	font-size: 1.2rem;
	font-weight: 700;
	}

#link small {
	font-size: .8rem;
	font-weight: 400;
	}

#link p {
	margin-top: 16px;
	font-size: .8rem;
	line-height: 1.2rem;
	}




/* ---------- about ---------- */

#contents.about {
	position: relative;
	margin-bottom: -96px;
	padding: 0 0 128px 0 !important;
	max-width: none;
	background: #000;
	}

#contents.about .content {
	color: #fff;
	}

#contents.about .eyecatch {
	padding: 64px;
	}

#contents.about .eyecatch img {
	border-radius: 16px;
	}

#contents.about header {
	padding: 64px 48px 35vw 48px;
	background: url("../image/background_bokeh1.jpg") no-repeat center bottom;
	background-size: contain;
	text-align: center;
	}

#contents.about header .logo {
	width: 640px;
	}

#contents.about header .title {
	width: 800px;
	margin: 3rem 0;
	}

#contents.about dl {
	position: relative;
	padding: 0 0 35vw 0;
	background: url("../image/background_bokeh2.jpg") no-repeat center bottom;
	background-size: contain;
	}

	#contents.about dl::before,
	#contents.about dl::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 20vw;
		aspect-ratio: 18/60;
		background: url("../image/background_item1.jpg") no-repeat center center;
		background-size: contain;
		}

	#contents.about dl::after {
		top: auto;
		right: auto;
		bottom: 25vw;
		left: 0;
		width: 20vw;
		aspect-ratio: 20/54;
		background: url("../image/background_item2.jpg") no-repeat center center;
		background-size: contain;
		}

#contents.about dl div {
	position: relative;
	max-width: 720px;
	width: fit-content;
	margin: auto;
	z-index: 10;
	}

#contents.about dt {
	margin: 0 0 24px 0;
	padding: 128px 0 48px 0;
	background: url("../image/separator_horizontal_white.svg") no-repeat center bottom / 64px;
	font-size: 2rem;
	line-height: 5rem;
	font-weight: 900;
	text-align: center;
	}

	#contents.about dl div:first-child dt {
		padding-top: 0;
		}

#contents.about a.button {
	width: fit-content;
	margin: 16px auto 0 auto;
	padding: 0 24px;
	background-color: var(--link-color);
	color: #000;
	}

#contents.about footer {
	padding: 64px;
	font-size: 1.3rem;
	line-height: 160%;
	text-align: center;
	}




/* ---------- list ---------- */

#contents.list {
	}

#contents.list.null::before {
	content: "まだオークションの予定がありません";
	display: block;
	text-align: center;
	line-height: 36px;
	color: #999;
	}

#contents.list .list-filter {
	margin-bottom: 3rem;
	}

	#contents.list .list-filter.foot {
		position: sticky;
		left: 0;
		bottom: 2rem;
		transition: transform 200ms ease-out;
		transform: translate3d(0,8rem,0);
		z-index: 200;
		}

	body.scrolled #contents.list .list-filter.foot {
		transform: translate3d(0,0,0);
		}

#contents.list .list-filter dl {
	display: flex;
	width: fit-content;
	margin: auto;
	padding: 0 1rem;
	border-radius: 1.75rem;
	background-color: rgba(226, 233, 245, 0.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	line-height: 3.5rem;
	}

#contents.list .list-filter dt {
	padding: 0 1.5rem;
	font-size: .9rem;
	}

#contents.list .list-filter dd {
	padding: 0 1.5rem 0 0;
	}

#contents.list .list-filter dd,
#contents.list .list-filter dd label {
	display: flex;
	align-items: center;
	}

#contents.list .list-filter input[type=search] {
	border-radius: 4px 0 0 4px;
	background-color: rgba(255,255,255,.7);
	}

#contents.list .list-filter a.clear {
	display: block;
	flex-shrink: 0;
	position: relative;
	width: 36px;
	height: 32px;
	margin-left: -36px;
	background: url("../image/icon_cancel.svg") no-repeat center center;
	background-size: 32px;
	z-index: 10;
	}

#contents.list .auction {
	position: relative;
	}

#contents.list .auction.end:last-of-type {
	margin-bottom: 64px;
	}

#contents.list .auction.end::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.07);
	pointer-events: none;
	-webkit-backdrop-filter: grayscale(1.0);
	backdrop-filter: grayscale(1.0);
	z-index: 10;
	}

#contents.list .auction::after {
	content: "";
	display: block;
	clear: both;
	}

#contents.list .date {
	position: sticky;
	top: 0;
	left: 0;
	padding: 16px;
	width: 100%;
	background-color: #000;
	text-align: right;
	box-sizing: border-box;
	z-index: 10;
	}

	#contents.list .auction.end .date {
		filter: grayscale(1.0);
		}

#contents.list .date time {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 1rem;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 40px;
	line-height: 40px;
	color: var(--link-color);
	}

#contents.list .date time img {
	width: 6px;
	height: 24px;
	}

#contents.list header {
	position: sticky;
	top: 120px;
	left: 0;
	width: 20vw;
	margin: 48px 0 0 48px;
	padding-bottom: 48px;
	float: left;
	z-index: 1;
	}

#contents.list header h1 {
	margin: 16px 0;
	font-size: 1.4rem;
	font-weight: 900;
	}

#contents.list header p {
	margin-bottom: 12px;
	font-size: .9rem;
	}

#contents.list header .notice {
	display: block;
	margin-bottom: 12px;
	padding: 4px 8px;
	background: var(--ui-color);
	border-radius: .2rem;
	line-height: 36px;
	font-size: .9rem;
	vertical-align: bottom;
	}

	#contents.list header .notice:last-child {
		margin-bottom: 0;
		}

#contents.list header .notice input {
	margin: 6px 6px 6px 2px;
	}

#contents.list header .end {
	display: block;
	padding: 8px 16px;
	background: var(--base-color);
	font-size: .9rem;
	color: #999;
	}

#contents.list .items {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-left: 20vw;
	padding: 48px;
	}

#contents.list .items .live-notice {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 16px;
	background: #f7ecec;
	box-sizing: border-box;
	color: #000;
	font-size: 1.2rem;
	text-align: left;
	text-shadow: 0 1px 2px #fff;
	line-height: 1.3rem;
	}

#contents.list .items .live-notice .access {
	margin-left: 1rem;
	padding-right: 32px;
	text-shadow: none;
	white-space: nowrap;
	}

#contents.list .item {
	width: calc((100% - 96px) / 3);
	}

#contents.list .photo {
	position: relative;
	overflow: hidden;
	}

	#contents.list .item.sold .photo::before,
	#contents.list .item.unsold .photo::before,
	#contents.list .item.live .photo::before {
		content: "落札";
		position: absolute;
		top: 8px;
		left: -56px;
		width: 128px;
		transform-origin: center top;
		transform: rotate(-45deg);
		background: var(--link-color);
		line-height: 32px;
		color: #fff;
		font-weight: 700;
		text-align: center;
		z-index: 2;
		}

	#contents.list .item.unsold .photo::before {
		content: "流札";
		background: #ccc;
		}

	#contents.list .item.live .photo::before {
		content: "LIVE";
		background: radial-gradient(at 50% 50%, rgba(220, 0, 0, 1), rgba(210, 00, 0, 1));
		animation: blink 0.7s alternate infinite linear;
		}

#contents.list .item.sold .photo img,
#contents.list .item.unsold .photo img {
	filter: grayscale(1.0);
	}

#contents.list .item-head {
	display: flex;
	align-items: center;
	padding: 8px 0;
	}

#contents.list .item-head * {	
	display: block;
	}

#contents.list .item-head .lotno {
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: .6rem;
	line-height: .6rem;
	}

#contents.list .item-head strong {
	margin: 0 4px;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.5rem;
	font-weight: inherit;
	color: #000;
	}

#contents.list .item-head .rank {
	flex-grow: 1;
	position: relative;
	padding-left: 12px;
	font-size: .8rem;
	line-height: 1rem;
	}

#contents.list .item-head .rank::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	height: 1.5rem;
	margin-top: -0.75rem;
	transform-origin: 50% 50%;
	transform: rotate(8deg);
	border-left: 1px solid rgba(0,0,0,.2);
	}

#contents.list .item-head .memo,
#contents.list .item-head .like {
	display: block;
	width: 36px;
	height: 36px;
	margin-left: 8px;
	background: url("../image/icon_memo.svg") no-repeat center center / 36px;
	}

#contents.list .item-head .like {
	background: url("../image/icon_like.svg") no-repeat center center / 36px;
	}

	#contents.list .item-head .like.liked {
		background: url("../image/icon_liked.svg") no-repeat center center / 36px;
		}

#contents.list .my-memo {
	display: none;
	position: relative;
	margin-bottom: 8px;
	padding: 4px 24px 4px 40px;
	border-radius: 4px;
	background-color: #eee;
	}

	#contents.list .memo-container.has-memo .my-memo {
		display: block;
		}

	#contents.list .my-memo::before,
	#contents.list .my-memo::after {
		content: "";
		position: absolute;
		width: 8px;
		height: 8px;
		left: 8px;
		bottom: -3px;
		border-radius: 4px;
		background: #eee;
		}
	#contents.list .my-memo::after {
		width: 3px;
		height: 3px;
		left: 15px;
		bottom: -5px;
		border-radius: 1.5px;
		}

#contents.list .my-memo p {
	position: relative;
	}

	#contents.list .my-memo p::before {
		content: "MEMO";
		position: absolute;
		top: 0;
		left: -32px;
		font-family: "Barlow Condensed", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-size: 12px;
		line-height: inherit;
		color: rgba(0,0,0,.2);
		}

#contents.list .item h2 {
	margin-bottom: .5rem;
	}

#contents.list .item i {
	display: block;
	font-size: .9rem;
	line-height: 1.5rem;
	}

#contents.list .item .brandname,
#contents.list .item time {
	margin-right: 8px;
	padding-left: 20px;
	background: url("../image/icon_brandname.svg") no-repeat left center / 16px;
	}

#contents.list .item time {
	background: url("../image/icon_time.svg") no-repeat left center / 16px;
	}

	#contents.list .item.live time {
		color: var(--strong-color);
		font-weight: 700;
		}

#contents.list .item time small {
	margin-left: 2px;
	font-size: .7rem;
	vertical-align: baseline;
	}

#contents.list .item em.prebid {
	display: block;
	color: var(--link-color);
	font-weight: 700;
	}

#contents.list .item select.bid-price {
	margin-top: 1rem;
	}

#contents.list .item .suggest {
	display: block;
	font-size: .8rem;
	line-height: 1.5rem;
	text-align: center;
	}

#contents.list .item .prebid-buttons {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	width: 100%;
	}

#contents.list .item .prebid-buttons .choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-bottom: 8px;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	}

#contents.list .item .prebid-buttons .choices li {
	flex-grow: 1;
	width: 30%;
	}

#contents.list .item .prebid-buttons .choices li.reset {
	display: none;
	}

#contents.list .item .prebid-buttons .choices li a {
	display: block;
	background: var(--ui-color);
	border-radius: 4px;
	text-align: center;
	line-height: 28px;
	}

	#contents.list .item .prebid-buttons .choices.over500 li.choice500 a,
	#contents.list .item .prebid-buttons .choices.over1000 li.choice1000 a,
	#contents.list .item .prebid-buttons .choices.over5000 li.choice5000 a {
		background: #eee;
		color: #999;
		pointer-events: none;
		}

#contents.list .item .prebid-buttons .choices li a:hover {
	filter: brightness(1.04);
	}

#contents.list .item .bid {
	flex-grow: 1;
	}

#contents.list .item.has-prebid .bid {
	color: var(--highlight-color);
	}

#contents.list .item .bid:not(.cancel)::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	margin-right: 4px;
	background: url("../image/icon_bid.svg") no-repeat center center / 36px;
	border-radius: .2rem;
	text-align: center;
	color: #fff;
	line-height: 2.5rem;
	vertical-align: bottom;
	}

	#contents.list .item.has-prebid .bid::before {
		background: url("../image/icon_bid_highlight.svg") no-repeat center center / 36px;
		}

	#contents.list .item.has-prebid .bid::after {
		content: "更新";
		}

#contents.list .item .cancel {
	display: none;
	padding: 4px 16px;
	background: var(--strong-color);
	line-height: 36px;
	color: #000;
	}

	#contents.list .item.has-prebid .cancel {
		display: block;
		}

#contents.list .item .access {
	margin-top: 1rem;
	}

#contents.list .more {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 16px;
	background: var(--base-color);
	box-sizing: border-box;
	}

#contents.list .more p {
	line-height: 44px;
	font-size: 1.2rem;
	}

#contents.list .more .access {
	width: fit-content;
	padding-right: 48px;
	background-color: var(--link-color);
	}




/* ---------- detail ---------- */

#contents.detail {
	display: flex;
	align-items: start;
	}

#contents.detail #item-photo {
	position: sticky;
	top: 64px;
	width: 45vw;
	padding: 0 64px;
	box-sizing: border-box;
	flex-shrink: 0;
	}

#contents.detail #photo-main {
	position: relative;
	border: 1px solid rgba(0,0,0,.2);
	border-bottom: none;
	overflow: hidden;
	}
	/*
	#contents.detail #photo-main.sold::before,
	#contents.detail #photo-main.unsold::before,
	#contents.detail #photo-main.live::before {
		content: "落札";
		position: absolute;
		top: 12px;
		left: -52px;
		width: 128px;
		transform-origin: center top;
		transform: rotate(-45deg);
		background: var(--strong-color);
		line-height: 40px;
		color: #fff;
		font-size: 1.2rem;
		font-weight: 700;
		text-align: center;
		z-index: 10;
		}

	#contents.detail #photo-main.unsold::before {
		content: "流札";
		background: var(--link-color);
		}

	#contents.detail #photo-main.live::before {
		content: "LIVE";
		background: radial-gradient(at 100% 100%, rgba(139, 218, 201, 1), rgba(149, 203, 189, 1));
		animation: hue 0.7s alternate infinite linear;
		}
	*/
#contents.detail #photo-main ol,
#contents.detail #photo-main li,
#contents.detail #photo-main li a {
	display: block;
	position: relative;
	width: 100%;
	height: auto !important;
	aspect-ratio: 1 !important;
	background: var(--base-color);
	}

#contents.detail #photo-main ol {
	display: flex;
	}

#contents.detail #photo-main li img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

#contents.detail .splide__arrow--prev {
	left: 8px !important;
	}

#contents.detail .splide__arrow--next {
	right: 8px !important;
	}

#contents.detail #photo-thumbnail {
	padding: 8px 0;
	border: 1px solid rgba(0,0,0,.2);
	border-top: none;
	}

#contents.detail #photo-thumbnail .is-active::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.6);
	}

#contents.detail #detail {
	flex-grow: 1;
	position: relative;
	margin-right: 64px;
	}

#contents.detail #detail header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 3rem;
	padding-right: 72px;
	}

#contents.detail #detail header .lotno {
	font-size: .9rem;
	line-height: .9rem;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	}

#contents.detail #detail header strong {
	flex-grow: 1;
	margin: 0 4px;
	font-size: 2.2rem;
	line-height: 2.2rem;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-weight: inherit;
	color: #000;
	}

#contents.detail #detail h1 {
	width: 100%;
	font-size: 2rem;
	line-height: 2.4rem;
	font-weight: 700;
	}

#contents.detail #detail header .like {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	background: url("../image/icon_memo.svg") no-repeat center center / 56px;
	}

#contents.detail #detail header .like {
	background: url("../image/icon_like.svg") no-repeat center center / 56px;
	}

	#contents.detail #detail header .like.liked {
		background: url("../image/icon_liked.svg") no-repeat center center / 56px;
		}

#contents.detail #detail header .like::after {
	content: "お気に入り";
	position: absolute;
	left: -8px;
	right: -8px;
	bottom: -20px;
	font-size: .7rem;
	text-align: center;
	}

#contents.detail #detail em.sold,
#contents.detail #detail em.unsold {
	display: block;
	margin-bottom: 2rem;
	padding: 1rem;
	background: var(--link-color);
	text-align: center;
	font-size: 1.6rem;
	line-height: 100%;
	color: #000;
	}

#contents.detail #detail em.unsold {
	background: #ccc;
	}

#contents.detail #detail p {
	margin-bottom: 3rem;
	}

#contents.detail #detail h2 {
	margin: 2rem 0 1rem;
	font-size: 1.5rem;
	line-height: 1.5rem;
	font-weight: 700;
	}

#contents.detail #detail .date {
	display: flex;
	justify-content: space-between;
	padding: 8px 16px 8px 40px;
	border: 1px solid var(--border-color);
	background: url("../image/icon_time.svg") no-repeat left 12px center / 24px;
	font-size: 1.2rem;
	line-height: 2rem;
	}

#contents.detail #detail .date time {
	font-size: 1.4rem;
	line-height: 2rem;
	}

#contents.detail #detail .date time::after {
	content: "ごろ";
	margin-left: 8px;
	font-size: .8rem;
	line-height: .8rem;
	}

#contents.detail #detail .prebid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 3rem;
	padding: 16px;
	border: 1px solid var(--border-color);
	}

	body.light-detail #contents.detail #detail .prebid {
		display: none;
		}

#contents.detail #detail .head {
	display: flex;
	justify-content: space-between;
	width: 100%;
	}

#contents.detail #detail .head .guide {
	display: flex;
	gap: 2rem;
	}

#contents.detail #detail .head .guide a {
	display: block;
	color: var(--link-color);
	text-decoration: underline;
	}

#contents.detail #detail .prebid h2 {
	margin: 0 0 0 -8px;
	padding-left: 32px;
	background: url("../image/icon_bid_black.svg") no-repeat left center / 32px;
	font-size: 1.2rem;
	font-weight: normal;
	}

#contents.detail #detail .prebid .price {
	flex-grow: 1;
	}

#contents.detail #detail .prebid i {
	display: block;
	width: 100%;
	margin-top: .5rem;
	font-size: .9rem;
	text-align: center;
	}

#contents.detail #detail .prebid.has-prebid a.bid {
	color: var(--highlight-color);
	}

#contents.detail #detail .prebid-buttons {
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	width: 100%;
	}

#contents.detail #detail .prebid-buttons .choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin-bottom: 8px;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	}

#contents.detail #detail .prebid-buttons .choices li {
	flex-grow: 1;
	width: 30%;
	}

#contents.detail #detail .prebid-buttons .choices li a {
	display: block;
	background: var(--ui-color);
	border-radius: 4px;
	text-align: center;
	line-height: 28px;
	}

	#contents.detail #detail .prebid-buttons .choices.over500 li.choice500 a,
	#contents.detail #detail .prebid-buttons .choices.over1000 li.choice1000 a,
	#contents.detail #detail .prebid-buttons .choices.over5000 li.choice5000 a {
		background: #eee;
		color: #999;
		pointer-events: none;
		}

#contents.detail #detail .prebid-buttons .choices li a:hover {
	filter: brightness(1.04);
	}

#contents.detail #detail .prebid-buttons .bid {
	flex-grow: 1;
	}

#contents.detail #detail .prebid-buttons .cancel {
	display: none;
	padding: 4px 16px;
	background: var(--strong-color);
	line-height: 36px;
	color: #000 !important;
	}

	#contents.detail #detail .bid-container.has-prebid .prebid-buttons .cancel {
		display: block;
		}

#contents.detail #detail .memo .my-memo {
	display: block;
	padding: 16px 56px 16px 16px;
	border: 1px solid var(--border-color);
	border-radius: .5rem;
	background: url("../image/icon_edit.svg") no-repeat right 16px center / 24px;
	box-shadow: 0 0 4px rgba(0,0,0,.1) inset;
	}

	#contents.detail #detail .memo:not(.has-memo) .my-memo::before {
		content: "ここにメモを記入できます";
		opacity: .5;
		}

#contents.detail #detail .info div {
	display: flex;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-color);
	line-height: 1.2rem;
	}

#contents.detail #detail .info dt {
	display: block;
	flex-shrink: 0;
	width: 6rem;
	font-size: .8rem;
	color: rgba(0,0,0,.6);
	}

#contents.detail #detail .info dd {
	flex-grow: 1;
	}

#contents.detail #detail .info dd.rank {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	}

#contents.detail #detail .info dd .about-rank {
	display: inline-block;
	padding: 0 8px;
	background: var(--link-color);
	border-radius: 4px;
	color: #fff;
	font-size: .8rem;
	line-height: inherit;
	white-space: nowrap;
	}




/* ---------- site contents ---------- */

.site-contents {
	max-width: 960px;
	margin: auto;
	padding: 0 64px;
	}

.site-contents h1 {
	margin-bottom: 3rem;
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 900;
	}




/* ---------- support contents ---------- */

.support {
	max-width: 960px;
	margin: auto;
	padding: 0 64px;
	}

.support h1 {
	margin-bottom: 3rem;
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 900;
	}

.support .index {
	display: flex;
	justify-content: start;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 2rem;
	}

.support .index li {
	flex-shrink: 0;
	width: calc((100% - 4rem) / 3);
	text-align: center;
	background: var(--base-color);
	border-radius: 1rem;
	transition: box-shadow 100ms ease-out, transform 100ms ease-out;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	}

	.support .index li:hover {
		box-shadow: 2px 4px 4px rgba(0,0,0,.06), -1px -1px 0 #fff inset;
		transform: translateY(-4px);
		}

.support .index a {
	display: block;
	padding: 1.5rem 1rem;
	}

.support .index img {
	width: 64px;
	}

.support .index em {
	display: block;
	padding: .5rem 0;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--link-color);
	}

.support .index p {
	font-size: .9rem;
	}

.support .list a {
	color: var(--link-color);
	text-decoration: underline;
	font-weight: bold;
	}

.support .list div {
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-color);
	line-height: 1.5rem;
	vertical-align: baseline;
	}

	.support .list.step div {
		flex-direction: column;
		padding: 2rem 0;
		}

.support .list dt {
	flex-shrink: 0;
	width: 14rem;
	padding-left: 1.5rem;
	box-sizing: border-box;
	font-weight: 700;
	vertical-align: baseline;
	}

	.support .list.step dt {
		width: auto;
		}

	.support .list dt::before {
		content: "●";
		display: inline-block;
		margin: 0 .5rem 0 -1.5rem;
		border-radius: .5rem;
		color: var(--link-color);
		}

	.support .list dt i {
		margin-right: 1rem;
		font-weight: 900;
		color: var(--link-color);
		}

.support .list dd {
	flex-grow: 1;
	}

	.support .list.step dd {
		margin-left: 0 !important;
		padding-top: .5rem;
		}

.support.operation {
	max-width: none;
	padding: 0;
	}

.support.operation header,
.support.operation section:not(#app) {
	max-width: 960px;
	margin: auto;
	}

.support.operation h2 {
	margin-bottom: 48px;
	font-size: 32px;
	font-weight: 900;
	line-height: 36px;
	}

.support.operation #app {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 380px;
	margin: 96px 0 128px 0;
	padding-left: 240px;
	background: var(--base-color);
	box-sizing: border-box;
	text-align: center;
	}

.support.operation .mock {
	position: absolute;
	top: -50px;
	left: 50%;
	margin-left: -480px;
	width: auto;
	height: 480px;
	}

.support.operation #app h2 {
	margin: 0;
	}

.support.operation #app h2 br {
	display: none;
	}

.support.operation #app p {
	margin: 16px 0 24px 0;
	}

.support.operation #install {
	display: flex;
	width: fit-content;
	gap: 32px;
	}

.support.operation #install li {
	order: 1;
	width: 128px;
	}

	.support.operation #install li#android-app {
		order: 3;
		}

.support.operation #install::before {
	content: "";
	order: 2;
	width: 1px;
	background: var(--border-color);
	}

.support.operation #install .qr {
	margin-top: 16px;
	}

.support.operation #prebid,
.support.operation #live {
	max-width: 1024px;
	}

.support.operation #live {
	margin-top: 48px !important;
	}

.support.operation #prebid h2,
.support.operation #live h2 {
	margin-right: 32px;
	margin-left: 32px;
	padding-top: 48px;
	border-top: 1px dashed var(--border-color);
	}

.support.operation #prebid .mobile,
.support.operation #live .mobile {
	display: none;
	}




/* ---------- terms ---------- */

.terms {
	max-width: 960px;
	margin: auto;
	padding: 0 64px;
	}

.terms h1 {
	margin-bottom: 3rem;
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 900;
	}

.terms h2 {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-color);
	font-size: 1.3rem;
	}

.terms a {
	display: inline-block;
	margin-top: .5rem;
	word-break: break-word;
	}

.terms .sub-title {
	margin-top: 3rem;
	font-size: 1.3rem;
	}

	.terms .appendix .sub-title {
		font-size: 1rem;
		}

.terms p {
	margin-top: 1rem;
	}

	.terms li p {
		margin-top: 0;
		}

	.terms dl.legal p:first-child {
		margin-top: 0;
		}

.terms p em {
	display: inline-block;
	margin-left: 1rem;
	}

	.terms p em::before {
		content: "※";
		display: inline-block;
		position: relative;
		width: 1rem;
		margin-left: -1rem;
		}

.terms ol {
	padding-top: .5rem;
	}

	.terms > ol {
		padding-top: 1rem;
		}

.terms ol li {
	margin: .5rem 0 0 1.5rem;
	list-style-type: decimal;
	}

.terms ul {
	padding-top: .5rem;
	}

.terms ul li {
	margin: .5rem 0 0 1.5rem;
	list-style-type: disc;
	}

.terms ol:first-child,
.terms ul:first-child,
.terms ul:first-child li:first-child {
	margin-top: 0;
	padding-top: 0;
	}

.terms dl.contact {
	margin-top: 1rem;
	}

.terms dl div {
	margin-top: 1rem;
	}

	.terms dl.contact div {
		display: flex;
		margin: 0;
		}

	.terms dl.legal div {
		display: flex;
		margin-top: 2rem;
		padding-top: 1rem;
		border-top: 1px dotted var(--border-color);
		}

.terms dl dt {
	padding-top: 1rem;
	font-weight: bold;
	}

	.terms dl.list dt {
		margin: .5rem 0 0 0;
		padding: 0 0 0 2rem;
		font-weight: normal;
		}

	.terms dl.contact dt {
		flex-shrink: 1;
		width: 3rem;
		padding: 0;
		font-weight: normal;
		}

	.terms dl.legal dt {
		flex-shrink: 1;
		width: 13rem;
		padding: 0;
		font-weight: normal;
		}

.terms dl dt i {
	display: inline-block;
	width: 2rem;
	}

	.terms dl.common > div > dt i {
		width: 4rem;
		}

	.terms dl.list dt i {
		position: relative;
		margin-left: -2rem;
		}

.terms dd dd,
.terms dl > div > dd {
	margin-left: 2rem;
	}

	.terms dl.contact dd,
	.terms dl.legal dd {
		margin: 0;
		padding: 0;
		}

	.terms dl.legal dd {
		width: calc(100% - 13rem);
		}

.terms .appendix table {
	margin-top: 1rem;
	border-collapse: collapse;
	}

	.terms .appendix .column table {
		flex-grow: 1;
		}

	.terms .appendix .column {
		column-gap: 24px;
		}

.terms .appendix th,
.terms .appendix td {
	padding: 4px 8px;
	border: 1px solid var(--border-color);
	}

.terms .appendix thead th {
	white-space: nowrap;
	background-color: var(--base-color);
	}

.terms .appendix tbody th {
	text-align: center;
	}

.terms .appendix tbody td.label {
	white-space: nowrap;
	}

.terms footer {
	margin-top: 2rem;
	text-align: right;
	}