@charset "UTF-8";
/* フォント：英字はIBM Plex Mono、日本語グリフはZen Kaku Gothic Newへフォールバック */
/* 全体：色・左メニュー幅・SPヘッダー高さはここで調整 */ :root {
	--bg: #151515;
	--text: #f4f4ef;
	--sidebar: 33.333333%;
	--header-height: 72px;
	--font-body: "IBM Plex Mono", "Zen Kaku Gothic New", sans-serif
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased
}
a {
	color: inherit;
	text-decoration: none
}
button {
	font: inherit;
	color: inherit;
	cursor: pointer
}
img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover
}
button, a {
	-webkit-tap-highlight-color: transparent
}
a:focus-visible, button:focus-visible {
	outline: 2px solid #d8eeab;
	outline-offset: -3px
}
section {
	scroll-margin-top: 20px
}
/* 読み上げ専用テキスト・キーボード操作用リンク */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap
}
.skip-link {
	position: fixed;
	top: -100px;
	left: 12px;
	z-index: 100;
	background: #fff;
	color: #111;
	padding: 12px
}
.skip-link:focus {
	top: 8px
}
/* PC：左サイドメニューを画面に固定。小さい画面高さでは内部スクロール */
.site-header {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--sidebar);
	height: 100dvh;
	overflow-y: auto;
	padding: clamp(24px, 4.2vw, 64px) clamp(20px, 3vw, 48px);
	z-index: 30;
	background: var(--bg)
}
.logo {
	display: block;
	width: clamp(110px, 14vw, 210px);
	line-height: 1
}
.logo img {
	width: 100%;
	height: auto;
	object-fit: contain
}
.header-actions {
	display: flex;
	position: absolute;
	right: 9%;
	top: clamp(27px, 4.6vw, 70px)
}
.header-actions a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	color: var(--text);
	background: var(--bg);
	transition: color .25s ease, background-color .25s ease
}
.header-actions a + a {
	border-left: 0
}
.header-actions svg {
	width: 16px;
	height: 16px;
	fill: currentColor
}
.global-nav {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 70px;
	align-items: flex-start
}
.global-nav a {
	font-size: 12px;
	letter-spacing: .2em
}
.menu-toggle {
	display: none
}
/* ログイン／カート：背景色とアイコン色を反転。SVGはcurrentColorに追従 */
@media(hover:hover) {
	.header-actions a:hover {
		color: var(--bg);
		background: var(--text)
	}
}
.header-actions a:focus-visible {
	color: var(--bg);
	background: var(--text)
}
/* PCメニュー：文字幅の下線を左から右へ伸ばす（SPには適用しない） */
@media(min-width:768px) {
	.global-nav a, .company-links a {
		position: relative;
		width: fit-content
	}
	.global-nav a::after, .company-links a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .3s ease
	}
	.company-links a::after {
		bottom: -1px
	}
	.global-nav a:focus-visible::after, .company-links a:focus-visible::after {
		transform: scaleX(1)
	}
}
@media(min-width:768px) and (hover:hover) {
	.global-nav a:hover::after, .company-links a:hover::after {
		transform: scaleX(1)
	}
}
/* 会社情報：PCでは左カラム、SPではフッターへ同じDOMを移動 */
.company-block {
	font-size: 9px;
	line-height: 1.7;
	letter-spacing: .02em;
	margin-top: clamp(100px, 14vw, 210px)
}
.company-block p {
	margin: 0
}
.company-address {
	font-size: 8px
}
.company-links {
	margin-top: 16px;
	display: flex;
	flex-direction: column
}
.company-block small {
	display: block;
	font-size: 7px;
	margin-top: 46px
}
.mobile-footer {
	display: none
}
/* 右側のメインコンテンツ */
.main {
	margin-left: var(--sidebar);
	width: calc(100% - var(--sidebar))
}
/* メインビジュアル：PCは縦長4枚。slick未読込時も4枚表示を維持 */
.hero {
	position: relative;
	overflow: hidden
}
.hero__slider:not(.slick-initialized) {
	display: flex
}
.hero__slider:not(.slick-initialized) .hero__slide {
	flex: 0 0 25%
}
.hero__slider:not(.slick-initialized) .hero__slide:nth-child(n+5) {
	display: none
}
.hero__slide {
	height: 41.7vw;
	min-height: 320px
}
.hero__slide img {
	width: 100%;
	height: 100%;
	object-position: center
}
.hero__slider.slick-slider {
	margin: 0
}
.hero__copy {
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: 2%;
	z-index: 2;
	margin: 0;
	color: #fff;
	font-size: clamp(18px, 3vw, 48px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .015em;
	pointer-events: none
}
/* 各セクション見出し：画像間の余白は設けず、見出し部分にだけ余白 */
.section h2 {
	font-size: 12px;
	letter-spacing: .18em;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	padding: 23px 12px 9px
}
/* 共通カード：display:flexでPC3列、SP2列。三角形はインラインSVG */
.card-list {
	display: flex;
	flex-wrap: wrap
}
.card {
	position: relative;
	display: block;
	flex: 0 0 calc(100% / 3);
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 1/1.4;
	background: #505750
}
.card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2
}
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	z-index: -1;
	opacity: var(--overlay, .2);
	transition: opacity .3s ease
}
.card:focus-visible::after {
	opacity: var(--overlay-hover, .4)
}
.card__label {
	position: absolute;
	left: 12px;
	right: 32px;
	bottom: 12px;
	font-size: clamp(10px, 1vw, 15px);
	letter-spacing: .14em;
	line-height: 1.4;
	overflow-wrap: anywhere
}
.card__triangle {
	position: absolute;
	width: 24px;
	height: 24px;
	bottom: 12px;
	right: 12px;
	pointer-events: none
}
/* coordinate：黒レイヤー不透明度20%→40% */
.coordinate {
	--overlay: .2;
	--overlay-hover: .4
}
/* new arrival：黒レイヤー不透明度0%→25%。ラベルは読めるよう白文字に影 */
.new-arrival {
	--overlay: 0;
	--overlay-hover: .25
}
.new-arrival .card {
	aspect-ratio: 1;
	background: #dce4df
}
.new-arrival .card__label {
	/*text-shadow: 0 1px 4px #000*/
}
/* Scene：黒レイヤー不透明度20%→40% */
.scene {
	--overlay: .2;
	--overlay-hover: .4
}
.scene .card {
	aspect-ratio: 1
}
/* category：PC4列。all itemは白地 */
.category .card {
	flex-basis: 25%;
	aspect-ratio: 1;
	background: #080808
}
.category .card__label {
	font-size: clamp(9px, .85vw, 13px)
}
.card--all {
	color: #151515;
	background: #fff !important
}
.card--all::after {
	display: none
}
.card--all:hover {
	background: #e9e9e4 !important
}
/* ホバー可能な端末だけ透明度を変更し、タッチ端末のhover残留を防止 */
@media(hover:hover) {
	.card:hover::after {
		opacity: var(--overlay-hover, .4)
	}
}
/* デモリンク案内：実ページ組込時にはdialogとdata-demoを削除可能 */
.demo-dialog {
	max-width: 460px;
	width: calc(100% - 40px);
	background: #f4f4ef;
	color: #151515;
	border: 0;
	padding: 32px;
	font-family: var(--font-body);
	line-height: 1.7
}
.demo-dialog::backdrop {
	background: #0009
}
.demo-dialog h2 {
	font-size: 18px
}
.demo-dialog__close {
	position: absolute;
	right: 8px;
	top: 4px;
	border: 0;
	background: none;
	color: #151515;
	font-size: 28px
}
/* スマホ：固定上部ヘッダー [メニュー / ロゴ / ログイン・カート] */
@media(max-width:767px) {
	html {
		scroll-padding-top: var(--header-height)
	}
	section {
		scroll-margin-top: 16px
	}
	.site-header {
		inset: 0 0 auto;
		width: 100%;
		height: var(--header-height);
		padding: 0 16px;
		overflow: visible;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		border-bottom: 1px solid #ffffff15
	}
	.logo {
		grid-column: 2;
		width: 120px
	}
	.header-actions {
		grid-column: 3;
		position: static;
		justify-self: end
	}
	.header-actions a {
		width: 30px;
		height: 32px
	}
	.menu-toggle {
		grid-column: 1;
		display: flex;
		align-items: center;
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		padding: 8px 0
	}
	.menu-toggle__lines, .menu-toggle__lines::before, .menu-toggle__lines::after {
		display: block;
		position: relative;
		width: 23px;
		height: 1px;
		background: #fff;
		transition: transform .25s
	}
	.menu-toggle__lines::before, .menu-toggle__lines::after {
		content: "";
		position: absolute;
		left: 0;
		top: -7px
	}
	.menu-toggle__lines::after {
		top: 7px
	}
	.menu-toggle[aria-expanded=true] .menu-toggle__lines {
		background: transparent
	}
	.menu-toggle[aria-expanded=true] .menu-toggle__lines::before {
		top: 0;
		transform: rotate(45deg)
	}
	.menu-toggle[aria-expanded=true] .menu-toggle__lines::after {
		top: 0;
		transform: rotate(-45deg)
	}
	/* SPの開閉メニュー */
	.global-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: var(--header-height);
		margin: 0;
		padding: 28px 24px;
		background: #151515fa;
		max-height: calc(100dvh - var(--header-height));
		overflow: auto;
		border-bottom: 1px solid #444
	}
	.global-nav a {
		display: block;
		padding: 16px 0
	}
	.main {
		margin-left: 0;
		padding-top: var(--header-height);
		width: 100%
	}
	/* SPのメイン画像：slick解除後、最初の4枚を2×2に */
	.hero__slider:not(.slick-initialized) {
		display: flex;
		flex-wrap: wrap
	}
	.hero__slider:not(.slick-initialized) .hero__slide {
		flex: 0 0 50%;
		height: 66vw;
		min-height: 0
	}
	.hero__copy {
		font-size: clamp(20px, 5.1vw, 37px);
		bottom: 16px;
		left: 16px;
		right: 16px;
		max-width: 95%;
		text-wrap: balance
	}
	/* SPの各一覧：2列。categoryのみ3列、all itemのみ2列分 */
	.section h2 {
		font-size: 11px;
		padding: 20px 10px 8px
	}
	.card {
		flex-basis: 50%
	}
	.card__label {
		font-size: 10px;
		left: 10px;
		bottom: 10px;
		right: 28px
	}
	.card__triangle {
		width: 18px;
		height: 18px;
		right: 10px;
		bottom: 10px
	}
	.category .card {
		flex-basis: calc(100% / 3);
		aspect-ratio: 1
	}
	.category .card--all {
		flex-basis: calc(100% / 3 * 2);
		aspect-ratio: 2
	}
	.category .card__label {
		font-size: 9px;
		letter-spacing: .07em
	}
	/* SP会社情報フッター */
	.mobile-footer {
		display: block;
		padding: 42px 24px
	}
	.company-block {
		margin: 0;
		font-size: 10px
	}
	.company-address {
		font-size: 9px
	}
	.company-block small {
		font-size: 8px;
		margin-top: 32px
	}
}
/* 動きを抑える設定では自動再生をJSで停止し、CSSアニメーションも省略 */
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}
	*, *::before, *::after {
		transition: none !important
	}
}
/* TOP cards: 三角形を右下基点で120%へ拡大 */
.page--home .card__triangle {
	transform-origin: 100% 100%;
	transition: transform .3s ease
}
@media(hover:hover) {
	.page--home .card:hover .card__triangle {
		transform: scale(1.2)
	}
}