@charset "UTF-8";
/* =========================================================
   sections.css — セクションパーツ（1パーツ = 1ブロックで記述）
   各値は withers.jp の実測に基づく（preview/orig-styles.json / bands.json）
   ========================================================= */

/* ---- hero: 動画（PC横長16:9 / SP縦）+ お知らせティッカー ---- */
.tz-section--hero {
	position: relative;
	padding-block: 0;
	background: var(--tz-dark);
}

.tz-hero__media {
	aspect-ratio: 9 / 14; /* SP縦動画 */
	overflow: hidden;
}

.tz-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ティッカー: SPは動画下の白帯、PCは動画に重ねる */
.tz-hero__ticker {
	display: flex;
	align-items: center;
	background: var(--tz-white);
}

.tz-hero__ticker-item {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 14px var(--tz-gutter);
}

.tz-hero__ticker-date {
	flex-shrink: 0;
	font-size: 0.8125rem;
	color: var(--tz-gray);
	letter-spacing: 0.06em;
}

.tz-hero__ticker-title {
	font-size: 0.875rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity 0.3s;
}

.tz-hero__ticker-item:hover .tz-hero__ticker-title {
	opacity: 0.6;
}

.tz-hero__ticker-all {
	flex-shrink: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	padding: 14px var(--tz-gutter);
	border-left: 1px solid var(--tz-line);
}

@media (min-width: 768px) {
	.tz-hero__media {
		aspect-ratio: 16 / 8.4; /* 実測: 1280pxでヒーロー高さ約610px */
	}

	.tz-hero__ticker {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		background: transparent;
		gap: 24px;
	}

	.tz-hero__ticker-item {
		flex: 0 1 680px;
		background: var(--tz-white);
		padding: 16px 28px;
	}

	.tz-hero__ticker-all {
		color: var(--tz-white);
		border-left: 0;
		border-bottom: 1px solid transparent;
	}

	.tz-hero__ticker-all:hover {
		border-bottom-color: var(--tz-white);
	}
}

/* ---- catch: キャッチコピー帯（実測: 39px/600 白・中央・lh1.6） ---- */
.tz-section--catch {
	text-align: center;
}

.tz-catch__heading {
	font-size: var(--tz-fs-catch);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.6;
}

.tz-catch__body {
	margin-top: 1.6em;
	font-size: 1rem;
	line-height: 2.4;
}

/* ---- items: 見出し・本文・画像グリッド（mission / process / features / background 共用） ---- */
.tz-items {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 48px);
	counter-reset: tz-item;
}

.tz-items__image {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--tz-placeholder);
}

.tz-items__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tz-items__heading {
	margin-top: 1em;
	font-size: var(--tz-fs-item);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	text-align: left;
}

.tz-items__text {
	margin-top: 0.6em;
	font-size: 0.9375rem;
	line-height: 2;
	text-align: left;
}

/* mission は日本語中見出し（実測: 28px/600 グレー） */
.tz-items--mission .tz-items__heading {
	font-size: var(--tz-fs-ja-mid);
	color: var(--tz-gray);
}

.tz-bg--dark .tz-items__heading,
.tz-bg--dark .tz-items__text {
	color: var(--tz-white);
}

@media (min-width: 768px) {
	.tz-items--mission,
	.tz-items--features,
	.tz-items--background {
		grid-template-columns: repeat(2, 1fr);
	}

	.tz-items--process {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.tz-items--process {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* process はステップ番号付き（小さくグレーで） */
.tz-items--process .tz-items__item {
	counter-increment: tz-item;
}

.tz-items--process .tz-items__heading::before {
	content: counter(tz-item, decimal-leading-zero) ".";
	display: block;
	margin-bottom: 0.2em;
	font-family: var(--tz-font-en-display);
	font-size: 1.125rem;
	color: var(--tz-gray);
	line-height: 1;
}

/* ---- recycle: 買取CTA（実測: ダーク帯に Cormorant 103px 白の大見出し） ---- */
.tz-section--recycle {
	text-align: center;
}

/* 既定でダーク帯（管理画面で背景を明示的に変えた場合はそちらが優先） */
.tz-section--recycle.tz-bg--default {
	background: var(--tz-dark);
	color: var(--tz-white);
}

.tz-section--recycle .tz-heading__en {
	font-size: var(--tz-fs-en-display);
	font-weight: 600;
	color: var(--tz-white);
}

.tz-section--recycle .tz-heading__ja {
	color: rgba(255, 255, 255, 0.85);
}

.tz-recycle__body {
	max-width: var(--tz-container-narrow);
	margin-inline: auto;
	font-size: 0.9375rem;
	line-height: 2.2;
}

.tz-recycle__cta {
	margin-top: clamp(28px, 4vw, 40px);
}

/* ---- pagelink: ABOUT US / PRODUCT リンク帯（実測: Abhaya 50px 黒 + 下線リンク） ---- */
.tz-section--pagelink {
	text-align: center;
}

.tz-pagelink__heading {
	font-family: var(--tz-font-en);
	font-size: var(--tz-fs-en-solid);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
}

.tz-pagelink__cta {
	margin-top: clamp(24px, 4vw, 40px);
}

.tz-bg--dark .tz-btn--underline {
	color: var(--tz-white);
	border-color: var(--tz-white);
}

/* ---- designer: 作家紹介 ---- */
.tz-designer {
	display: grid;
	gap: clamp(40px, 6vw, 72px);
}

.tz-designer__member {
	display: grid;
	gap: 24px;
}

.tz-designer__photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--tz-placeholder);
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}

.tz-designer__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tz-designer__title {
	font-family: var(--tz-font-en-display);
	font-size: 1rem;
	letter-spacing: 0.16em;
	color: var(--tz-gray);
}

.tz-designer__name {
	margin-top: 0.2em;
	font-size: var(--tz-fs-ja-mid);
	font-weight: 600;
	letter-spacing: 0.1em;
}

.tz-designer__profile {
	margin-top: 1em;
	font-size: 0.9375rem;
}

@media (min-width: 768px) {
	.tz-designer__member {
		grid-template-columns: 2fr 3fr;
		align-items: center;
		gap: clamp(32px, 5vw, 64px);
	}

	.tz-designer__member:nth-child(even) .tz-designer__photo {
		order: 2;
	}
}

/* ---- catbanner: 商品カテゴリー導線（フルブリード画像帯 + 白文字センター） ---- */
.tz-catbanners {
	display: grid;
}

.tz-catbanner {
	position: relative;
	display: grid;
	place-content: center;
	min-height: clamp(300px, 42vw, 480px);
	text-align: center;
	color: var(--tz-white);
	overflow: hidden;
	isolation: isolate;
}

.tz-catbanner__image {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tz-dark);
}

.tz-catbanner__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.tz-catbanner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tz-catbanner:hover .tz-catbanner__image img {
	transform: scale(1.04);
}

.tz-catbanner__body {
	padding: 32px var(--tz-gutter);
	max-width: 640px;
}

.tz-catbanner__title {
	font-family: var(--tz-font-en);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.3;
}

.tz-catbanner__text {
	margin-top: 0.8em;
	font-size: 0.875rem;
	line-height: 2;
}

.tz-catbanner__more {
	display: inline-block;
	margin-top: 1.4em;
	padding: 0.5em 2em;
	border: 1px solid var(--tz-white);
	border-radius: 30px;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	transition: background-color 0.3s, color 0.3s;
}

.tz-catbanner:hover .tz-catbanner__more {
	background: var(--tz-white);
	color: var(--tz-ink);
}

/* ---- order: 空間ディスプレイ（実測: 39px/600 黒 中央） ---- */
.tz-section--order {
	text-align: center;
}

.tz-section--order .tz-heading__en {
	font-family: var(--tz-font-en);
	font-size: var(--tz-fs-catch);
	color: var(--tz-ink);
}

.tz-bg--dark.tz-section--order .tz-heading__en {
	color: var(--tz-white);
}

.tz-order__body {
	max-width: var(--tz-container-narrow);
	margin-inline: auto;
}

.tz-order__cta {
	margin-top: clamp(28px, 4vw, 40px);
}

/* ---- flow: 流れ（番号付きステップ） ---- */
.tz-flow {
	display: grid;
	max-width: var(--tz-container-narrow);
	margin-inline: auto;
	counter-reset: tz-flow;
}

.tz-flow__step {
	counter-increment: tz-flow;
	position: relative;
	padding: 1.4em 0 1.4em 72px;
	border-bottom: 1px solid var(--tz-line);
}

.tz-flow__step:first-child {
	border-top: 1px solid var(--tz-line);
}

.tz-flow__step::before {
	content: counter(tz-flow, decimal-leading-zero);
	position: absolute;
	left: 8px;
	top: 1.35em;
	font-family: var(--tz-font-en-display);
	font-size: 1.375rem;
	color: var(--tz-gray);
	line-height: 1.4;
}

.tz-flow__heading {
	font-size: var(--tz-fs-item);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.tz-flow__text {
	margin-top: 0.4em;
	font-size: 0.9375rem;
}

.tz-bg--dark .tz-flow__step {
	border-color: #3a3a3a;
}

/* ---- exhibition: 展示実績（実測: 34px 黒 Abhaya 中央・白帯） ---- */
.tz-section--exhibition .tz-heading__en {
	font-family: var(--tz-font-en);
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
	color: var(--tz-ink);
}

.tz-exhibition {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(12px, 2vw, 24px);
}

.tz-exhibition__item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tz-placeholder);
}

.tz-exhibition__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.tz-exhibition {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- pastworks: 過去の作品ギャラリー ---- */
.tz-pastworks__body {
	max-width: var(--tz-container-narrow);
	margin-inline: auto;
	margin-bottom: clamp(28px, 4vw, 44px);
	font-size: 0.9375rem;
	line-height: 2.2;
	text-align: center;
}

/* 販売リンクを持たないため <figure>。カード共通の見た目に揃える */
.tz-card--pastwork {
	background: var(--tz-white);
}

/* ---- freehtml: 汎用 ---- */
.tz-freehtml__image {
	margin-bottom: clamp(24px, 4vw, 40px);
}

/* ---- galleryspots: ギャラリー拠点（写真 + テキストを左右交互 / docs/07 §6） ---- */
.tz-spots {
	display: grid;
	gap: clamp(48px, 8vw, 96px);
}

.tz-spot {
	display: grid;
	gap: clamp(20px, 4vw, 32px);
}

/* 支給写真の比率がまちまち（現素材は正方形）なので切り抜かず原寸比で出す。
   写真が未設定のときだけプレースホルダーに 4:3 の枠を与える */
.tz-spot__image img {
	width: 100%;
}

.tz-spot__noimage {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--tz-placeholder);
}

.tz-spot__label {
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	color: var(--tz-gray);
}

.tz-spot__name {
	margin-top: 0.2em;
	font-size: var(--tz-fs-ja-mid);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.tz-spot__text {
	margin-top: 0.9em;
	font-size: 0.9375rem;
	line-height: 2;
}

.tz-spot__cta {
	margin-top: 1.2em;
}

@media (min-width: 768px) {
	.tz-spot {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: clamp(32px, 5vw, 64px);
	}

	/* 偶数番目は写真を右へ（ワイヤーの左右交互。designer パーツと同じ手法） */
	.tz-spot:nth-child(even) .tz-spot__image {
		order: 2;
	}
}

/* ---- 区切り帯（ワイヤーの濃い横帯） ---- */
.tz-band-divider {
	height: clamp(40px, 7vw, 88px);
	background: var(--tz-dark);
}

/* ---- exhibitionphotos: その他展示実績（写真 + 国名キャプション） ---- */
.tz-exphotos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px);
}

/* 多数のサムネイルを並べる箇所なので、こちらは比率を揃えて切り抜く */
.tz-exphotos__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tz-placeholder);
}

.tz-exphotos__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tz-exphotos__noimage {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--tz-placeholder);
}

.tz-exphotos__label {
	margin-top: 0.7em;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-align: center;
}

.tz-exphotos__note {
	font-size: 0.8125rem;
	color: var(--tz-gray);
	text-align: center;
}

@media (min-width: 768px) {
	.tz-exphotos {
		grid-template-columns: repeat(3, 1fr); /* ワイヤーどおり3列 */
	}
}

/* ---- concept: コンセプト（英字リード + キャッチ + 本文 + メイン写真 / docs/08） ---- */
/* ページ見出し「Concept」は prelude-generic.php の h1 が出すので、
   ここの英字見出しはその直下に来る。h1 と競合しないよう一段小さめに置く */
.tz-section--concept .tz-heading {
	margin-bottom: clamp(24px, 4vw, 40px);
}

.tz-section--concept .tz-heading__en {
	font-size: var(--tz-fs-en-h2);
	letter-spacing: 0.08em;
}

.tz-concept__lead {
	max-width: var(--tz-container-narrow);
	margin-inline: auto;
}

/* サイト共通のキャッチ token（最大39px）だと23文字がPC幅でも1行に収まらず
   「現代の / ラグジュアリーへ」と中途半端に折れる。上限は
   「23文字 x 字送り1.06em <= リード幅760px」から逆算した30pxに抑え、
   PC・タブレットは1行、SPだけ読点で2行に折れるようにする（CLAUDE.md 日本語の改行品質） */
.tz-concept__catch {
	font-size: clamp(1.25rem, 0.95rem + 1.5vw, 1.875rem);
	line-height: 1.8;
	letter-spacing: 0.06em;
	text-align: center;
}

/* 本文は左揃え。原本 about-us「Story」も左揃えで、
   7行の文を中央揃えにすると行頭が揃わず日本語が読みにくくなる */
.tz-concept__body {
	margin-top: clamp(20px, 3.5vw, 32px);
	font-size: 0.9375rem;
	line-height: 2.4;
}

.tz-concept__visual {
	margin-top: clamp(40px, 7vw, 80px);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--tz-placeholder);
}

.tz-concept__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- scatterphotos: 散らし写真（大きさ・高さをずらした3枚 / docs/08） ---- */
/* concept の直後に置くときは1つの構図として続けたいので、
   セクション余白の二重取り（下110px + 上110px）をやめる */
.tz-section--concept + .tz-section--scatterphotos {
	padding-top: 0;
}

.tz-scatter {
	display: grid;
	gap: clamp(20px, 4vw, 32px);
}

/* SPは1カラムに畳む（3列のままだと1枚あたり約100pxで写真が判別できない）。
   左右の寄せを交互にしてワイヤーの「散らし」の印象だけ残す */
.tz-scatter__item {
	width: 85%;
}

.tz-scatter__item--2 {
	margin-left: auto;
}

.tz-scatter__image {
	overflow: hidden;
	background: var(--tz-placeholder);
}

.tz-scatter__image img,
.tz-scatter__noimage {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 枠ごとに縦横比を変える（ワイヤーの 小・中・縦長）。
   管理画面から縦横比の違う写真を入れても崩れないよう cover で受ける */
.tz-scatter__item--1 .tz-scatter__image {
	aspect-ratio: 1 / 1;
}

.tz-scatter__item--2 .tz-scatter__image {
	aspect-ratio: 3 / 2;
}

.tz-scatter__item--3 .tz-scatter__image {
	aspect-ratio: 4 / 5;
}

.tz-scatter__caption {
	margin-top: 0.7em;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--tz-gray);
}

@media (min-width: 768px) {
	.tz-scatter {
		grid-template-columns: 0.9fr 1.15fr 0.95fr;
		align-items: start;
		gap: clamp(24px, 4vw, 48px);
	}

	.tz-scatter__item {
		width: auto;
		margin: 0;
	}

	/* ワイヤーどおり左から段々下がる配置。縦横比の差と合わせて段違いにする */
	.tz-scatter__item--2 {
		margin-top: clamp(32px, 5vw, 72px);
	}

	.tz-scatter__item--3 {
		margin-top: clamp(64px, 10vw, 144px);
	}
}