@charset "UTF-8";

/* ==================================================================
   ISSUE v0.1 ／ ビジュアル方向：編集された売場
   ------------------------------------------------------------------
   考え方：
   棚らしさを「棚板の意匠」で作るのをやめました。
   代わりに、判型の違うものが同じ面に並んでいる状態そのものを棚とします。

   本は縦長で背表紙があり、動画は16:9で尺が出て、商品は白地に価格が立ち、
   行動は画像を持たない生成りの札になる。
   それらが1つの棚に混ざっていることが、編集の証拠になります。

   色は 生成り・白・木・黒・グレー。差し色は使いません。
   木は什器の縁だけに、細く使います。
   ================================================================== */

:root {

	/* --- 色 --- */
	--kinari:     #e9e3d6;   /* 生成り：床・地 */
	--kinari-2:   #ded7c7;   /* 一段沈んだ地 */
	--paper:      #f6f4ef;   /* 紙 */
	--white:      #ffffff;   /* 白：商品の背景 */
	--ink:        #14130f;   /* 黒：サイン */
	--ink-2:      #52514c;
	--ink-3:      #85837c;
	--line:       #cbc5b6;   /* 罫 */
	--line-2:     #b6af9d;
	--wood:       #b98f55;   /* 木：什器の縁 */
	--wood-d:     #7c5c34;

	/* --- 書体 --- */
	--font-sign:  "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; /* サイン・見出し */
	--font-edit:  "Shippori Mincho", "Hiragino Mincho ProN", serif;   /* 編集の言葉 */
	--font-label: "Archivo", "Helvetica Neue", sans-serif;            /* ラベル・数字 */
	--font-body:  "Noto Sans JP", "Hiragino Sans", sans-serif;

	/* --- 寸法 --- */
	--wrap: 1280px;
	--gut: 18px;
}

@media (min-width: 900px) {
	:root { --gut: 36px; }
}

/* ------------------------------------------------------------------
   土台
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--kinari);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--wood-d); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	left: 12px; top: 12px; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 10px 16px;
}

.wrap,
.entry__inner,
.define__inner,
.breakdown__inner,
.shelves__inner,
.others__inner,
.listing__inner,
.doc__inner,
.site-header__inner,
.site-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}

/* セクションのサイン。売場の案内表示のトーンで。 */
.section-tag {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
}
.section-tag span { color: var(--ink-3); }
.section-tag::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* ------------------------------------------------------------------
   ヘッダー / フッター
   ------------------------------------------------------------------ */

.site-header {
	background: var(--ink);
	color: var(--paper);
	position: sticky;
	top: 0;
	z-index: 40;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 11px;
	flex-wrap: wrap;
}
.site-header__mark { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.site-header__mark-en {
	font-family: var(--font-label);
	font-weight: 600;
	letter-spacing: .32em;
	font-size: 13px;
}
.site-header__mark-ja { font-size: 10px; color: #9c9990; }
.site-header__nav { display: flex; gap: 18px; font-size: 11.5px; }
.site-header__nav a { text-decoration: none; color: #d8d4ca; }
.site-header__nav a:hover { color: var(--white); }

.site-footer {
	margin-top: 80px;
	background: var(--ink);
	color: #9c9990;
	padding-block: 36px 88px;
}
.site-footer__note { font-size: 11.5px; max-width: 46em; }
.site-footer__meta {
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: .2em;
	margin-top: 10px;
	color: #6d6a63;
}

/* ------------------------------------------------------------------
   01 ENTRY
   ------------------------------------------------------------------
   入口に立った時点で、売場が見えているようにします。
   コピーは左に寄せ、右にはもう在庫の気配を置きます。
   ------------------------------------------------------------------ */

.entry {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	padding-top: 36px;
}

.entry__head {
	display: grid;
	gap: 32px;
	padding-bottom: 30px;
}

@media (min-width: 900px) {
	.entry { padding-top: 52px; }
	.entry__head {
		grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
		gap: 56px;
		padding-bottom: 40px;
	}
}

.entry__number {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--ink-3);
	margin-bottom: 16px;
}

.entry__title {
	font-family: var(--font-sign);
	font-weight: 700;
	font-size: clamp(26px, 4.6vw, 44px);
	line-height: 1.45;
	letter-spacing: -.015em;
	max-width: 16em;
}

.entry__lead {
	margin-top: 20px;
	max-width: 32em;
	font-size: 13px;
	color: var(--ink-2);
	line-height: 2;
}
.entry__lead p + p { margin-top: .9em; }

/* 右の「在庫の気配」 */
.entry__stock {
	border: 1px solid var(--line);
	border-top: 3px solid var(--wood);
	background: var(--white);
	padding: 14px 16px 8px;
	align-self: start;
}
.entry__stock-label {
	font-family: var(--font-label);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-bottom: 9px;
	border-bottom: 1px solid var(--line);
}
.entry__stock-list { display: grid; }
.stock {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 10px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid #eae6dc;
	font-size: 12px;
	line-height: 1.6;
}
.stock:last-child { border-bottom: 0; }
.stock__type {
	font-family: var(--font-label);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--ink-3);
	text-transform: uppercase;
}
.stock__title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

@media (max-width: 899px) {
	.entry__stock { display: none; } /* スマホでは下の帯が同じ役割を果たします */
}

/* 判型の違いを、入口の帯でも見せます */
.entry__strip {
	overflow-x: auto;
	border-top: 1px solid var(--line);
	background: var(--kinari-2);
	scrollbar-width: thin;
}
.entry__strip-track {
	display: flex;
	min-width: min-content;
}
.chip {
	flex: 0 0 auto;
	display: grid;
	gap: 3px;
	align-content: start;
	width: 168px;
	padding: 12px 14px 14px;
	border-right: 1px solid var(--line);
	text-decoration: none;
	background: var(--kinari-2);
	transition: background-color .15s ease;
}
.chip:hover { background: var(--white); }
.chip__type {
	font-family: var(--font-label);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.chip__title {
	font-size: 12px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 素材ごとに帯の頭を変え、違うものが並んでいることを示します */
.chip::before {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	margin-bottom: 6px;
	background: var(--ink);
}
.chip--book::before    { background: var(--wood-d); }
.chip--video::before   { background: var(--ink); width: 30px; }
.chip--sleeve::before  { background: var(--ink-3); width: 12px; }
.chip--goods::before   { background: var(--line-2); }
.chip--place::before   { background: var(--wood); width: 34px; }
.chip--note::before    { background: var(--ink); width: 8px; }
.chip--article::before { background: var(--ink-3); width: 24px; }

/* ------------------------------------------------------------------
   02 DEFINE
   ------------------------------------------------------------------ */

.define {
	padding-block: 44px;
	border-bottom: 1px solid var(--line);
}

.define__inner { display: grid; gap: 26px; }

@media (min-width: 900px) {
	.define__inner {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 56px;
		align-items: start;
	}
	.define .section-tag { grid-column: 1 / -1; }
}

.define__title {
	font-family: var(--font-sign);
	font-weight: 500;
	font-size: clamp(18px, 2.8vw, 26px);
	line-height: 1.7;
	max-width: 26em;
}
.define__title span { display: block; }

.define__body {
	margin-top: 18px;
	max-width: 38em;
	font-size: 13px;
	color: var(--ink-2);
}
.define__body p + p { margin-top: 1.1em; }

/* 縦列挙は、什器の値札のように */
.define__list {
	display: grid;
	background: var(--white);
	border: 1px solid var(--line);
	align-self: start;
}
.define__list li {
	font-family: var(--font-edit);
	font-size: 14px;
	padding: 10px 16px;
	border-bottom: 1px solid #eae6dc;
}
.define__list li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------
   03 BREAKDOWN
   ------------------------------------------------------------------ */

.breakdown { padding-block: 40px 34px; }

.breakdown__note { font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }

.breakdown__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.breakdown__cards a,
.breakdown__cards .is-flat {
	display: flex;
	align-items: center;
	min-height: 62px;
	padding: 12px 14px;
	background: var(--paper);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.55;
	transition: background-color .15s ease;
}
.breakdown__cards a:hover { background: var(--white); }
.breakdown__cards a::after {
	content: "↓";
	margin-left: auto;
	padding-left: 10px;
	font-family: var(--font-label);
	font-size: 11px;
	color: var(--ink-3);
}

/* ------------------------------------------------------------------
   04 棚
   ------------------------------------------------------------------ */

.shelves { padding-block: 34px 0; }

.shelf { margin-bottom: 44px; scroll-margin-top: 60px; }

/* --- 棚のサイン --- */
.shelf__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 4px 16px;
	padding-bottom: 9px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--ink);
}

.shelf__sign { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.shelf__name {
	font-family: var(--font-sign);
	font-weight: 700;
	font-size: clamp(16px, 2.4vw, 21px);
	letter-spacing: -.01em;
	line-height: 1.4;
}
.shelf__kicker {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.shelf__meta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--ink-2);
	white-space: nowrap;
}

/* 内訳。これが棚の主張になります。 */
.shelf__composition { display: flex; gap: 6px; flex-wrap: wrap; }
.shelf__composition span {
	border: 1px solid var(--line-2);
	padding: 1px 7px;
	line-height: 1.7;
}
.shelf__count { color: var(--ink-3); }

.shelf__lead {
	grid-column: 1 / -1;
	font-family: var(--font-edit);
	font-size: 13px;
	color: var(--ink-2);
	padding-top: 6px;
	max-width: 52em;
}

@media (max-width: 599px) {
	.shelf__head { grid-template-columns: 1fr; align-items: start; }
	.shelf__meta { justify-content: flex-start; }
}

.shelf__rail { position: relative; }

/* 平台：判型の違うものが同じ面に並ぶ。dense で隙間を詰めます。 */
.shelf--grid .shelf__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 12px;
}

@media (min-width: 600px) {
	.shelf--grid .shelf__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.shelf--grid .shelf__items { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
}

/* 素材ごとの占有幅。これが「並置」の見え方を作ります。 */
.shelf--grid .card--video,
.shelf--grid .card--place { grid-column: span 2; }

@media (min-width: 1000px) {
	.shelf--grid .card--video,
	.shelf--grid .card--place { grid-column: span 3; }
	.shelf--grid .card--article { grid-column: span 2; }
}

/* 什器：横スクロール。幅も素材ごとに変えます。 */
.shelf--shelf .shelf__rail {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	margin-inline: calc(var(--gut) * -1);
	padding-inline: var(--gut);
	scrollbar-width: thin;
}
.shelf--shelf .shelf__items {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.shelf--shelf .shelf__items > * { flex: 0 0 208px; scroll-snap-align: start; }
.shelf--shelf .card--video,
.shelf--shelf .card--place { flex-basis: 300px; }
.shelf--shelf .card--note { flex-basis: 190px; }

.shelves__empty {
	border: 1px dashed var(--line-2);
	padding: 36px 22px;
	text-align: center;
	color: var(--ink-2);
	font-size: 13px;
}
.shelves__empty-cta {
	display: inline-block;
	margin-top: 16px;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	font-size: 12.5px;
	padding: 9px 18px;
}

/* ------------------------------------------------------------------
   カード：素材ごとに判型と質感を変える
   ------------------------------------------------------------------ */

.card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--line);
	transition: box-shadow .16s ease, transform .16s ease;
}
a.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px -12px rgba(20, 19, 15, .6);
}

.card__visual {
	position: relative;
	overflow: hidden;
	background: var(--kinari-2);
	border-bottom: 1px solid var(--line);
}
.card__visual img { width: 100%; height: 100%; object-fit: cover; }

.card__visual-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.card__body {
	padding: 11px 12px 13px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.card__tag {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-label);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.card__title {
	font-family: var(--font-sign);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
}

.card__source { font-size: 11px; color: var(--ink-3); }

/* 編集コメント。明朝はここだけに使い、編集の言葉であることを示します。 */
.card__comment {
	font-family: var(--font-edit);
	font-size: 12px;
	line-height: 1.85;
	color: var(--ink-2);
}

.card__rows {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1px 9px;
	font-size: 10.5px;
	color: var(--ink-2);
}
.card__rows dt {
	font-family: var(--font-label);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-top: 2px;
}

.card__for {
	font-size: 10.5px;
	color: var(--ink-2);
	padding-left: 8px;
	border-left: 2px solid var(--wood);
	line-height: 1.6;
}

.card__spec {
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--line);
	display: flex;
	gap: 10px;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--ink-3);
}

/* --- 本：縦長・背表紙あり --- */
.card--book .card__visual { aspect-ratio: 3 / 4; }
.card__spine {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 7px;
	background: linear-gradient(90deg, rgba(20,19,15,.34), rgba(20,19,15,.05));
}
.card--book .card__title { font-family: var(--font-edit); font-weight: 600; }

/* --- 動画：16:9・尺・再生 --- */
.card--video .card__visual { aspect-ratio: 16 / 9; background: var(--ink); }
.card__play {
	position: absolute;
	left: 12px; bottom: 10px;
	width: 26px; height: 26px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.92);
	color: var(--ink);
	font-size: 9px;
	padding-left: 2px;
}
.card__stamp {
	position: absolute;
	right: 8px; bottom: 10px;
	background: rgba(20,19,15,.86);
	color: var(--paper);
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: .06em;
	padding: 2px 7px;
}

/* --- 音楽：正方形 --- */
.card--sleeve .card__visual { aspect-ratio: 1 / 1; }

/* --- 商品：白地・価格が立つ --- */
.card--goods { background: var(--white); }
.card--goods .card__visual { aspect-ratio: 1 / 1; background: var(--white); }
.card--goods .card__visual img { object-fit: contain; padding: 10px; }
.card__price {
	font-family: var(--font-label);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* --- 場所：横長 --- */
.card--place .card__visual { aspect-ratio: 16 / 10; }

/* --- 行動・道具：画像を持たない生成りの札 --- */
.card--note {
	background: var(--kinari);
	border-color: var(--line-2);
}
.card--note .card__body { padding-top: 13px; }
.card--note .card__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.65;
}
.card--note::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--ink);
}

/* --- 記事：文字主体、罫だけ --- */
.card--article { background: var(--white); }
.card--article .card__title {
	font-family: var(--font-edit);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}
.card--article .card__body { padding-top: 13px; }

/* ------------------------------------------------------------------
   05 他のISSUEへ
   ------------------------------------------------------------------ */

.others { padding-block: 30px 0; }

.others__list { border-top: 1px solid var(--line); }
.others__list li { border-bottom: 1px solid var(--line); }
.others__list a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 16px 4px;
	text-decoration: none;
	transition: padding-left .16s ease, background-color .16s ease;
}
.others__list a:hover { padding-left: 12px; background: var(--paper); }
.others__num {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--ink-3);
	flex-shrink: 0;
}
.others__title {
	font-family: var(--font-sign);
	font-weight: 500;
	font-size: clamp(14px, 2.2vw, 18px);
}

/* ------------------------------------------------------------------
   一覧 / 単体ページ
   ------------------------------------------------------------------ */

.listing, .doc { padding-block: 40px 0; }

.listing__items { border-top: 1px solid var(--line); }
.listing__items li { border-bottom: 1px solid var(--line); }
.listing__items a { display: block; padding: 16px 4px; text-decoration: none; }
.listing__title { font-family: var(--font-sign); font-weight: 500; font-size: 17px; display: block; }
.listing__excerpt { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

.doc__inner { max-width: 720px; }
.doc__title {
	font-family: var(--font-sign);
	font-weight: 700;
	font-size: clamp(22px, 4vw, 34px);
	line-height: 1.5;
}
.doc__source { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }
.doc__image { margin-top: 24px; }
.doc__body { margin-top: 24px; font-size: 14.5px; }
.doc__body p { margin-bottom: 1.4em; }
.doc__out { margin-top: 28px; }
.doc__out a {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	font-size: 12.5px;
	padding: 10px 20px;
}

/* ------------------------------------------------------------------
   v0.1 検証用：表示切替バー（判断がついたら削除）
   ------------------------------------------------------------------ */

.view-switch {
	position: fixed;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 5px;
	background: var(--ink);
	color: var(--paper);
	box-shadow: 0 8px 20px -10px rgba(20, 19, 15, .8);
	max-width: calc(100vw - 20px);
}
.view-switch__label {
	font-family: var(--font-label);
	font-size: 9px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #85837c;
	padding: 0 7px 0 5px;
	white-space: nowrap;
}
.view-switch__btn {
	font-family: inherit;
	font-size: 11px;
	color: inherit;
	background: none;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	padding: 6px 11px;
	white-space: nowrap;
}
.view-switch__btn:hover { border-color: #52514c; }
.view-switch__btn.is-active { background: var(--paper); color: var(--ink); }

@media (max-width: 480px) {
	.view-switch__label { display: none; }
}

/* ------------------------------------------------------------------
   配慮
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 画像未設定時の面。素材ごとに質感を変え、判型が読めるようにします。 */
.card--book .card__visual   { background: linear-gradient(160deg, #d9d2c2, #c6bda8); }
.card--sleeve .card__visual { background: linear-gradient(135deg, #d3ccbc, #b6af9d); }
.card--place .card__visual  { background: linear-gradient(180deg, #cfc8b7, #b6af9d); }
.card--goods .card__visual  { background: var(--white); box-shadow: inset 0 0 0 1px #eee9df; }
.card--video .card__visual-empty { color: #6d6a63; }

/* 什器：まだ横に続いていることを示す */
.shelf--shelf .shelf__rail::after {
	content: "";
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 40px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	background: linear-gradient(90deg, rgba(233,227,214,0), rgba(233,227,214,.95));
}
.shelf--shelf .shelf__rail.has-more::after { opacity: 1; }