@charset "UTF-8";
/* 下層共通：見出し、現在ページ表示、パンくず */
.page-title {
	margin: 0;
	padding: 28px 20px 14px;
	font-size: clamp(12px, 1.1vw, 20px);
	font-weight: 400;
	letter-spacing: .2em;
	line-height: 1.5
}
.global-nav a[aria-current="page"] {
	color: #fff
}
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 28px 20px 14px;
	font-size: clamp(11px, 1.1vw, 19px);
	letter-spacing: .15em;
	overflow-wrap: anywhere
}
figure {
	margin: 0
}
/* 画像はHTML側でheightを持たせず、比率コンテナ内のみ高さ100%でトリミング */
.gallery__stage img, .gallery__thumb img, .catalog-product__photo img, .coordinate-photo img, .about-photo img, .lookbook-cover img, .lookbook-block img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
/* ITEM：PCは画像50%・説明50%。画像は1枚と下部6サムネイル */
.product-layout {
	display: flex;
	align-items: flex-start;
	padding-bottom: 100px
}
.product-layout > .gallery {
	width: 50%;
	min-width: 0
}
.product-info {
	width: 50%;
	padding: 30px clamp(24px, 2.6vw, 60px) 0;
	min-width: 0
}
.product-info h1 {
	font-size: clamp(20px, 1.7vw, 32px);
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1.4;
	margin: 0 0 8px;
	overflow-wrap: anywhere
}
.product-price {
	font-size: clamp(17px, 1.3vw, 24px);
	margin: 0 0 32px
}
.product-lead {
	font-size: clamp(14px, 1vw, 18px);
	font-weight: 700;
	line-height: 2.1;
	margin: 0 0 30px
}
.product-copy, .product-material p {
	font-size: clamp(12px, .8vw, 15px);
	font-weight: 500;
	line-height: 2.2
}
.product-copy p {
	margin: 0 0 32px
}
.product-material {
	margin-top: 46px
}
.product-material h2 {
	font-size: 17px;
	font-weight: 400;
	border-bottom: 1px solid #aaa;
	padding-bottom: 8px;
	margin: 0 0 12px
}
.product-material p {
	margin: 0
}
.product-actions {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 24px
}
.action-button {
	display: block;
	width: 100%;
	padding: 26px 16px;
	background: #fff;
	color: #151515;
	border: 1px solid #fff;
	font-size: clamp(20px, 1.8vw, 32px);
	letter-spacing: .06em;
	transition: background .25s, color .25s
}
.action-button:focus-visible {
	background: #151515;
	color: #fff
}
@media(hover:hover) {
	.action-button:hover {
		background: #151515;
		color: #fff
	}
}
/* 商品ページのギャラリー：画像選択はpages.jsで制御。選択中は内側に枠を表示 */
.gallery__stage {
	aspect-ratio: 1;
	overflow: hidden;
	background: #343b36
}
.gallery__thumbs {
	display: flex
}
.gallery__thumb {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1;
	position: relative;
	border: 0;
	padding: 0;
	background: #343b36;
	overflow: hidden
}
.gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	pointer-events: none
}
.gallery__thumb[aria-pressed="true"]::after {
	border-color: #fff
}
.gallery__thumb:focus-visible {
	outline-offset: -4px
}
/* ABOUT：PCは本文2/3・縦長写真1/3 */
.about-layout {
	display: flex;
	align-items: flex-start;
	gap: 4%;
	padding: 30px 4% 70px 2.5%
}
.about-copy {
	width: 64%;
	min-width: 0
}
.about-copy__ja {
	font-size: clamp(13px, .92vw, 18px);
	font-weight: 700;
	line-height: 2.1
}
.about-copy p {
	margin: 0 0 30px
}
.about-copy__en {
	font-size: clamp(11px, .68vw, 14px);
	line-height: 1.8;
	margin-top: 42px
}
.about-photo {
	width: 32%;
	aspect-ratio: 0.52;
	overflow: hidden
}
.about-photo img {
	object-position: bottom
}
/* LOOK BOOK：横幅いっぱいの写真とテキスト。ギャラリー下部は4枚 */
.lookbook-cover {
	aspect-ratio: 1.55;
	overflow: hidden
}
.lookbook-copy {
	padding: 28px 4%;
	font-size: clamp(12px, .9vw, 16px);
	line-height: 1.65;
	overflow-wrap: anywhere
}
.lookbook-copy h2 {
	font-weight: 400;
	font-size: clamp(15px, 1.1vw, 21px);
	letter-spacing: .15em;
	margin: 0 0 10px
}
.lookbook-copy p {
	margin: 0 0 24px
}
.lookbook-copy p:last-child {
	margin-bottom: 0
}
page--lookbook {
	padding-bottom: 25px
}
/* COORDINATE：大きい写真75%・着用商品25%、偶数ブロックは左右反転 */
.coordinate-layout {
	display: flex;
	align-items: flex-start
}
.coordinate-photo {
	width: 75%;
	aspect-ratio: .775;
	overflow: hidden
}
.coordinate-items {
	display: flex;
	flex-direction: column;
	width: 25%
}
.coordinate-items .card {
	flex: auto;
	width: 100%;
	aspect-ratio: 1;
	color: #151515;
	background: #dce4df;
	--overlay: 0;
	--overlay-hover: .25
}
.coordinate-items .card__label {
	font-size: clamp(10px, .85vw, 15px);
	letter-spacing: .14em;
	background: #dce4dfd9;
	width: fit-content;
	max-width: calc(100% - 40px);
	right: auto;
	padding: 0 3px
}
.coordinate-layout--reverse {
	flex-direction: row-reverse
}
.coordinate-story {
	scroll-margin-top: 20px
}
.page--coordinate {
	padding-bottom: 40px
}
/* 小さめのPC：文字組みを自然な折り返しへ */
@media(min-width:768px) and (max-width:1199px) {
	.about-copy br {
		display: none
	}
	.product-info {
		padding: 16px 20px 0
	}
	.product-lead br {
		display: none
	}
	.product-info h1 {
		font-size: 20px
	}
	.product-price {
		font-size: 17px
	}
	.about-layout {
		gap: 3%
	}
	.about-copy {
		width: 62%
	}
	.about-photo {
		width: 35%
	}
}
/* スマホ：共通ヘッダー高さは既存style.cssの変数を使用 */
@media(max-width:767px) {
	.page-title {
		padding: 22px 16px 12px;
		font-size: 13px
	}
	.breadcrumb {
		padding: 18px 16px 12px;
		gap: 8px;
		font-size: 10px;
		letter-spacing: .06em
	}
	/* 商品：画像→説明→ボタンの順に縦並び */
	.product-layout {
		flex-direction: column;
		padding-bottom: 20px
	}
	.product-layout > .gallery, .product-info {
		width: 100%
	}
	.product-info {
		padding: 28px 20px
	}
	.product-info h1 {
		font-size: 23px
	}
	.product-price {
		font-size: 18px;
		margin-bottom: 24px
	}
	.product-lead {
		font-size: 15px
	}
	.product-copy, .product-material p {
		font-size: 13px
	}
	.product-material {
		margin-top: 30px
	}
	.product-actions {
		gap: 14px
	}
	.action-button {
		font-size: 23px;
		padding: 22px 14px
	}
	/* ABOUT：本文→写真。強制改行を外して画面幅で折り返す */
	.about-layout {
		flex-direction: column;
		gap: 26px;
		padding: 14px 20px 30px
	}
	.about-copy, .about-photo {
		width: 100%
	}
	.about-copy__ja {
		font-size: 14px;
		line-height: 2
	}
	.about-copy__en {
		font-size: 12px;
		margin-top: 32px
	}
	.about-copy br {
		display: none
	}
	.about-copy p {
		margin-bottom: 24px
	}
	.about-photo {
		aspect-ratio: .85
	}
	/* LOOK BOOK：写真の面積を保ち、本文を読みやすいサイズに */
	.lookbook-cover, .lookbook-block {
		aspect-ratio: 1.15
	}
	.lookbook-copy {
		padding: 24px 20px;
		font-size: 12px;
		line-height: 1.85
	}
	.lookbook-copy h2 {
		font-size: 15px
	}
	.lookbook-copy br {
		display: none
	}
	/* COORDINATE：大写真を上、関連商品2枚を下に並べる */
	.coordinate-layout, .coordinate-layout--reverse {
		flex-direction: column
	}
	.coordinate-photo {
		width: 100%;
		aspect-ratio: .775
	}
	.coordinate-items {
		width: 100%;
		flex-direction: row
	}
	.coordinate-items .card {
		width: 50%;
		flex: 0 0 50%
	}
	.coordinate-items .card__label {
		font-size: 11px
	}
	.coordinate-story {
		scroll-margin-top: calc(var(--header-height) + 12px)
	}
}
/* OSの動きを抑える設定を新規ボタンにも適用 */
@media(prefers-reduced-motion:reduce) {
	.action-button {
		transition: none
	}
}
/* 共通HTMLパーツを取得できない場合の案内 */
.parts-error {
	position: relative;
	z-index: 50;
	background: #f4f4ef;
	color: #151515;
	padding: 18px;
	font-size: 14px;
	line-height: 1.7
}
.parts-error a {
	text-decoration: underline
}
/* ALL ITEM / CATEGORY：カテゴリー案内・ナビゲーション */
.catalog-categories {
	padding: 10px 20px 30px
}
.catalog-section-title {
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .15em;
	margin: 0 0 12px
}
.catalog-category-grid {
	display: flex;
	flex-wrap: wrap
}
.catalog-category-grid .card {
	flex-basis: 25%;
	aspect-ratio: 1;
	--overlay: .2;
	--overlay-hover: .4
}
.catalog-category-grid .card__label {
	font-size: 11px;
	letter-spacing: .05em;
	text-shadow: 0 1px 4px #000
}
.catalog-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	padding: 8px 20px 24px;
	font-size: 12px;
	line-height: 1.8
}
.catalog-nav a {
	border-bottom: 1px solid transparent
}
.catalog-nav a[aria-current="page"] {
	border-color: currentColor
}
.catalog-nav a:hover {
	border-color: currentColor
}
.catalog-heading {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
	padding: 10px 20px 18px
}
.catalog-heading h2, .catalog-heading p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .08em
}
.catalog-heading p {
	font-size: 11px
}
/* 商品一覧：PC3列／スマホ2列。商品情報は画像の下に配置 */
.catalog-products {
	padding-bottom: 48px
}
.catalog-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 0
}
.catalog-product {
	flex: 0 0 calc(100% / 3);
	min-width: 0;
	padding: 0 10px
}
.catalog-product[hidden] {
	display: none
}
.catalog-product__link {
	display: block;
	height: 100%
}
.catalog-product__photo {
	aspect-ratio: 1;
	position: relative;
	overflow: hidden;
	background: #dce4df
}
.catalog-product__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	transition: opacity .3s
}
.catalog-product__photo .card__triangle {
	z-index: 1;
	width: 20px;
	height: 20px;
	bottom: 10px;
	right: 10px;
	color: #fff
}
.catalog-product h2 {
	font-size: 12px;
	line-height: 1.6;
	font-weight: 400;
	letter-spacing: .07em;
	margin: 12px 0 6px;
	overflow-wrap: anywhere
}
.catalog-product__price {
	font-size: 12px;
	line-height: 1.5;
	margin: 0
}
.catalog-product__link:focus-visible .catalog-product__photo::after {
	opacity: .25
}
#category-empty {
	padding: 20px;
	font-size: 14px;
	line-height: 1.8
}
#category-empty a {
	text-decoration: underline
}
@media(hover:hover) {
	.catalog-product__link:hover .catalog-product__photo::after {
		opacity: .25
	}
}
@media(max-width:767px) {
	.catalog-categories {
		padding: 8px 12px 28px
	}
	.catalog-category-grid .card {
		flex-basis: calc(100% / 3)
	}
	.catalog-category-grid .card__label {
		font-size: 9px;
		left: 7px;
		right: 20px;
		bottom: 7px
	}
	.catalog-category-grid .card__triangle {
		width: 12px;
		height: 12px;
		right: 5px;
		bottom: 7px
	}
	.catalog-nav {
		padding: 8px 16px 20px;
		gap: 10px 16px;
		font-size: 11px
	}
	.catalog-heading {
		padding: 10px 16px 16px
	}
	.catalog-product {
		flex-basis: 50%;
		padding: 0 8px
	}
	.catalog-product h2, .catalog-product__price {
		font-size: 11px
	}
	.catalog-grid {
		gap: 24px 0
	}
}
@media(prefers-reduced-motion:reduce) {
	.catalog-product__photo::after {
		transition: none
	}
}