```css
/* =========================================
	 ONE STEP
	 Base Style
========================================= */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}
html {
		scroll-behavior: smooth;
}
body {
		font-family:
				-apple-system,
				BlinkMacSystemFont,
				"Helvetica Neue",
				"Noto Sans JP",
				Arial,
				sans-serif;
		background: #fff;
		color: #111;
		line-height: 1.7;
}
img {
		width: 100%;
		display: block;
}
a {
		color: inherit;
		text-decoration: none;
}
button {
		font: inherit;
}

/* =========================================
	 HEADER
========================================= */
.site-header {
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #e8e8e8;
		position: sticky;
		top: 0;
		z-index: 1000;
}
.header-inner {
		max-width: 1280px;
		height: 82px;
		margin: 0 auto;
		padding: 0 32px;
		display: flex;
		align-items: center;
		justify-content: space-between;
}

/* LOGO */
.logo {
		display: flex;
		flex-direction: column;
		line-height: 1;
}
.logo-main {
		font-size: 24px;
		font-weight: 900;
		letter-spacing: 0.12em;
}
.logo-sub {
		margin-top: 7px;
		font-size: 9px;
		color: #777;
		letter-spacing: 0.08em;
}

/* NAV */
.global-nav {
		display: flex;
		align-items: center;
		gap: 30px;
}
.global-nav a {
		position: relative;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		transition: opacity 0.25s ease;
}
.global-nav a:hover {
		opacity: 0.5;
}
.global-nav a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -7px;
		width: 0;
		height: 1px;
		background: #111;
		transition: width 0.25s ease;
}
.global-nav a:hover::after {
		width: 100%;
}

/* MOBILE MENU */
.menu-button {
		display: none;
		width: 38px;
		height: 38px;
		border: 1px solid #ddd;
		background: #fff;
		cursor: pointer;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
}
.menu-button span {
		display: block;
		width: 16px;
		height: 1px;
		background: #111;
}

/* =========================================
	 HERO
========================================= */
.hero {
		background: #111;
		color: #fff;
}
.hero-inner {
		max-width: 1280px;
		min-height: 520px;
		margin: 0 auto;
		padding: 90px 32px;
		display: flex;
		flex-direction: column;
		justify-content: center;
}
.hero-label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.25em;
		color: #aaa;
		margin-bottom: 25px;
}
.hero h1 {
		font-size: clamp(42px, 6vw, 76px);
		line-height: 1.15;
		font-weight: 300;
		letter-spacing: -0.04em;
}
.hero h1 strong {
		font-weight: 900;
}
.hero-text {
		margin-top: 28px;
		color: #bbb;
		font-size: 15px;
		line-height: 2;
}
.hero-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 220px;
		margin-top: 40px;
		padding: 15px 20px;
		border: 1px solid #555;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.18em;
		transition:
				background 0.25s ease,
				color 0.25s ease;
}
.hero-button span {
		font-size: 16px;
}
.hero-button:hover {
		background: #fff;
		color: #111;
}

/* =========================================
	 COMMON SECTION
========================================= */
.section-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 100px 32px;
}
.section-heading {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 40px;
}
.section-label {
		display: block;
		margin-bottom: 8px;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.2em;
		color: #888;
}
.section-heading h2 {
		font-size: 30px;
		line-height: 1.3;
		letter-spacing: -0.03em;
}
.more-link {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.15em;
		border-bottom: 1px solid #111;
		padding-bottom: 4px;
}

/* =========================================
	 TOPICS
========================================= */
.topics {
		background: #f5f5f5;
}
.topic-grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 220px 220px;
		gap: 2px;
}
.topic-card {
		position: relative;
		display: flex;
		align-items: flex-end;
		padding: 35px;
		overflow: hidden;
		background:
				linear-gradient(
						135deg,
						#222 0%,
						#111 100%
				);
		color: #fff;
}
.topic-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
				linear-gradient(
						135deg,
						transparent 0%,
						rgba(255,255,255,0.08) 100%
				);
		transition: transform 0.5s ease;
}
.topic-card:hover::before {
		transform: scale(1.08);
}
.topic-card-large {
		grid-row: span 2;
}
.topic-content {
		position: relative;
		z-index: 1;
}
.topic-content > span {
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.18em;
		color: #aaa;
}
.topic-content h3 {
		margin-top: 8px;
		font-size: 24px;
		line-height: 1.4;
}
.topic-content p {
		margin-top: 8px;
		font-size: 11px;
		color: #aaa;
}

/* =========================================
	 CATEGORY
========================================= */
.products {
		background: #fff;
}
.category-tabs {
		display: flex;
		gap: 8px;
		margin-bottom: 40px;
		overflow-x: auto;
}
.category-tab {
		flex-shrink: 0;
		padding: 10px 22px;
		border: 1px solid #ddd;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.12em;
		transition: all 0.2s ease;
}
.category-tab:hover,
.category-tab.active {
		background: #111;
		color: #fff;
		border-color: #111;
}

/* =========================================
	 PRODUCT GRID
========================================= */
.product-grid {
		display: grid;
		grid-template-columns:
				repeat(4, minmax(0, 1fr));
		gap: 40px 20px;
}
.product-card {
		min-width: 0;
}
.product-image {
		aspect-ratio: 1 / 1;
		background: #f3f3f3;
		overflow: hidden;
}
.product-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition:
				transform 0.5s ease;
}
.product-card:hover .product-image img {
		transform: scale(1.04);
}
.product-info {
		padding-top: 15px;
}
.product-category {
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 0.15em;
		color: #888;
}
.product-info h3 {
		margin-top: 7px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.6;
}
.product-price {
		margin-top: 12px;
		font-size: 16px;
		font-weight: 800;
}

/* =========================================
	 CONCEPT
========================================= */
.concept {
		background: #111;
		color: #fff;
}
.concept-box {
		max-width: 720px;
}
.concept-box h2 {
		font-size: clamp(32px, 5vw, 54px);
		line-height: 1.35;
		letter-spacing: -0.04em;
		margin-bottom: 30px;
}
.concept-box p {
		color: #aaa;
		font-size: 14px;
		line-height: 2;
		margin-bottom: 15px;
}
.concept-link {
		display: inline-block;
		margin-top: 25px;
		padding-bottom: 5px;
		border-bottom: 1px solid #fff;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
}

/* =========================================
	 DISCLOSURE
========================================= */
.disclosure {
		background: #f5f5f5;
}
.disclosure .section-inner {
		padding-top: 35px;
		padding-bottom: 35px;
}
.disclosure p {
		color: #777;
		font-size: 10px;
		line-height: 1.8;
}

/* =========================================
	 FOOTER
========================================= */
.site-footer {
		background: #111;
		color: #fff;
}
.footer-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 60px 32px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
}
.footer-brand {
		display: flex;
		flex-direction: column;
}
.footer-brand strong {
		font-size: 22px;
		letter-spacing: 0.1em;
}
.footer-brand span {
		margin-top: 8px;
		font-size: 9px;
		color: #888;
		letter-spacing: 0.1em;
}
.footer-nav {
		display: flex;
		justify-content: flex-end;
		gap: 25px;
}
.footer-nav a {
		font-size: 9px;
		color: #999;
		letter-spacing: 0.1em;
}
.copyright {
		grid-column: 1 / -1;
		padding-top: 30px;
		border-top: 1px solid #333;
		font-size: 9px;
		color: #666;
		letter-spacing: 0.1em;
}

/* =========================================
	 RESPONSIVE
========================================= */
@media (max-width: 900px) {
		.global-nav {
				display: none;
		}
		.menu-button {
				display: flex;
		}
		.header-inner {
				height: 70px;
				padding: 0 20px;
		}
		.hero-inner {
				min-height: 460px;
				padding: 70px 20px;
		}
		.section-inner {
				padding: 70px 20px;
		}
		.topic-grid {
				grid-template-columns: 1fr 1fr;
				grid-template-rows: 260px 200px;
		}
		.topic-card-large {
				grid-column: 1 / -1;
				grid-row: auto;
		}
		.product-grid {
				grid-template-columns:
						repeat(2, minmax(0, 1fr));
				gap: 35px 15px;
		}
		.footer-inner {
				padding: 50px 20px;
				grid-template-columns: 1fr;
		}
		.footer-nav {
				justify-content: flex-start;
				flex-wrap: wrap;
		}
		.copyright {
				grid-column: auto;
		}
}

@media (max-width: 600px) {
		.logo-main {
				font-size: 20px;
		}
		.logo-sub {
				font-size: 8px;
		}
		.hero h1 {
				font-size: 42px;
		}
		.hero-text {
				font-size: 13px;
		}
		.section-heading {
				align-items: flex-start;
				flex-direction: column;
				gap: 15px;
		}
		.section-heading h2 {
				font-size: 25px;
		}
		.topic-grid {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows:
						260px
						200px
						200px;
		}
		.topic-card-large {
				grid-column: auto;
		}
		.topic-content h3 {
				font-size: 20px;
		}
		.product-info h3 {
				font-size: 13px;
		}
		.product-price {
				font-size: 14px;
		}
		.category-tabs {
				margin-left: -20px;
				margin-right: -20px;
				padding-left: 20px;
				padding-right: 20px;
		}
}
```