/* ------------------------------------------- over 1440 */

@media screen and (min-width: 1440px) {

}



/* ------------------------------------------- under 1080 */

@media screen and (max-width: 1080px) {

#contents.list header {
	top: 104px;
	width: 28vw;
	margin: 32px 0 0 32px;
	padding-bottom: 32px;
	}

#contents.list .items {
	gap: 32px;
	padding: 32px;
	}

#contents.list .items .item {
	width: calc((100% - 32px) / 2);
	}

.support .index li {
	width: calc(50% - 1rem);
	}

.support.operation h1 {
	padding: 0 32px;
	}

.support.operation #app {
	margin: 64px 0;
	padding-left: 160px;
	}

.support.operation .mock {
	top: 30px;
	margin-left: -400px;
	height: 320px;
	}

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

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

	#contents.about dl::before {
		margin-top: 20%;
		}

	#contents.about dl::after {
		margin-bottom: 20%;
		}

#contents.about dl div {
	max-width: 50vw;
	}

}



/* ------------------------------------------- under 860 */

@media screen and (max-width: 860px) {

body:not(.light-detail) {
	padding-top: 96px;
	}

header.global {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background: rgba(255,255,255,.9);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	overflow-y: auto;
	z-index: 10000;
	}

	body.menu header.global {
		height: 100vh;
		}

header.global #logo {
	width: 360px;
	margin: 24px auto;
	}

header.global nav {
	}

header.global .global {	
	display: none;
	font-size: 1.4rem;
	}

	body.menu header.global .global,
	body.menu header.global .mobile {
		display: flex !important;
		flex-direction: column;
		}

header.global .mobile-menu {
	display: block !important;
	position: absolute;
	top: 0;
	right: 16px;
	width: 72px;
	height: 76px;
	padding: 16px 0;
	box-sizing: border-box;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 21px;
	line-height: 56px;
	text-align: center;
	color: #000;
	transition: color 200ms ease-out;
	}

	body.menu header.global .mobile-menu {
		color: rgba(0,0,0,0);
		}

header.global .mobile-menu::before,
header.global .mobile-menu::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 16px;
	width: 40px;
	height: 4px;
	border-radius: 1;
	background: #000;
	transition: transform 200ms ease-in-out;
	transform-origin: 50% 50%;
	}

	header.global .mobile-menu::after {
		transition: transform 300ms ease-in-out;
		}

	body.menu header.global .mobile-menu::before,
	body.menu header.global .mobile-menu::after {
		color: rgba(0,0,0,0);
		transform: translate3d(0,-20px,0) rotate(45deg);
		}

	body.menu header.global .mobile-menu::after {
		transform: translate3d(0,-20px,0) rotate(-45deg);
		}

header.global ul a::after {
	display: none;
	}

header.global ul {
	display: block; !important;
	padding: 24px 0;
	}

header.global li {
	margin-bottom: 8px;
	order: 2;
	}

header.global ul li.account {
	width: fit-content !important;
	height: auto;
	margin: 0 auto 1.5rem auto;
	background: var(--link-color) !important;
	border-radius: 1rem;
	order: 1;
	}

header.global ul li.account label {
	display: block;
	width: fit-content !important;
	height: auto !important;
	margin: auto;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	opacity: 1;
	font-size: .9rem;
	font-weight: 700;
	color: #000 !important;
	}

header.global ul li.account .content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	width: fit-content !important;
	height: auto !important;
	margin: auto;
	padding-top: 0 !important;
	background: none !important;
	opacity: 1;
	color: inherit !important;
	}

header.global ul li.account a {
	padding: 12px 0 !important;
	box-shadow: -1px 0 0 1px rgba(255,255,255,.2) inset;
	text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
	background: rgba(255,255,255,.1);
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	}

header.global ul.global li a {
	display: block;
	padding: 8px 0;
	}

header.global ul.global li:not(.account) a {
	margin-bottom: 8px;
	}

header.global ul li.account em {
	width: 100%;
	padding-bottom: 8px;
	opacity: 1 !important;
	}

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

header.global ul li.account a {
	flex-grow: 1;
	font-size: 80%;
	}

header.global ul li.account a:last-child {
	border-left: 1px solid var(--border-color);
	}

header.global ul a,
header.global ul label {
	width: fit-content;
	margin: auto;
	text-shadow: none !important;
	}

header.global ul a,
header.global ul label {
	width: fit-content;
	margin: auto;
	text-shadow: none !important;
	}

#contents:not(.index) {
	padding-top: 48px;
	}

	body.light-detail #contents.detail {
		padding: 32px 0 48px 0;
		}

footer.global {
	padding: 24px;
	}

footer.global ul {
	display: none;
	}

footer.global li {
	margin-bottom: 8px;
	}

footer.global .copyright {
	margin-top: 0;
	}

#link h1 {
	margin: 0 0 32px 0;
	padding: 32px 0;
	font-size: 2.5rem;
	line-height: 5rem;
	}

#contents.list .list-filter dt {
	padding: 0 1rem;
	}

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

#contents.list .list-filter dd,
#contents.list .list-filter dd label {
	font-size: .8rem;
	}

#contents.list .date {
	top: 96px;
	}

#contents.list .items .live-notice {
	font-size: 1rem;
	}

#contents.detail {
	flex-direction: column !important;
	}

#contents.detail #item-photo {
	position: relative;
	top: 0;
	width: 100%;
	padding: 0 32px;
	}

#contents.detail #detail {
	margin: 32px 48px 0 48px;
	}

#contents.detail #detail .date,
#contents.detail #detail .prebid h2 {
	font-size: 1rem;
	}

#signup-form,
#contents.terms {
	padding-right: 48px;
	padding-left: 48px;
	}

#signup-form h1,
#contents.terms h1 {
	font-size: 2.4rem;
	line-height: 2.4rem;
	}

.support {
	padding-right: 24px;
	padding-left: 24px;
	}

.support h1 {
	font-size: 2.4rem;
	line-height: 2.4rem;
	}

.support .list div {
	display: block;
	}

	.support .list div:first-child {
		padding-top: 0;
		}

.support .list dt {
	width: auto;
	}

.support .list dd {
	margin: .5rem 0 0 1.5rem;
	}

.support.operation h1 {
	padding: 0 24px;
	}

.support.operation h2 {
	margin: 0 24px 24px 24px !important;
	padding-top: 32px !important;
	font-size: 1.6rem;
	line-height: 140%;
	}

.support.operation #app {
	flex-direction: column;
	align-items: center;
	height: auto;
	margin: 32px 0 32px 0;
	padding: 32px 24px 24px 24px;
	}

.support.operation .mock {
	position: static;
	margin: 0 0 24px 0;
	width: auto;
	height: 240px;
	}

.support.operation #app h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1.4rem;
	line-height: 140%;
	}

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

.support.operation #app p {
	font-size: .8rem;
	line-height: 160%;
	}

}



/* ------------------------------------------- under 760 */

@media screen and (max-width: 760px) {

#contents.list.null::before {
	content: "";
	height: 100vh;
	}

#contents.list.null::after {
	content: "まだオークションの予定がありません";
	display: block;
	position: fixed;
	top: 96px;
	left: 0;
	width: 100%;
	padding: 16px 0;
	text-align: center;
	line-height: 36px;
	color: #999;
	}

#contents.list .list-filter dl {
	flex-wrap: wrap;
	}

#contents.list .list-filter dl::before {
	content: "";
	order: 3;
	width: 100%;
	}

#contents.list .list-filter dt {
	padding: 0;
	order: 1;
	}

#contents.list .list-filter dd {
	flex-wrap: wrap;
	row-gap: 0;
	order: 10;
	}

#contents.list .list-filter.head {
	display: none;
	}

#contents.list .list-filter input[type=checkbox] {
	margin: 0 4px 0 0;
	}

#contents.list .list-filter dd.keyword {
	padding-left: 1rem;
	order: 2
	}

#contents.list .list-filter input[type=search] {
	width: calc(100% - 32px);
	}

#contents.list .list-filter dd label {
	display: flex;
	gap: 4px;
	align-items: center;
	flex-direction: row;
	line-height: 1.4rem;
	}

#contents.list .list-filter input[type=checkbox] {
	margin: 4px 0 0 0;
	}

#contents.list .date {
	top: 96px;
	}

#contents.list .items .item {
	width: 100%;
	}

#contents.list .list-filter.foot {
	bottom: 0;
	transform: translate(0,0) !important;
	}

#contents.list .list-filter.foot dl {
	justify-content: center;
	padding-bottom: 12px;
	border-radius: 1.5rem 1.5rem 0 0;
	}

#contents.detail #detail h1 {
	font-size: 1.5rem;
	line-height: 1.8rem;
	}

.support .index {
	flex-direction: column;
	gap: 16px;
	}

.support .index li {
	width: auto;
	}

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

.support.operation #prebid .mobile,
.support.operation #live .mobile {
	display: block !important;
	}

#memo-form label {
	padding: 32px;
	}

#memo-form textarea {
	padding: 16px;
	font-size: 1.6rem;
	}

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

#contents.about dl div {
	max-width: none;
	margin: 0 30vw 48px 48px;
	}

	#contents.about dl div.join,
	#contents.about dl div.signup {
		margin: 0 48px 48px 30vw;
		}

#contents.about dt {
	margin: 0;
	padding: 0 0 0 24px;
	background: url("../image/separator_vertical_white.svg") no-repeat left -16px center / 48px;
	font-size: 1.6rem;
	text-align: left;
	}

#contents.about a.button {
	margin: 16px 0 0 0;
	}

#contents.about footer {
	padding: 48px;
	font-size: 1.2rem;
	line-height: 160%;
	text-align: left;
	}

#contents.about footer br {
	display: none;
	}

}



/* ------------------------------------------- under 640 */

@media screen and (max-width: 640px) {

#signup-form footer input[type=submit],
#signup-form footer .button {
	padding: 8px 24px !important;
	background: #000;
	}

#signup-form footer .button.cancel {
	padding: 8px 24px !important;
	background: #ccc;
	}

body:not(.light-detail) {
	padding-top: 64px;
	}

header.global {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background: #fff;
	overflow-y: auto;
	z-index: 10000;
	}

header.global #logo {
	width: 240px;
	margin: 16px;
	}

header.global .mobile-menu {
	width: 56px;
	height: 54px;
	padding: 8px 0;
	box-sizing: border-box;
	font-family: "Barlow Condensed", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-size: 21px;
	line-height: 32px;
	text-align: center;
	color: #000;
	transition: color 300ms ease-out;
	}

header.global .mobile-menu::before,
header.global .mobile-menu::after {
	left: 8px;
	}

	body.menu header.global .mobile-menu::before,
	body.menu header.global .mobile-menu::after {
		transform: translate3d(0,-12px,0) rotate(45deg);
		}

	body.menu header.global .mobile-menu::after {
		transform: translate3d(0,-12px,0) rotate(-45deg);
		}

header.global .global {
	font-size: 1.2rem;
	}

footer.global {
	margin-top: 0;
	border-top: 48px solid #fff;
	}

#contents:not(.index) {
	padding-top: 24px;
	}

#contents.list {
	padding-top: 0;
	}

#contents.list.null::after {
	top: 64px;
	}

#contents.list .items .live-notice {
	flex-direction: column-reverse;
	padding: 16px 16px 12px 16px;
	gap: 8px;
	}

#contents.list .items .live-notice .access {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	}

#login-contents form {
	margin: 24px;
	}

#login-contents form footer > * {
	width: 100%;
	}

#login-contents form footer #forget {
	order: 4;
	}

#login-contents form footer #signup {
	order: 5;
	margin-top: 16px;
	}

#auction-overview.splide:not(.splided) {
	padding-bottom: 0 !important;
	}

#auction-overview .index {
	width: auto !important;
	margin: 70vh -16px 0 -16px;
	}

#auction-overview .index::after,
#auction-overview .index video {
	position: fixed;
	top: 128px !important;
	width: 100vw !important;
	aspect-ratio: 9/16;
	}

#auction-overview .index .content {
	display: static;
	}

#auction-overview .next-time {
	position: fixed;
	top: 62px !important;
	right: 0;
	left: 0;
	width: auto;
	background: #fff;
	z-index: 20;
	}

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

#auction-overview .next-time dd#counter {
	justify-content: center;
	}

#auction-overview .next-time dd#counter::before {
	content: "次回開催";
	display: block;
	width: 2rem;
	text-align: left;
	font-size: .7rem;
	line-height: 16px;
	color: #000;
	}

#auction-overview .next-time i {
	color: #000;
	}

#auction-overview .n0 .next-time {
	display: block !important;
	}

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

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

#auction-overview .overview-item {
	width: 100%;
	padding: 16px;
	background-color: #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.2);
	}

	#auction-overview .n1 .overview-item.placeholder:not(:last-child),
	#auction-overview .overview-item.placeholder:last-child {
		display: none !important;
		}

#auction-overview .overview-item.index .items {
	margin: 0 16px;
	}

#auction-overview .list small {
	font-size: .7rem;
	}

#auction-overview.splide:not(.splided) .splide__list {
	flex-direction: column !important;
	gap: 16px !important;
	padding: 16px 16px 0 16px !important;
	}

#auction-overview .overview-item:not(.index)::before {
	display: none;
	}

.splide:not(.splided) .splide__list::after {
	height: 0;
	}

#auction-overview .overview-item:not(.index) label {
	right: 16px;
	left: 16px;
	}

#link {
	position: relative;
	background: #fff;
	z-index: 10;
	}

#link .splide:not(.splided) .splide__list {
	padding-left: 16px !important;
	}

#contents.list .auction {
	}

#contents.list .date {
	top: 64px;
	}

#contents.list .date time {
	font-size: 32px;
	line-height: 32px;
	}

#contents.list header {
	position: static;
	float: none;
	width: auto;
	margin: 16px;
	padding-bottom: 0;
	overflow: hidden;
	}

#contents.list.all header .thumbnail {
	float: left;
	width: 30vw;
	margin-right: 1.5rem;
	}

#contents.list.all header .notice {
	white-space: nowrap;
	overflow: hidden;
	}

#contents.list .items {
	position: relative;
	margin:  0 0 0 32px;
	padding: 16px;
	}

#contents.list .items::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: -16px;
	width: 6px;
	border-radius: 3px;
	background: rgba(0,0,0,.1);
	}

#contents.list .more {
	flex-direction: column;
	}

#contents.list .more p {
	margin-bottom: 8px;
	font-size: .9rem;
	line-height: 100%;
	}

#contents.list .more a {
	width: auto !important;
	}

body.light-detail #contents.detail {
	padding: 24px 0;
	}

#contents.detail #item-photo {
	padding: 0 24px;
	}

#contents.detail #detail {
	margin: 32px 24px 0 24px;
	}

#contents.detail #detail .date {
	flex-direction: column;
	background-position: left 12px top 12px;
	}

#contents.detail #detail .head {
	flex-wrap: wrap;
	}

#contents.detail #detail .head h2 {
	margin-bottom: 8px;
	width: 100%;
	}

#contents.detail #detail .head .guide {
	gap: 1rem;
	font-size: .9rem;
	}

#signup-form,
#contents.terms {
	padding-right: 24px;
	padding-left: 24px;
	}

#signup-form dl dt {
	float: none;
	width: 100%;
	padding: .5rem 0 0 0;
	font-size: .8rem;
	color: var(--link-color);
	}

	#signup-form dl dt::before {
		top: .5rem !important;
		right: 0 !important;
		}

#signup-form dl dd {
	width: auto;
	margin: 0;
	padding: .5rem 0;
	border-top: 1px dotted var(--border-color);
	}

.terms dl.legal div {
	flex-direction: column;
	border-top: 1px solid var(--border-color);
	}

.terms dl.legal dt {
	width: auto;
	padding: 0 0 .5rem;
	font-weight: 700;
	}

.terms dl.legal dd {
	width: auto;
	padding-top: 1rem;
	border-top: 1px dotted var(--border-color);
	}

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

#contents.about header {
	padding: 48px 32px 40vw 32px;
	padding-bottom: 40vw;
	}

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

#contents.about header .title {
	margin: 2rem 0;
	}

#contents.about header p {
	text-align: left;
	}

#contents.about header p br {
	display: none;
	}

#contents.about dl div {
	margin: 0 25vw 32px 32px;
	}

#contents.about dl div.join,
#contents.about dl div.signup {
	margin: 0 32px 32px 25vw;
	}

#contents.about dt {
	font-size: 1.2rem;
	}

}