@charset "UTF-8";

/*
 * WooCommerce ストアトップ
 */

:root {
	--store-white: #fff;
	--store-bg: #f7f5f2;
	--store-text: #414141;
	--store-subtext: #777;
	--store-border: #e5e0da;
	--store-brown: #6f615d;
	--store-yellow: #ffcd74;
	--store-pink: #ef90b1;
}

.store-front {
	color: var(--store-text);
	background: var(--store-white);
}

.store-front .container {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
}

.store-front .section {
	padding-block: clamp(70px, 9vw, 130px);
}

.store-hero {
	position: relative;
	display: grid;
	min-height: min(780px, calc(100svh - 40px));
	overflow: hidden;
	background: var(--store-bg);
}

.store-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(380px, 1.1fr);
	align-items: center;
	gap: clamp(40px, 7vw, 100px);
	padding-block: 80px;
}

.store-hero__content {
	position: relative;
	z-index: 2;
}

.store-hero__label,
.store-section-heading__en {
	margin: 0 0 18px;
	color: var(--store-brown);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
}

.store-hero__title {
	margin: 0;
	font-size: clamp(2.8rem, 6vw, 6.4rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.store-hero__description {
	max-width: 520px;
	margin: 28px 0 0;
	color: var(--store-subtext);
	font-size: clamp(0.9rem, 1.2vw, 1rem);
	line-height: 2;
}

.store-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 42px;
}

.store-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	min-width: 210px;
	padding: 18px 20px;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: 1px solid var(--store-brown);
	transition:
		color 0.25s ease,
		background-color 0.25s ease;
}

.store-button--primary {
	color: var(--store-white);
	background: var(--store-brown);
}

.store-button--primary:hover {
	color: var(--store-brown);
	background: transparent;
}

.store-button--outline {
	color: var(--store-brown);
	background: transparent;
}

.store-button--outline:hover {
	color: var(--store-white);
	background: var(--store-brown);
}

.store-hero__visual {
	position: relative;
	display: grid;
	min-height: 530px;
	place-items: center;
}

.store-hero__visual p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--store-white);
	font-size: clamp(3.5rem, 7vw, 7.5rem);
	font-weight: 700;
	line-height: 0.82;
	letter-spacing: -0.07em;
	text-align: center;
	mix-blend-mode: overlay;
}

.store-hero__shape {
	position: absolute;
	border-radius: 50%;
}

.store-hero__shape--large {
	width: min(43vw, 540px);
	aspect-ratio: 1;
	background: linear-gradient(145deg, var(--store-pink), var(--store-yellow));
}

.store-hero__shape--small {
	right: 1%;
	bottom: 3%;
	width: min(18vw, 220px);
	aspect-ratio: 1;
	background: var(--store-brown);
	opacity: 0.9;
}

.store-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: clamp(35px, 5vw, 65px);
}

.store-section-heading__title {
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 3.3rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.03em;
}

.store-text-link {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	padding-bottom: 8px;
	color: var(--store-text);
	font-size: 0.8rem;
	line-height: 1;
	text-decoration: none;
	border-bottom: 1px solid var(--store-text);
}

.store-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.store-category-card {
	color: var(--store-text);
	text-decoration: none;
}

.store-category-card__thumb {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--store-bg);
}

.store-category-card__image,
.store-category-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.store-category-card:hover .store-category-card__image,
.store-category-card:hover .store-category-card__thumb img {
	transform: scale(1.04);
}

.store-no-image {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: #aaa;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	background:
		linear-gradient(135deg, transparent 49.5%, var(--store-border) 50%, transparent 50.5%),
		var(--store-bg);
}

.store-category-card__body {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-top: 17px;
}

.store-category-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

.store-category-card__count {
	flex: 0 0 auto;
	color: var(--store-subtext);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
}

.store-products--new {
	background: var(--store-bg);
}

.store-products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 24px;
	margin: 0;
	padding: 0;
}

.store-products ul.products::before,
.store-products ul.products::after {
	display: none;
}

.store-products ul.products li.product,
.woocommerce-page .store-products ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
}

.store-products ul.products li.product a {
	color: inherit;
	text-decoration: none;
}

.store-products ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: cover;
	background: var(--store-white);
}

.store-products ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 16px 0 0;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.6;
}

.store-products ul.products li.product .price {
	display: block;
	margin-top: 7px;
	color: var(--store-text);
	font-size: 0.85rem;
}

.store-products ul.products li.product .price del {
	color: var(--store-subtext);
	font-size: 0.72rem;
}

.store-products ul.products li.product .price ins {
	color: #b3261e;
	text-decoration: none;
}

.store-products ul.products li.product .button,
.store-products ul.products li.product .added_to_cart {
	display: none;
}

.store-products span.onsale {
	top: 10px;
	right: auto;
	left: 10px;
	z-index: 2;
	min-width: auto;
	min-height: auto;
	margin: 0;
	padding: 8px 10px;
	color: var(--store-white);
	font-size: 0.65rem;
	line-height: 1;
	background: var(--store-brown);
	border-radius: 0;
}

.store-concept {
	background: var(--store-brown);
}

.store-concept__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(380px, 1.15fr);
	gap: clamp(60px, 10vw, 150px);
	color: var(--store-white);
}

.store-concept .store-section-heading__en {
	color: var(--store-yellow);
}

.store-concept__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 4.2rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.035em;
}

.store-concept__description {
	max-width: 520px;
	margin: 30px 0 0;
	font-size: 0.9rem;
	line-height: 2.1;
	opacity: 0.82;
}

.store-features {
	margin: 0;
	padding: 0;
	border-top: 1px solid rgb(255 255 255 / 25%);
	list-style: none;
}

.store-feature {
	display: grid;
	grid-template-columns: 55px 1fr;
	gap: 20px;
	padding: 28px 0;
	border-bottom: 1px solid rgb(255 255 255 / 25%);
}

.store-feature__number {
	color: var(--store-yellow);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
}

.store-feature__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.store-feature__text {
	margin: 10px 0 0;
	font-size: 0.82rem;
	line-height: 1.8;
	opacity: 0.72;
}

.store-status__message {
	margin: 0;
	padding: 24px;
	font-size: 0.9rem;
	line-height: 1.8;
	background: var(--store-bg);
	border-left: 3px solid var(--store-brown);
}

@media (max-width: 1024px) {
	.store-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	}

	.store-category-grid {
		gap: 20px;
	}

	.store-products ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 830px) {
	.store-front .container {
		width: min(100% - 32px, 1200px);
	}

	.store-front .section {
		padding-block: 70px;
	}

	.store-hero {
		min-height: auto;
	}

	.store-hero__inner {
		grid-template-columns: 1fr;
		gap: 50px;
		padding-block: 65px 45px;
	}

	.store-hero__visual {
		min-height: 330px;
	}

	.store-hero__shape--large {
		width: min(86vw, 390px);
	}

	.store-hero__shape--small {
		width: min(34vw, 150px);
	}

	.store-hero__visual p {
		font-size: clamp(3.4rem, 16vw, 6rem);
	}

	.store-section-heading {
		align-items: flex-start;
		margin-bottom: 35px;
	}

	.store-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 35px 14px;
	}

	.store-products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 38px 14px;
	}

	.store-concept__inner {
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

@media (max-width: 480px) {
	.store-front .container {
		width: min(100% - 24px, 1200px);
	}

	.store-hero__actions {
		display: grid;
	}

	.store-button {
		width: 100%;
	}

	.store-section-heading {
		display: block;
	}

	.store-text-link {
		margin-top: 22px;
	}

	.store-category-card__body {
		display: block;
	}

	.store-category-card__count {
		display: block;
		margin-top: 5px;
	}
}