@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Dancing+Script:wght@400..700&display=swap');
:root {
	--width: 80%;
	--max-width: 1000px;
}
@keyframes scaleAnimation {
	  0% { transform: scale(1); }
	 20% { transform: scale(2) rotateZ(var(--gNavi-deg)); z-index: 10; }
	100% { transform: scale(1.2); }
}
@keyframes scaleBack {
	  0% { transform: scale(1.2); }
	100% { transform: scale(1); }
}
@keyframes fill { /* htmlで定義した--stepをもとに.progressの左から何%までの背景色を変更するか計算 */
	to { right: calc((4 - var(--step)) * 25%); }
}
* {
	box-sizing: border-box;
}
html {
	height: 100%;
	font-size: 20px;
	line-height: 24px;
	& body {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		margin: 0;
		padding: 0;
		background: #000;
		color: #FFF;
		font-family: Arial, sans-serif;
		transition: opacity .5s;
		&:has(#gNavi.active) { overflow: hidden; }
		& ul, & li, & dd, & dt, & dd {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		& select, & input, & textarea, & button { font-size: 1rem; }
		& input, & textarea { padding: .1rem .3rem; }
		& img {
			max-width: 100%;
			height: auto;
			vertical-align: middle;
		}
		& a {
			color: #FFF;
			/* text-decoration: none; */
			transition: .3s;
			&:hover { opacity: .7; }
		}
		& h2 {
			margin: 8rem auto 2rem;
			line-height: 4rem;
			font-size: 4rem;
			text-align: center;
		}
		& iframe { max-width: 100%; }
		& blockquote {
			padding: 1rem;
			background: #111;
		}
		& .aligncenter {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		& .alignleft { float: left; }
		& .alignright { float: right; }
		& .notice { color: #F00; }
		& .clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		.container {
			overflow: hidden;
		}
		& header {
			position: fixed;
			top: 0;
			width: 100%;
			background: #000;
			z-index: 715;
			& #gNavi {
				& .btn-menu {
					display: none;
					position: absolute;
					top: 4rem;
					right: 1rem;
					width: 2rem;
					max-width: none;
					height: 2rem;
					padding: 0;
					border: none;
					background-color: transparent;
					filter: drop-shadow(0 0 1px #000);
					cursor: pointer;
					appearance: none;
					color: #FFF;
					&:before,
					&:after {
						position: absolute;
						left: 50%;
						content: '';
						width: 80%;
						height: .2rem;
						background: #FFF;
						border-radius: 100px;
						transition: .3s;
						transform: translate(-50%, -50%);
						transform-origin: center;
					}
					&:before { top: .5rem; }
					&:after  { top: calc(100% - .5rem); }
					&.close {
						&:before {
							top: 50%;
							transform: translate(-50%, -50%) rotate(-405deg);
						}
						&:after  {
							top: 50%;
							transform: translate(-50%, -50%) rotate(225deg);
						}
					}
				}
				& .btn-cart {
					position: absolute;
					top: 50%;
					right: 1rem;
					width: 2rem;
					height: 2rem;
					cursor: pointer;
					transform: translateY(-50%);
					filter: drop-shadow(0 0 1px #000);
  					&:not([data-count="0"]):after {
						content: attr(data-count);
						position: absolute;
						top: -.3rem;
						right: -.3rem;
						padding: 0 .3rem;
						background: #F00;
						border-radius: 100px;
					}
				}
				& ul {
					display: flex;
					justify-content: center;
					gap: 1.5rem;
					& li {
						position: relative;
						margin: 0;
						--gNavi-deg: 5deg;
						&:nth-of-type(2n) { --gNavi-deg: -5deg; }
						& a {
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							line-height: 4rem;
							font-family: 'Caveat', cursive;
							font-size: 1.8rem;
							font-weight: bold;
							text-decoration: none;
							transition: opacity 0s, transform .3s;
							&:hover {
								opacity: 1;
								animation: scaleAnimation 0.4s forwards;
							}
							&.active:not(:hover) { animation: scaleBack 0.2s forwards; }
						}
					}
				}
				& + .gNavi_bg {
					position: fixed;
					background: #000;
					width: 100%;
					height: 100%;
					opacity: 0;
					transition: .5s;
					pointer-events: none;
				}
			}
		}
		& .btn,
		/* & .skuForm .cart-button [type="submit"], */
		button,
		[type="button"],
		[type="submit"] {
			outline: none;
			box-shadow: none;
			appearance: none;

			max-width: 40%;
			line-height: 2rem;
			padding: 0 1rem !important;
			color: #FFF;
			background: #000;
			border: 1px solid #FFF;
			border-radius: 100px;
			cursor: pointer;
			transition: .3s;
			&:hover {
				opacity: 1;
			}
		}
		& .slide.slick-dotted.slick-slider {
			position: relative;
			overflow: hidden;
			margin-bottom: 0;
			padding-bottom: 6rem;
			&:before,
			&:after {
				content: '';
				position: absolute;
				top: 0;
				width: 5%;
				height: 100%;
				pointer-events: none;
				z-index: 2;
			}
			&:before {
				left: 0;
				background: linear-gradient(to right, #000, transparent);
			}
			&:after {
				right: 0;
				background: linear-gradient(to left, #000, transparent);
			}
			& .slick-dots {
				bottom: 3rem;
				& li {
					width: 1.5rem;
					height: 1.5rem;
					margin: 0 .3rem;
					& button {
						width: 1.5rem;
						height: 1.5rem;
						padding: .5rem;
						&:before {
							font-size: 1.5rem;
							line-height: 1.5rem;
							width: 1.5rem;
							height: 1.5rem;
							color: #FFF;
							transition: opacity .3s;
						}
					}
					&.slick-active {
						& button {
							&:before { color: #FFF; }
						}
					}
				}
			}
		}
		& nav.categories {
			& ul {
				display: flex;
				justify-content: center;
				gap: 1rem;
				margin: 2rem 0;
				& li {
					& a {
						display: block;
						padding: 0 .8rem;
						border: 1px solid #FFF;
						border-radius: 100px;
						font-size: .9rem;
						text-decoration: none;
						&.active,
						&:hover {
							color: #000;
							background: #FFF;
							opacity: 1;
						}
					}
				}
			}
		}
		& .remodal-wrapper {
			padding: 0;
			& .remodal {
				display:flex;
				align-items:center;
				justify-content:center;
				overflow:hidden;
				width: 90%;
				height: 90vh;
				margin: 5vh auto;
				& .remodal-close {
					left: auto;
					right: 0;
					width: 3.5rem;
					height: 3.5rem;
					z-index: 1;
					&:before {
						font-size: 3rem;
						line-height: normal;
						position: relative;
						top: auto;
						left: auto;
						width: auto;
					}
				}
				& iframe {
					width: 85%;
					aspect-ratio: 16/9;
				}
				& img {
					max-width:100%;
					max-height:100%;
					object-fit:contain;
				}
			}
		}
		& main {
			flex: 1;
			margin-top: 4rem;
			& #list {
				& #top {
					.container {
						& .container_inner {
							position: relative;
							width: var(--width);
							max-width: var(--max-width);
							margin: 0 auto;
							& > .img {
								position: relative;
								height: 95svh;
								overflow: hidden;
								clip-path: inset(0 round 0 0 50% 50% / 0 0 5% 2%);
								/* border-radius: 0 0 50% 50% / 0 0 5% 2%; */
								& > img {
									position: fixed;
									top: 0;
									left: 0;
									width: 100%;
									height: 100svh;
									object-fit: cover;
								}
							}
							h2 { font-family: 'Caveat', cursive; }
						}
						&#news,
						&#schedule,
						&#fanclub {
							& .container_inner {
								width: 100%;
								max-width: none;
								& ul {
									width: var(--width);
									max-width: var(--max-width);
									margin: 0 auto;
									border-top: 1px solid #FFF;
									& li {
										border-bottom: 1px solid #FFF;
										& a {
											display: flex;
											padding: .8rem 0;
											text-decoration: none;
											& .date { width: 7rem; }
											& .title {
												flex: 1;
												text-decoration: underline;
											}
										}
										&.more {
											border-bottom: none;
											& a {
												justify-content: flex-end;
												text-decoration: underline;
											}
										}
									}
								}
							}
						}
						&#gallery {
							& .container_inner {
								& > ul {
									display: flex;
									justify-content: center;
									margin: 0 .5rem;
									& li {
										flex: 1;
										max-width: 50%;
										margin: 0 .5rem;
										& a {
											display: block;
											text-align: center;
											& img {
												display: block;
												width: 80%;
												margin: 0 auto;
												aspect-ratio: 1;
												object-fit: contain;
											}
											& .title { padding: .8rem 0; }
										}
									}
								}
								& .more {
									margin-top: .8rem;
									border-top: 1px solid #FFF;
									a {
										display: flex;
										justify-content: flex-end;
										padding: .8rem 0;
									}
								}
							}
						}
						&#profile {
							& .container_inner {
								width: 100%;
								max-width: none;
								& > .img {
									height: 75svh;
									margin: 2rem 0;
									clip-path: inset(0 round 50% / 5% 2% 2% 5%);
									/* border-radius: 50% / 5% 2% 2% 5%; */
								}
								& .text {
									width: 40rem;
									max-width: var(--max-width);
									margin: 0 auto;
								}
							}
						}
						&#youtube {
							& .container_inner {
								width: 100%;
								max-width: none;
								& .slide_child {
									margin: 0 .5rem;
									&.slick-current { opacity: 1; }
									& img {
										display: block;
										width: 100%;
										max-width: calc(var(--max-width)*.8);
										margin: 0 auto;
										aspect-ratio: 16 / 9;
										object-fit: cover;
										border-radius: .8rem;
										overflow: hidden;
									}
								}
							}
						}
						&#contact {
							& .img {
								position: relative;
								width: 100%;
								height: 75svh;
								margin-bottom: 2rem;
								overflow: hidden;
								clip-path: inset(0 round 50% / 0 3% 0 3%);
								/* border-radius: 50% / 0 3%  0 3%; */
								& > img {
									position: fixed;
									top: 0;
									left: 0;
									width: 100%;
									height: 100svh;
									object-fit: cover;
								}
							}
							& h2 { margin-top: 2rem; }
							& .form {
								max-width: 40rem;
								margin: 0 auto;
								& form {
									& label {
										& .required {
											margin-left: .5rem;
											font-size: .8rem;
											color: #FF0;
										}
										& .wpcf7-not-valid-tip { color: #FF0; }
									}
									& input:not([type="submit"]),
									& textarea {
										width: 100%;
										padding: .5rem;
									}
									& [class*="-turnstile"] {
										display: flex;
										justify-content: center;
									}
									.btn {
										width: 100%;
										max-width: none;
										font-size: inherit;
									}
									& .wpcf7-spinner { display: none; }
									& .wpcf7-response-output {
										margin: 1em auto;
									}
								}
							}
						}
					}
				}
				& #sub {
					position: relative;
					width: var(--width);
					max-width: var(--max-width);
					margin: 0 auto;
					& h1 {
						margin: 3rem auto 2rem;
						line-height: 4rem;
						font-family: 'Caveat', cursive;
						font-size: 4rem;
						text-align: center;
						&:has(.item) {
							margin-bottom: 0;
							font-family: Arial, sans-serif;
							font-size: 3rem;
							text-align: left;
						}
					}
					& .membership-guide {
						& a {
							font-size: 1.2rem;
							padding: .4rem 2rem !important;
							text-decoration: none;
						}
						text-align: center;
					}
					& .body {
						margin: 1.5rem 0;
						line-height: 2rem;
						& h2 {
							position: relative;
							margin: 0;
							font-size: 1.8rem;
							line-height: 2rem;
							text-align: left;
						}
						& .meta {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: .5rem auto 1.2rem;
							& .cat {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								gap: 0.5em;
								& a {
									--cat-color: #000;
									--cat-bg: #FFF;
									position: relative;
									line-height: 1.5rem;
									padding: 0 .5rem 0 1.5rem;
									font-size: .8rem;
									color: var(--cat-color);
									background: var(--cat-bg);
									clip-path: polygon(100% 0, .7rem 0, 0 50%, .7rem 100%, 100% 100%);
									text-decoration: none;
									&:before {
										content: '';
										display: block;
										position: absolute;
										left: .6rem;
										top: 50%;
										width: .6rem;
										height: .6rem;
										background: var(--cat-color);
										border-radius: 100%;
										transform: translateY(-50%);
									}
								}
							}
							& .date {
								margin-left: 1rem;
								text-align: right;
							}
						}
						& .img {
							float: right;
							max-width: 25%;
							margin: 0 0 1rem 1rem;
						}
						& .entry-content:after {
							content: '';
							display: block;
							clear: both;
						}
						& > div {
							& + div {
								& > h2 {
									margin-top: 2rem;
									padding-top: 2rem;
									&:before {
										content: '';
										position: absolute;
										top: 0;
										left: 50%;
										display: block;
										width: 80%;
										height: 1px;
										background: #FFF;
										transform: translateX(-50%);
									}
								}
							}
						}
						& .entry-content {
							& #itempage {
								& .itemimg {
									padding-top: 1rem;
									text-align: center;
									& .slick-track {
										display: flex;
										align-items: center;
										& a { padding: 0 .5rem; }
									}
								}
								& .skuList {
									position: relative;
									margin-top: 5rem;
									border-top: 1px solid #FFF;
									border-bottom: 1px solid #FFF;
									& .skuForm {
										padding: 1rem;
										& +  .skuForm { display: none; }
										& .skuName {
											font-size: 1.5rem;
											font-weight: bold;
										}
										& .field {
											display: flex;
											flex-wrap: wrap;
											align-items: center;
											margin: 0;
											border: none;
											& dt {
												width: 30%;
												&:empty:not(input):not(textarea):not(img):not(br) {
													display: none;
													& + dd {
														width: 100%;
														text-align: center;
													}
												}
												&.price + dd {
													color: #AFF;
													font-size: 2rem;
													font-weight: bold;
													letter-spacing: .1rem;
												}
											}
											& dd {
												width: 70%;
												& .skuquantity {
													width: 5rem;
													margin: 0;
													text-align: right;
												}
												&.cart-button {
													width: 100%;
													& [type="submit"] {
														width: 100%;
														margin-top: 1rem;
													}
												}
											}
										}
									}
									& .changeSku {
										position: absolute;
										top: -3rem;
									}
								}
							}
							& #cartPage,
							& #customerForm,
							& #deliveryInfo,
							& #infoConfirm,
							& #cart_completion {
								& .progress {
									position: relative;
									display: flex;
									justify-content: space-around;
									background: #222;
									color: #FFF;
									border-radius: 100px;
									overflow: hidden;
									z-index: 0;
									& li {
										flex: 1;
										text-align: center;
										font-size: .9rem;
									}
									&:before {
										content: '';
										position: absolute;
										top: 0;
										left: 0;
										height: 100%;
										right: 100%;
										background: #555;
										border-radius: 0 100px 100px 0;
										animation: fill calc(var(--step) * .5s) forwards; /* htmlで定義した--stepをもとにどのくらいの時間で背景色を変更するか計算 */
										z-index: -1;
									}
								}
								& .header_explanation,
								& .error_message,
								& .upbutton {
									margin: 1rem auto;
									padding: 0;
								}
								& .error_message { color: #F00; }
								table {
									width: 100%;
									margin: 1rem auto;
									border-collapse: collapse;
									& tr {
										& th {
											background: #333;
											white-space: nowrap;
										}
										& th,
										& td {
											padding: .2rem .4rem;
											border: 1px solid #FFF;
											& textarea {
												display: block;
												width: 100%;
												height: 10rem;
												margin: 0;
											}
											& .label { display: none; }
											&.quantity {
												& input[type="text"] {
													width: 5rem;
													font-size: 1rem;
													text-align: right;
												}
											}
											& .delButton {
												width: 3rem;
												max-width: none;
												padding: 0 !important;
											}
										}
									}
									&:not(#cart_table) {
										& tr {
											& th { width: 25%; }
										}
									}
									&#cart_table {
										& td:not(.productname) {
											white-space: nowrap;
										}
									}
								}
								& .customer_form,
								& #confirm_table {
									tr {
										&#fax_row { display: none; }
										& th {
											text-align: right;
											& em { color: #F00; }
										}
										& td {
											& .value {
												position: relative;
												display: flex;
												align-items: center;
												flex-wrap: wrap;
												gap: .5rem;
												& > span {
													width: 2rem;
													font-size: .9rem;
													text-align: center;
												}
												& input, & select, & button {
													max-width: calc(100% - 2.5rem);
												}
												&:empty:not(input):not(textarea):not(img):not(br) {
													&:before { content: '-'; }
												}
												& :empty:not(input):not(textarea):not(img):not(br) {
													display: none;
												}
											}
										}
									}
									& + .notice {
										margin-top: -1rem;
										text-align: right;
									}
								}
								& .send {
									display: flex;
									justify-content: center;
									gap: 1rem;
									margin: 1rem auto;
									padding: 0;
								}
							}
							& #infoConfirm {
								& #cart {
									& tr {
										& td.action { display: none; }
									}
								}
								& #confirm_table {
									& tr {
										&.ttl {
											background: #FFF;
											& td {
												& h3 {
													color: #000;
													font-size: 1.3rem;
												}
											}
										}
										& th {
											background: #333;
											color: #FFF;
											font-size: 1.2rem;
											text-align: right;
										}
										& td {
											color: #FFF;
											font-size: 1.2rem;
										}
										&.fax-row { display: none; }
									}
								}
							}
						}
					}
					& .pager:not(:empty) {
						display: flex;
						justify-content: center;
						align-items: center;
						width: fit-content;
						margin: 0 auto;
						border: 1px solid #FFF;
						background: #FFF;
						border-radius: 100px;
						overflow: hidden;
						& a,
						& span {
							display: flex;
							justify-content: center;
							align-items: center;
							min-width: 2rem;
							height: 2rem;
							padding: 0 .5rem;
							background: #000;
							&.current,
							&:hover {
								background: #FFF;
								color: #000;
								opacity: 1;
							}
							& + * { border-left: 1px solid #FFF; }
							&:first-child { padding-left:  .8rem; }
							&:last-child  { padding-right: .8rem; }
						}
					}
				}
				& #top #item .container_inner,
				& #sub .body {
					& .itemList {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 1rem;
						justify-content: start;
						margin: 1rem 0;
						& .toItem {
							position: relative;
							display: block;
							margin: 0;
							padding: 1rem 1rem 4rem 1rem;
							background: #111;
							text-decoration: none;
							& .img {
								position: relative;
								float: none;
								width: 100%;
								max-width: none;
								aspect-ratio: 1;
								margin: 0 0 1rem;
								overflow: hidden;
								& img {
									display: block;
									max-width: 100%;
									max-height: 100%;
									margin: auto;
									transition: .3s;
									&:hover { transform: scale(1.1) rotate(2deg); }
								}
							}
							& .entry-content {
								& h2 {
									position: relative;
									display: -webkit-box;
									line-height: 2rem;
									margin: .5rem 0;
									font-family: inherit;
									font-size: 1.8rem;
									text-align: left;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 4;
									overflow: hidden;
									text-overflow: ellipsis;
									overflow-wrap: anywhere;
								}
								& .meta {
									line-height: 2rem;
									margin: 0;
								}
							}
							.btn {
								position: absolute;
								left: 50%;
								bottom: 1rem;
								width: calc(100% - 2rem);
								max-width: none;
								padding: 0 !important;
								text-align: center;
								transform: translateX(-50%);
							}
							& + .toItem { border-top: none; }
							&:hover { opacity: 1; }
						}
					}
					& .more {
						margin-top: .8rem;
						border-top: 1px solid #FFF;
						a {
							display: flex;
							justify-content: flex-end;
							padding: .8rem 0;
						}
					}
				}
				& #top .container#gallery .container_inner {
					& > ul {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 1rem;
						justify-content: start;
						margin: 0;
						& li {
							max-width: none;
							margin: 0;
							a {
								text-decoration: none;
								.title {
									overflow-wrap: anywhere;
								}
							}
						}
					}
				}
			}
		}
		footer {
			margin: 10rem auto 1rem;
			& .sns {
				display: flex;
				justify-content: center;
				gap: 2rem;
				& a { max-width: 2rem; }
			}
			& .copy {
				padding: 1rem 0;
				font-size: .8rem;
				text-align: center;
			}
		}
		#pagetop {
			position: fixed;
			bottom: 2rem;
			right: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3rem;
			height: 3rem;
			color: #000;
			background: #FFF;
			border: 1px solid #000;
			border-radius: 50%;
			transition: opacity .3s;
			pointer-events: none;
			opacity: 0;
			z-index: 10;
			text-decoration: none;
			&.active {
				cursor: pointer;
				opacity: 1;
				pointer-events: auto;
			}
		}
	}
}

@media screen and (max-width: 1150px) and (min-width: 701px) {
	html {
		& body {
			--base-size: calc(20 / 1150 * 100vw); /* font-size * width * 100vw(%) */
			& header {
				& #gNavi {
					& .btn-cart {
						right: calc(1 * var(--base-size));
						width: calc(2 * var(--base-size));
						height: calc(2 * var(--base-size));
						&[data-count]:after {
							top: calc(-.3 * var(--base-size));
							right: calc(-.3 * var(--base-size));
							padding: 0 calc(.3 * var(--base-size));
							font-size: calc(1 * var(--base-size));
							line-height: calc(1.2 * var(--base-size));
						}
					}
					& ul {
						gap: calc(1.5 * var(--base-size));
						& li {
							& a {
								font-size: calc(1.8 * var(--base-size));
								line-height: calc(4 * var(--base-size));
							}
						}
					}
				}
			}
			& main {
				margin-top: calc(4 * var(--base-size));
				& #list {
					& #sub  {
						& .body {
							& .img { max-width: 35%; }
						}
					}
					& #top #item .container_inner,
					& #sub .body {
						& .itemList {
							grid-template-columns: repeat(3, 1fr);
							gap: .5rem;
						}
					}
					& #top .container#gallery .container_inner {
						& > ul {
							grid-template-columns: repeat(3, 1fr);
							gap: .5rem;
						}
					}
				}
			}
		}
	}
}


@media screen and (max-width: 999px) {
	:root {
		--width: 95%;
		--max-width: 95%;
	}
	html { font-size: 16px; }
}
@media screen and (max-width: 700px) {
	html {
		font-size: 3vw;
		line-height: 4vw;
		& body {
			& header {
				background-color: transparent;
				& #gNavi {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					max-height: calc(100svh - 1rem);
					z-index: 1;
					& .btn-menu {
						display: block;
					}
					& .btn-cart {
						top: 1rem;
						right: 1rem;
						transform: translateY(0);
						&[data-count]:after {
							top: -.3rem;
							right: -.3rem;
							padding: 0 .3rem;
							font-size: 1rem;
							line-height: 1.2rem;
						}
					}
					& .menu_wrapper {
						width: 0;
						max-height: calc(100svh - 1rem);
						margin: 0 auto;
						border-radius: 1rem;
						overflow: hidden;
						opacity: 0;
						transition: width .2s, opacity .2s;
						& ul {
							display: block;
							background: #000;
							overflow: hidden;
							& li {
								position: relative;
								display: none;
								margin: 0;
								text-align: center;
								&:first-of-type {
									a { padding-top: 1rem; }
								}
								&:last-of-type {
									a { padding-bottom: 1rem; }
								}
								&:nth-of-type(2n) {
									a { margin-left: -100%; }
								}
								& a {
									display: block;
									position: relative;
									width: 100%;
									line-height: normal;
									margin-left: 100%;
									padding: .3rem 0;
									font-size: 3rem;
									transition: transform .3s;
									&:hover,
									&.active:not(:hover) { animation: none; }
								}
							}
						}
					}
					&.active{
						& .menu_wrapper {
							width: 75%;
							margin: .5rem auto;
							border: 1px solid #FFF;
							overflow-y: auto;
							opacity: 1;
						}
						& + .gNavi_bg {
							opacity: .5;
							pointer-events: auto;
						}
					}
				}
			}
			& main {
				margin-top: 0;
				& #list {
					& #sub {
						margin-top: 2rem;
						& h1 { margin-top: 0; }
						& .body {
							& .img {
								float: none;
								max-width: 60%;
								margin: 1rem auto;
							}
							& .entry-content {
								& #cartPage,
								& #customerForm,
								& #deliveryInfo,
								& #infoConfirm,
								& #cart_completion {
									& #cart_table {
										border: none;
										& thead { display: none; }
										& tbody {
											& tr {
												display: block;
												border: none;
												& td {
													display: flex;
													align-items: center;
													width: auto;
													border: none;
													&.thumbnail,
													&.action { justify-content: center; }
													&[data-label]:before {
														content: attr(data-label);
														width: 25%;
														padding-right: 1rem;
														text-align: right;
													}
												}
												& + tr {
													margin-top: 1rem;
													padding-top: 1rem;
													border-top: 1px solid #FFF;
												}
											}
										}
										& tfoot {
											& tr {
												display: flex;
												justify-content: center;
												gap: 1rem;
												margin-top: 1rem;
												border: none;
												background: #333;
												& th,
												& td {
													width: 40%;
													padding-left: 0;
													padding-right: 0;
													border: none;
													font-size: 1.5rem;
													font-weight: bold;
													&:empty:not(input):not(textarea):not(img):not(br) { display: none; }
												}
												& + tr { margin-top: 0; }
											}
										}
									}
									& .customer_form,
									& #confirm_table {
										tr {
											display: block;
											border: none;
											& th { display: none; }
											& td {
												display: block;
												border: none;
												padding: 0;
												& .value {
													padding-left: 2rem;
													& span {
														position: absolute;
														left: 0;
													}
												}
												& em { color: #F00; }
												& .label { display: block; }
												& + td { margin-top: .5rem; }
											}
											& + tr { margin-top: 1rem; }
											&.ttl {
												& td {
													& .value {
														margin: 0;
														padding: .3rem 0;
														justify-content: center;
													}
												}
											}
										}
										& + .customer_form { margin-top: 3rem; }
									}
								}
							}
						}
					}
					& #top #item .container_inner,
					& #sub .body {
						& .itemList {
							grid-template-columns: repeat(2, 1fr);
							gap: .5rem;
							& .toItem {
								& .entry-content {
									& h2 {
										font-size: 1.5rem;
									}
								}
							}
						}
					}
					& #top .container#gallery .container_inner {
						& > ul {
							grid-template-columns: repeat(2, 1fr);
							gap: .5rem;
						}
					}
				}
			}
		}
	}
}