/*-----------------------------------------------*/
/*-------------------- color --------------------*/
/*-----------------------------------------------*/
@site_color: #c8aa8b;
@white: #ffffff;
@black: #191919;
@l_black: #333333;
@gray: #d9d9d9;
@l_gray: #eeeeee;
@d_gray: #777777;
@dd_gray: #555555;
@red: #d85656;
@d_red: #a53a3a;
@yellow: #e5a82e;
@green: #59b559;
@d_yellow: #bb8210;
@blue: #285ec9;
@d_blue: #163b84;
@l_green: #3cad19;
@d_green: #287528;
@violet: #8243c4;
@d_violet: #58278c;
@sky: #5ec2d2;
@brown: #926834;
@orange: #DF691E;
@pink: #fdc0c0;
@brown: #865c4a;
@thin_brown: #aa8d5e;
@site_font: 'SawarabiMincho';
@site_logo: url(/images/hp_background.webp);
@thin_black: #575757;
@thin_gray: #919191;
@base-size: 375;


:root {
	--ink: #26201a;
	--ink-soft: #5a5044;
	--paper: #ece3d0;
	--paper-light: #f6efe1;
	--paper-card: #f2ead9;
	--indigo: #232b38;
	--indigo-deep: #181e28;
	--indigo-line: rgba(237, 230, 215, 0.16);
	--vermillion: #a83a26;
	--vermillion-deep: #8a2f1e;
	--moss: #5c6b47;
	--brass: #a9824f;
	--line: rgba(38, 32, 26, 0.16);
	--line-soft: rgba(38, 32, 26, 0.09);
	--radius: 2px;
}


@media (max-width:980px) {
	@base-size: 980;

	.top_products {
		max-width: 1440px;

		.top_products__list {
			ul {
				grid-template-columns: repeat(2, 1fr);

				li {
					.top_products__item {

						.top_products__head {
							width: 100%;
							/* display: flex;
						flex-direction: column;
						align-items: center; */

							.top_products__head__left {
								gap: 15px;

								.top_products__image {
									width: calc(100 / @base-size * 100vw);
									height: calc(100 / @base-size * 100vw);
								}

								h3 {
									font-size: calc(19 / @base-size * 100vw);
								}
							}
						}

						.detail {
							width: 100%;

							span {
								font-size: calc(18 / @base-size * 100vw);
							}
						}
					}
				}


			}
		}
	}

	.top_mv {
		p {
			font-size: 16px;
			line-height: 30px;
			letter-spacing: 1.89px;
		}
	}
}


@media(max-width:768px) {

	/*------------------------------------------------*/
	/*-------------------- common --------------------*/
	/*------------------------------------------------*/
	.pc {
		display: none;
	}

	.sp {
		display: block !important;
	}

	/*------------------------------------------------*/
	/*-------------------- HEADER --------------------*/
	/*------------------------------------------------*/
	header {
		width: 100%;
		transition: 0.3s;
		background: #f7f2e6;
		height: 70px;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		border-bottom: 1px solid #d8cbaa;
	}

	.header_container {
		position: relative;
		margin: 0 auto;
		display: flex;
		align-items: center;
		;
		justify-content: space-between;
		padding: 15px;
		box-sizing: border-box;
		z-index: 3;
		height: 100%;

		h1 {
			max-width: 135px;
			;
			font-size: 30px;
			z-index: 2;

			a {
				display: flex;
				align-items: center;
			}

			img {
				width: 100%;
			}
		}

		.hamburger_btn {
			position: relative;
			width: 35px;
			height: 35px;
			cursor: pointer;

			svg {
				width: 45px;
				height: 45px;
			}


			span {
				position: absolute;
				left: 0;
				width: 34px;
				height: 2px;
				background-color: @black;
				box-sizing: border-box;
			}

			.top {
				top: 10px;
			}

			.middle {
				top: 21px;
			}

			.bottom {
				top: 31px;
			}
		}
	}





	/*------------------------------------------------*/
	/*-------------------- FOOTER --------------------*/
	/*------------------------------------------------*/
	footer {
		.footer_contens {
			display: flex;
			flex-direction: column;
			align-items: center;

			>ul {
				flex-direction: column;
				margin-top: 20px;
				gap: 0;
				text-align: center;

				li {
					a {
						font-size: 12px;
					}
				}
			}

			address {
				font-size: 12px;

				ul {
					li.footer_title {
						font-size: 16px;
						display: flex;
						justify-content: center;

						a {
							width: 50%;
						}
					}
				}
			}
		}

		small {
			text-align: center;
			margin-top: 15px;
			font-size: 10px;
		}
	}



	/*---------- loading ----------*/
	.loading {
		display: none;
	}

	.loading.active {
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		span {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			text-align: center;

			i {
				font-size: 50px;
				color: @white;
			}
		}
	}

	.err_msg {
		margin-bottom: 30px;
		padding: 10px 5px;
		font-size: 14px;
		color: @white;
		background-color: @red;
		border: 1px solid @d_red;
	}




	/*-------------------------------------------------*/
	/*-------------------- TOPPAGE --------------------*/
	/*-------------------------------------------------*/
	main {
		/* width: 100%;
		margin: 70px auto 0;
		text-align: center;
		background-color: #ece3d0; */
	}


	.heading {
		margin-bottom: 40px;

		h2 {
			font-size: 25px;
			padding-bottom: 10px;
			margin: 0 auto 15px;

			span {
				font-size: 11px;
				margin-bottom: 10px;
			}
		}

		p {
			line-height: 21px;
			font-size: 14px;
		}
	}

	.quantity_contents {
		max-width: 1200px;

		.quantity_contents__selectqty {

			.box {
				flex-direction: column;
			}
		}
	}


	.top_products {
		padding: 0 20px 90px;

		.top_products__list {
			p {
				strong {
					font-size: 14px;
				}
			}

			ul {
				grid-template-columns: 100%;

				li {

					.top_products__item {
						padding: 10px;

						.top_products__head {
							width: 100%;
							/* display: flex;
							flex-direction: column;
							align-items: center; */

							.top_products__head__left {
								.top_products__image {
									width: calc(150 / @base-size * 100vw);
									height: calc(150 / @base-size * 100vw);
									margin-bottom: calc(18 / @base-size * 100vw);
								}

								h3 {
									margin: 0 0 calc(10 / @base-size * 100vw);
									font-size: calc(18 / @base-size * 100vw);
								}

							}



							.detail {
								font-size: calc(12 / @base-size * 100vw);
								width: 100%;

								p,
								span {
									font-size: calc(12 / @base-size * 100vw) !important;
								}
							}
						}




					}
				}
			}
		}
	}

	/*カウンター*/
	.stepper_contents {
		gap: 7px;

		.stepper {
			button {
				width: calc(30 / @base-size * 100vw);
				height: calc(30 / @base-size * 100vw);
			}

			input {
				/* width: 44px;
				height: 30px; */
				width: calc(44 / @base-size * 100vw);
				height: calc(30 / @base-size * 100vw);
			}
		}
	}



	.order_bar {
		bottom: 0;
		z-index: 30;
		/* background:#181e28; */
		background: #2e2119;
		color: var(--paper-light, #f6efe1);
		border-top: 1px solid var(--indigo-line, rgba(237, 230, 215, 0.16));
		animation: order-bar-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	@keyframes order-bar-pop {
		0% {
			transform: translateY(120%);
		}

		45% {
			transform: translateY(-14%);
		}

		65% {
			transform: translateY(6%);
		}

		80% {
			transform: translateY(-3%);
		}

		92% {
			transform: translateY(1.5%);
		}

		100% {
			transform: translateY(0%);
		}
	}

	/* .order_bar {
	bottom: 0;
	z-index: 30;
	background: var(--indigo-deep, #181e28);
	color: var(--paper-light, #f6efe1);
	border-top: 1px solid var(--indigo-line, rgba(237, 230, 215, 0.16));
} */

	.order_bar.show {
		position: sticky;
		transform: translateY(0);
	}

	.order_bar.show {
		position: sticky;
		transform: translateY(0);
	}

	.order-bar-inner {
		max-width: 1240px;
		margin: 0 auto;
		padding: 16px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		flex-wrap: wrap;

		.order_hint {
			display: flex;
			width: 100%;
			justify-content: center;
		}

		.order-bar-right {
			flex: 1;
			justify-content: flex-end;

			a {
				background: #a83a26;
				padding: 7px 20px;
				color: #FFF;
				border: 1px solid #a83a26;
				font-weight: 500;
				font-size: 16px;
				letter-spacing: 1.12px;
			}
		}
	}

	.order-stat {
		display: flex;
		gap: 32px;
		align-items: baseline;
		flex-wrap: wrap;
	}

	.order-stat div {
		font-family: "JetBrains Mono", monospace;
	}

	.order-stat .lbl {
		font-size: 10px;
		letter-spacing: 1.85px;
		color: #9b917b;
		text-transform: uppercase;
		display: block;
		margin-bottom: 10px;
	}

	.order-stat .val {
		font-size: 25px;
		color: #f6efe1;
	}

	.order-hint {
		font-size: 12px;
		color: #9b917b;
	}

	/*注文入力フォーム*/
	.order_contents {
		margin-bottom: 90px;
	}

	.order_contents__form {
		input#zip {
			width: 40%;
		}


		dd {
			text-align: left;
		}


		>dl {
			display: flex;
			flex-direction: column;
			gap: 5px;

			dt {
				text-align: left;
			}
		}
	}

	.form_row__2col {
		flex-direction: column;
		gap: 15px;
	}

	.form_row__2col--unequal.w-20per {
		width: 100%;
		flex: unset;
	}

	/* .order_contents__button {
		width: 100%;
		text-align: center;
		max-width: 300px;
		margin: 30px auto 0;

		button {
			width: 100%;
			background: #a83a26;
			padding: 7px 20px;
			color: #FFF;
			border: 1px solid #a83a26;
			font-weight: 500;
			font-size: 16px;
			letter-spacing: 1.12px;
		}
	} */

	/*メールバナー*/
	.mail_banner {
		padding: 70px 20px;
	}

	.mail_banner__card {
		padding: 20px 10px;
	}

	.mail_banner__title {
		font-family: "JetBrains Mono", monospace;
		font-size: 12px;
		letter-spacing: .22em;
		color: #a83a26;
		margin-bottom: 14px;
	}

	.mail_banner__text {
		font-size: 15px;
		line-height: 25px;
		color: #3a332a;
		margin: 0 0 26px;
	}

	.mail_banner__cta {
		display: inline-block;
		background: #a83a26;
		color: #f7f2e6;
		font-size: 14px;
		letter-spacing: .03em;
		padding: 14px 34px;
		text-decoration: none;
		transition: background .15s;
	}


}


@media (max-width:640px) {
	.top_products {

		.top_products__list {
			ul {
				grid-template-columns: 100%;
			}
		}
	}
}