@charset "utf-8";
/**
 * ダイヤモンドジュエリー（FJ）新デザイン（PC: min-width 768px）
 *
 * module/diamond_jewelry_item.php の diamond_jewelry_enqueue() が、新実装の FJ ページだけで読み込む。
 * スマートフォン用は diamond_jewelry_2026_sp.css。
 * サイドバーの有無に依存しないよう、幅は親要素に追従させ、最大幅だけを決める。
 * 寸法は Figma（FJページ改修案_202511、PC 1920px 幅）から。
 */

/* ---------------------------------------------------------------
   共通
--------------------------------------------------------------- */
main.dj {
	padding: 0;
	color: #000;
	letter-spacing: 0.05em;
}
/* ページを開いたときに、中身（main）をふわっと表示する。CSS だけで、画像の読み込みは待たない。
   動きを減らす OS の設定のときは動かさない */
main.dj {
	animation: dj_fade_in .6s ease-out both;
}
@keyframes dj_fade_in {
	from {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	main.dj {
		animation: none;
	}
}
main.dj img {
	max-width: 100%;
	vertical-align: top;
}
main.dj a {
	color: inherit;
	text-decoration: none;
}
main.dj ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* common.css の main > section（min-width: 860px）を、新デザインでは使わない */
main.dj > section {
	min-width: 0;
}
.dj_visually_hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.dj_arrow {
	margin-left: 1em;
}
/* 「＞」は角が90度の山形を線で描く（不等号の文字は角度が浅いため）。FJ TOP の「すべてのジュエリーアイテム」と商品詳細のボタンで使う */
.dj_chevron {
	display: inline-block;
	width: .45em;
	height: .45em;
	margin-left: .7em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
	vertical-align: .12em;
}

/* 見出し（英語＋カナ） */
.dj_heading {
	margin: 0 0 30px;
	font-weight: normal;
	text-align: center;
}
.dj_heading_en {
	display: block;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}
.dj_heading_kana {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
}
.dj_heading_section .dj_heading_en {
	font-size: 24px;
	letter-spacing: 0.1em;
}
.dj_text {
	margin: 0 0 30px;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}

/* 金色の枠のボタン */
/* 余白は FJ TOP の「すべてのジュエリーアイテム」ボタン（.dj_top_all）に近づけ、「＞」は同じ .dj_chevron を使う */
.dj_button {
	display: inline-block;
	box-sizing: border-box;
	min-width: 220px;
	padding: 18px 50px;
	border: 1px solid #bd933f;
	background: #fff;
	color: #bd933f !important;
	font-size: 15px;
	font-weight: bold;
	line-height: 20px;
	letter-spacing: 0.05em;
	text-align: center;
	transition: opacity .2s;
}
.dj_button:hover {
	opacity: .7;
}

/* ---------------------------------------------------------------
   一覧（すべて・カテゴリー・コレクション）
--------------------------------------------------------------- */
#body:has(main.dj_list) {
	padding-top: 0;
}
.dj_list {
	background: #fafafa;
}
.dj_list_mv {
	background: #d9d9d9;
}
.dj_list_mv img {
	display: block;
	width: 100%;
	max-height: 607px;
	object-fit: cover;
}
.dj_list_body {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 40px 100px;
}
.dj_list_head {
	text-align: center;
}
.dj_list_title {
	margin: 0 0 60px;
	font-weight: normal;
}
.dj_list_title_en {
	display: block;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}
.dj_list_title_kana {
	display: block;
	margin-top: 8px;
	font-size: 17px;
}
.dj_list_lead {
	margin: 0 auto 60px;
	max-width: 849px;
	font-size: 14px;
	line-height: 20px;
	text-wrap: pretty;
}

/* 絞り込み・並び替え */
.dj_tools {
	position: relative;
	margin-bottom: 45px;
	border-bottom: 1px solid #e0e0e0;
}
.dj_tools_buttons {
	display: flex;
	justify-content: flex-end;
}
.dj_tools_button {
	margin: 0 0 -1px;
	padding: 10px 10px 20px;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}
.dj_tools_button[aria-expanded="true"] {
	border-bottom-color: #888;
}
.dj_tools_panel {
	display: none;
}
.dj_tools_panel.is_open {
	display: block;
}
.dj_filter {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 1px);
	z-index: 10;
	display: none;
	padding: 50px 50px 30px;
	background: #fafafa;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.dj_filter.is_open {
	display: flex;
}
.dj_filter_group {
	flex: 0 0 340px;
	margin-right: 60px;
}
.dj_filter_title {
	margin: 0 0 18px;
	font-size: 20px;
}
.dj_filter li a {
	display: flex;
	align-items: baseline;
	padding: 15px 0;
}
.dj_filter_name {
	font-size: 16px;
	letter-spacing: 0.05em;
}
.dj_filter_kana {
	margin-left: 1em;
	font-size: 11px;
}
.dj_filter .dj_arrow {
	margin-left: auto;
	font-size: 15px;
}
.dj_filter li.is_current a {
	color: #bd933f;
}
.dj_sort {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 10;
	margin-top: 16px;
	padding: 25px 30px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.dj_sort li a {
	display: block;
	padding: 10px 0;
	font-size: 15px;
	white-space: nowrap;
}
/* ラジオボタン風の丸は CSS で描く（文字の「〇」「●」は大きさと幅がそろわないため） */
.dj_sort li a:before {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-right: 1em;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	vertical-align: -.05em;
}
.dj_sort li.is_current a:before {
	background: currentColor;
}

/* 商品グリッド（PC 4列）。差し込みバナーは2列分 */
.dj_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 30px;
}
.dj_card a {
	display: block;
	text-align: center;
	transition: opacity .2s;
}
.dj_card a:hover {
	opacity: .7;
}
.dj_card_image {
	display: block;
	position: relative;
	padding-top: 100%;
	background: #fff;
	overflow: hidden;
}
.dj_card_image img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* カードの画像のカルーセル（ループ）。矢印は画像枠に重ね、マウスを乗せたときだけ出す */
.dj_card {
	position: relative;
}
.dj_card_slides, .dj_card_slides .slick-list, .dj_card_slides .slick-track {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.dj_card_slides .slick-slide {
	height: 100%;
}
.dj_card_image .dj_card_slides .slick-slide {
	position: relative;
}
.dj_card_arrows {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	padding-top: 100%;
	pointer-events: none;
}
.dj_card_arrows .slick-prev, .dj_card_arrows .slick-next,
.dj_card_arrows .slick-prev:hover, .dj_card_arrows .slick-next:hover,
.dj_card_arrows .slick-prev:focus, .dj_card_arrows .slick-next:focus {
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	pointer-events: auto;
	opacity: 0;
	transition: opacity .2s;
}
.dj_card:hover .slick-arrow {
	opacity: 1;
}
.dj_card_arrows .slick-prev {
	left: 8px;
}
.dj_card_arrows .slick-next {
	right: 8px;
}
/* 矢印は90度のくの字（線の角を回して作る）。黒い商品画像でも見えるよう、半透明の白い丸に置く */
.dj_card_arrows .slick-prev:before, .dj_card_arrows .slick-next:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	opacity: 1;
}
.dj_card_arrows .slick-prev:before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.dj_card_arrows .slick-next:before {
	transform: translate(-70%, -50%) rotate(45deg);
}
.dj_card_name {
	display: block;
	margin-top: 18px;
	font-size: 15px;
	line-height: 15px;
}
.dj_card_kana {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 15px;
}

/* 差し込みバナーは文字も含めた1枚の画像。幅いっぱいに表示し、高さは画像の縦横比のとおり。
   行の高さが商品カードに合わせて伸びても、画像は伸ばさず上に寄せる */
.dj_grid .dj_banner {
	grid-column: span 2;
	align-self: start;
}
main.dj .dj_banner a {
	display: block;
	transition: opacity .2s;
}
.dj_banner a:hover {
	opacity: .85;
}
.dj_banner img {
	display: block;
	width: 100%;
	height: auto;
}
.dj_grid_banner {
	margin-top: 80px !important;
}

.dj_pagination {
	margin-top: 60px;
	text-align: center;
}
.dj_pagination ul {
	display: inline-flex;
}
.dj_pagination li {
	margin: 0 4px;
}
.dj_pagination a, .dj_pagination span {
	display: block;
	min-width: 36px;
	padding: 6px 4px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
}
.dj_pagination .current {
	border-color: #000;
	background: #000;
	color: #fff;
}
.dj_pagination .dots {
	border-color: transparent;
	background: none;
}
.dj_empty {
	padding: 60px 0;
	text-align: center;
	font-size: 14px;
}

/* ---------------------------------------------------------------
   商品詳細
--------------------------------------------------------------- */
.dj_detail {
	padding-bottom: 150px !important;
}
.dj_detail_brand {
	display: inline-block;
	margin: 80px 0 0;
	padding: 0 40px 6px;
	min-width: 508px;
	border-bottom: 1px solid #000;
	text-align: right;
	box-sizing: border-box;
}
.dj_detail_brand_en {
	font-size: 1.8em;
}
.dj_detail_brand_kana {
	margin-left: 1em;
	font-size: 15px;
}
.dj_detail_main {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: flex-start;
	max-width: 1300px;
	margin: 50px auto 0;
	padding: 0 40px;
}
/* flex の子の最小幅を 0 にする（slick のトラック幅で横に押し出されるのを防ぐ） */
.dj_detail_info {
	flex: 0 1 625px;
	min-width: 0;
}
.dj_detail_gallery {
	flex: 0 1 600px;
	min-width: 0;
	margin-left: 50px;
}
.dj_detail_type {
	margin: 20px 0 0;
	color: #8b8989;
	font-size: 16px;
}
.dj_detail_type a {
	color: #8b8989;
}
.dj_detail_title {
	margin: 20px 0 40px;
	font-weight: normal;
}
.dj_detail_title_en {
	display: block;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: 0.02em;
}
.dj_detail_title_kana {
	display: block;
	margin-top: 8px;
	font-size: 16px;
}
.dj_spec {
	padding: 50px 50px 37px;
	background: #fafafa;
}
.dj_spec_row {
	margin: 0 0 36px;
}
.dj_spec_row dt {
	padding-bottom: 10px;
	border-bottom: 1px solid #e3e3e3;
	font-size: 14px;
	font-weight: bold;
}
.dj_spec_row dd {
	margin: 0;
	padding-top: 10px;
	font-size: 14px;
	line-height: 20px;
}
.dj_spec_price {
	margin: 0 0 10px;
}
.dj_spec_price span {
	display: block;
}
.dj_reserve {
	max-width: 320px;
	margin: 40px auto 0;
	padding: 25px 15px 20px;
	background: #ebe6dd;
	text-align: center;
}
.dj_reserve_title {
	margin: 0 0 8px;
	font-size: 15px;
}
.dj_reserve_button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	width: 300px;
	max-width: 100%;
	margin-top: 5px;
	padding: 16px 0;
	background: #5f5953;
	color: #fff !important;
	font-size: 15px;
	font-weight: normal;
	transition: opacity .2s;
}
.dj_reserve_button:hover {
	opacity: .8;
}

/* 商品画像のスライダー（slick） */
.dj_gallery {
	visibility: hidden;
}
.dj_gallery.slick-initialized {
	visibility: visible;
}
/* Figma どおり正方形の枠に収める（画像の縦横比が商品ごとに違ってもそろえる） */
.dj_gallery li {
	aspect-ratio: 1 / 1;
	background: #fff;
}
.dj_gallery li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.dj_gallery .slick-dots {
	position: static;
	display: flex !important;
	justify-content: center;
	margin-top: 16px;
}
.dj_gallery .slick-dots li {
	width: 25px;
	height: 2px;
	margin: 0 3px;
}
.dj_gallery .slick-dots li button {
	width: 25px;
	height: 2px;
	padding: 0;
	background: #d9d9d9;
	font-size: 0;
}
.dj_gallery .slick-dots li button:before {
	display: none;
}
.dj_gallery .slick-dots li.slick-active button {
	background: #bd933f;
}
.dj_gallery .slick-next, .dj_gallery .slick-prev {
	z-index: 1;
	width: 30px;
	height: 30px;
}
.dj_gallery .slick-next {
	right: -30px;
}
.dj_gallery .slick-prev {
	left: -30px;
}
/* 一覧のカードの矢印と同じ、1px の線の直角のくの字 */
.dj_gallery .slick-next:before, .dj_gallery .slick-prev:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	opacity: 1;
}
.dj_gallery .slick-prev:before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.dj_gallery .slick-next:before {
	transform: translate(-70%, -50%) rotate(45deg);
}

/* 概要 */
.dj_split {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: content-box;
}
.dj_split_reverse {
	flex-direction: row-reverse;
}
.dj_split_image {
	flex: 0 0 44%;
}
.dj_split_image img {
	display: block;
	width: 100%;
}
.dj_split_text {
	flex: 0 1 46%;
	margin: 0 0 0 10%;
}
.dj_split_text.dj_center {
	text-align: center;
}

.dj_summary {
	margin-top: 80px;
}
.dj_summary_heading {
	margin: 0 0 20px;
	font-size: 21px;
	font-weight: normal;
}
.dj_summary_body {
	font-size: 14px;
	line-height: 20px;
}
.dj_summary_body p {
	margin: 0 0 20px;
}

.dj_collection {
	margin-top: 100px;
	margin-bottom: 130px;
}
.dj_collection .dj_text {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
	text-wrap: pretty;
}
.dj_collection .dj_split_text {
	margin: 0 5% 0 0;
}
.dj_collection .dj_split_image {
	flex-basis: 450px;
	max-width: 450px;
}

.dj_recommend {
	margin-top: 130px;
	padding: 60px 40px 110px;
	background: #fafafa;
}
.dj_recommend_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1280px;
	margin: 0 auto !important;
}

.dj_promos {
	margin-top: 80px;
}
.dj_promo {
	max-width: 980px;
	padding-top: 70px;
	padding-bottom: 70px;
	border-bottom: 1px solid #ccc;
}
.dj_promo:first-child {
	border-top: 0;
}
.dj_promo .dj_split_image {
	flex-basis: 450px;
	max-width: 450px;
}
.dj_promo .dj_split_text {
	margin: 0 0 0 6%;
}
.dj_promo.dj_split_reverse .dj_split_text {
	margin: 0 6% 0 0;
}
.dj_promo .dj_heading_en {
	font-size: 21px;
}
.dj_promo .dj_text {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}
.dj_bg_black {
	display: flex;
	align-items: center;
	aspect-ratio: 1 / 1;
	background: #000;
}
.dj_bg_black img {
	margin: 0 auto;
	width: 95% !important;
}

/* ---------------------------------------------------------------
   TOP
--------------------------------------------------------------- */
/* FJ TOP の書体: 日本語は Noto Serif JP、英語の見出しは EB Garamond（デザイン）。
   読み込みは module/diamond_jewelry_item.php の diamond_jewelry_print_styles() */
main.dj_top {
	font-family: "Noto Serif JP", serif;
}
.dj_top_mv_en, .dj_top_collection_en, .dj_top_category_en {
	font-family: "EB Garamond", serif;
	font-weight: 400;
}
.dj_top_mv_kana, .dj_top_collection_kana, .dj_top_category_kana {
	font-weight: 500;
}
#body:has(main.dj_top) {
	padding-top: 0;
}
/* MV: 横は幅いっぱい、縦横比はデザイン FIX（幅 1440px で高さ 665px）に合わせ、縦は 900px を上限にする。
   画像はブロック全体を覆い、常に中央を保つ。見出しは画像に重ねるテキスト */
.dj_top_mv {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1440 / 665;
	max-height: 900px;
	background: #1f3a48;
}
/* aspect-ratio と max-height だけだと、縦が上限に達したときに横幅まで縮むため、
   対応ブラウザでは高さを「親の幅 × 665/1440」と 900px の小さいほうで決める */
/* 中身（リード文〜コレクション紹介、CATEGORY の見出し〜ボタン）の幅の上限。広い画面では中央に置く。
   中の文字・写真・余白は .dj_top_inner の幅に比例するので、ここで止まるとそろって止まる。
   上限はデザイン FIX の幅（1440px）で、サイドバーの有無にかかわらずこの値。広げるときはここだけ変える */
.dj_top_inner {
	max-width: 1440px;
	margin: 0 auto;
}
/* CATEGORY は黒い背景を幅いっぱいにし、左右の余白は中身の側に付ける */
.dj_top_category .dj_top_inner > * {
	padding-left: 8.3%;
	padding-right: 8.3%;
}
@supports (height: 1cqw) {
	main.dj_top {
		container-type: inline-size;
	}
	.dj_top_inner {
		container-type: inline-size;
	}
	.dj_top_mv {
		aspect-ratio: auto;
		max-height: none;
		height: min(calc(100cqw * 665 / 1440), 900px);
	}
}
.dj_top_mv img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* 見出しは左寄り、写真の上下の中央（デザイン FIX） */
.dj_top_mv_title {
	position: absolute;
	left: 12.8%;
	top: 48%;
	margin: 0;
	transform: translateY(-50%);
	color: #fff;
	font-weight: normal;
}
.dj_top_mv_en {
	display: block;
	font-size: clamp(36px, 3.8vw, 72px);
	font-size: clamp(36px, 3.8cqw, 72px);
	line-height: 1.1;
	letter-spacing: 0.04em;
}
.dj_top_mv_kana {
	display: block;
	margin-top: 1.3em;
	font-size: clamp(12px, 0.9vw, 18px);
	font-size: clamp(12px, 0.9cqw, 18px);
	letter-spacing: 0.1em;
}
/* 文章は左揃えのまま、かたまり全体をブラウザ幅に関係なく左右中央に置く */
.dj_top_lead {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 80px 40px 60px;
	box-sizing: border-box;
}
/* 大きさは Figma（幅 1920px で見出し 52px・本文 22px）から。画面幅に比例させ、上限をデザインの値にする。
   FJ TOP の vw の後ろの cqw は、ページの中身（main.dj_top）の幅に比例させるためのもの。サイドバーがあっても
   文字と欄が同じ比率で縮む。cqw に対応しないブラウザは vw の指定で表示する */
.dj_top_lead_title {
	margin: 0 0 1em;
	font-size: clamp(34px, 2.8vw, 52px);
	font-size: clamp(34px, 2.8cqw, 52px);
	font-weight: normal;
	line-height: 1.6;
	letter-spacing: 0.02em;
}
.dj_top_lead p {
	margin: 0 0 1.4em 0;
	font-size: clamp(16px, 1.23vw, 22px);
	font-size: clamp(16px, 1.23cqw, 22px);
	line-height: 1.75;
	letter-spacing: 0.11em;
}

/* コレクション紹介。寸法は Figma（幅 1920px）から。画面幅に比例させ、上限をデザインの値にする。
   写真は左右の余白を除いた幅の 66%（画面全体の約56%）、左右の余白 7.5%、写真と文字の間 約50px、コレクション同士の間 約330px */
.dj_top_collection {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	margin: 80px 0 0;
	padding: 0 8.3%;
}
.dj_top_collection + .dj_top_collection {
	margin-top: min(14vw, 270px);
	margin-top: min(14cqw, 270px);
}
.dj_top_collection_reverse {
	flex-direction: row;
}
.dj_top_collection_image {
	display: block;
	flex: 0 0 65.5%;
	transition: opacity .2s;
}
.dj_top_collection_image:hover, .dj_top_collection_en:hover, .dj_top_more:hover {
	opacity: .75;
}
.dj_top_collection_en, .dj_top_more {
	transition: opacity .2s;
}
.dj_top_collection_image img {
	display: block;
	width: 100%;
}
.dj_top_collection_text {
	flex: 1 1 auto;
	padding: 0 2.8vw 0 0;
	padding: 0 2.8cqw 0 0;
}
.dj_top_collection_reverse .dj_top_collection_text {
	padding: 0 0 0 2.8vw;
	padding: 0 0 0 2.8cqw;
}
.dj_top_collection_title {
	margin: 0 0 clamp(24px, 1.8vw, 46px);
	margin: 0 0 clamp(24px, 1.8cqw, 46px);
	font-weight: normal;
}
/* 2行になるときは行の長さをそろえて折り返す（例: Superbe ／ Merveille Neige。Figma の改行位置） */
.dj_top_collection_en {
	display: block;
	font-size: clamp(32px, 4.2vw, 69px);
	font-size: clamp(32px, 4.2cqw, 69px);
	line-height: 1.05;
	letter-spacing: 0.03em;
	text-wrap: balance;
}
.dj_top_collection_kana {
	display: block;
	margin-top: 1.2em;
	font-size: clamp(11px, 1vw, 16px);
	font-size: clamp(11px, 1cqw, 16px);
	font-weight: 500;
	letter-spacing: -0.05em;
}
.dj_top_collection_text p {
	margin: 0 0 1.2em;
	font-size: clamp(14px, 1.22vw, 21px);
	font-size: clamp(14px, 1.22cqw, 21px);
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.dj_top_more {
	display: block;
	text-align: right;
	font-size: clamp(14px, 1.1vw, 20px);
	font-size: clamp(14px, 1.1cqw, 20px);
	letter-spacing: 0.08em;
}
.dj_top_more .dj_chevron {
	margin-left: .4em;
}

/* CATEGORY。寸法は Figma（幅 1920px）から。上下の余白 約180px、左右の余白 7.5%（コレクション紹介と同じ）、
   見出し 52px、枠の間隔は中身の幅の約3%。画面幅に比例させ、上限をデザインの値にする */
.dj_top_category {
	margin-top: min(14vw, 270px);
	margin-top: min(14cqw, 270px);
	padding: min(9vw, 170px) 0 min(8.3vw, 160px);
	padding: min(9cqw, 170px) 0 min(8.3cqw, 160px);
	background: #000;
	color: #fff;
}
.dj_top_category_title {
	margin: 0 0 min(2vw, 38px);
	margin: 0 0 min(2cqw, 38px);
	font-weight: normal;
}
.dj_top_category_en {
	display: block;
	font-size: clamp(32px, 2.7vw, 52px);
	font-size: clamp(32px, 2.7cqw, 52px);
	line-height: 1.2;
	letter-spacing: 0.07em;
}
.dj_top_category_kana {
	display: block;
	margin-top: .8em;
	font-size: clamp(12px, 0.95vw, 16px);
	font-size: clamp(12px, 0.95cqw, 16px);
	letter-spacing: 0.05em;
}
/* main.dj ul の margin: 0 に負けないよう、詳細度を上げる */
main.dj .dj_top_category_list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 3.33%;
	margin: 0;
}
main.dj .dj_top_category_list a {
	display: block;
	text-align: center;
	color: #fff;
	transition: opacity .2s;
}
.dj_top_category_list a:hover {
	opacity: .75;
}
.dj_top_category_image {
	display: block;
	border: 1px solid #fff;
}
.dj_top_category_image img {
	display: block;
	width: 100%;
}
.dj_top_category_name {
	display: block;
	margin-top: .8em;
	font-size: clamp(14px, 1.2vw, 24px);
	font-size: clamp(14px, 1.2cqw, 24px);
	font-weight: 400;
	letter-spacing: 0.12em;
}
.dj_top_category_name .dj_chevron {
	margin-left: .3em;
}
.dj_top_all {
	margin: min(4.2vw, 80px) 0 0;
	margin: min(4.2cqw, 80px) 0 0;
	text-align: center;
}
.dj_top_all a {
	display: inline-block;
	min-width: 320px;
	padding: 22px 30px;
	border: 1px solid #777;
	background: #000;
	color: #fff !important;
	font-size: 14px;
	letter-spacing: 0.1em;
	box-sizing: border-box;
	transition: opacity .2s;
}
.dj_top_all a:hover {
	opacity: .8;
}

/* RECOMMEND のカルーセル（slick）。4つずつ表示、「＜」「＞」はカルーセルの外側、ドットは画像スライダーと同じ */
/* 枠はデザイン（幅 1920px）の 290px・間隔 30px に合わせる（4つ×290px＋間隔3つ＋矢印の余白） */
.dj_recommend_list.slick-initialized {
	display: block;
	max-width: 1350px;
	padding: 0 50px;
	box-sizing: border-box;
}
.dj_recommend_list .slick-list {
	margin: 0 -15px;
}
/* テーマの js/slick/slick.css は .slick-track を 35px 下げ、左右中央の指定もないため、ここで打ち消す（4つ未満のときは左右中央に並ぶ） */
.dj_recommend_list .slick-track {
	top: 0;
	margin-left: auto;
	margin-right: auto;
}
.dj_recommend_list .slick-slide {
	padding: 0 15px;
	box-sizing: border-box;
}
.dj_recommend_list .slick-dots {
	position: static;
	display: flex !important;
	justify-content: center;
	margin-top: 30px;
}
.dj_recommend_list .slick-dots li {
	width: 25px;
	height: 2px;
	margin: 0 3px;
}
.dj_recommend_list .slick-dots li button {
	width: 25px;
	height: 2px;
	padding: 0;
	background: #d9d9d9;
	font-size: 0;
}
.dj_recommend_list .slick-dots li button:before {
	display: none;
}
.dj_recommend_list .slick-dots li.slick-active button {
	background: #bd933f;
}
.dj_recommend_list .slick-prev, .dj_recommend_list .slick-next {
	z-index: 1;
	width: 30px;
	height: 30px;
	top: 40%;
}
.dj_recommend_list .slick-prev {
	left: 0;
}
.dj_recommend_list .slick-next {
	right: 0;
}
/* 商品画像のカルーセルと同じ、1px の線の直角のくの字 */
.dj_recommend_list .slick-prev:before, .dj_recommend_list .slick-next:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 1px solid #666;
	border-right: 1px solid #666;
	opacity: 1;
}
.dj_recommend_list .slick-prev:before {
	transform: translate(-30%, -50%) rotate(-135deg);
}
.dj_recommend_list .slick-next:before {
	transform: translate(-70%, -50%) rotate(45deg);
}