/* ==========================================================================
   足立姫フェス2026｜PAGE 03 CRAFT（工芸・グッズ・お店）
   --------------------------------------------------------------------------
   共通（ヘッダー / フッター / ボタン）は style.css、サブページ共通部品（見出し・本文・背景・
   プレースホルダー・カード）は story.css を使用。
   Figma「PAGE 03｜CRAFT」はヘッダーとフッターのみデザイン済みのため、本文はワイヤーフレーム
   「craft-wf」の原稿と構成を、EVENT / STORY のデザインルールで組んでいる。
   ========================================================================== */

/* ---------- CRAFT & GOODS（冒頭） ---------- */
.chero {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
	background: linear-gradient(180deg, #c4fafc 0%, rgba(196, 250, 252, 0.55) 55%, rgba(255, 255, 255, 0) 100%);
}

.chero__ripple { top: calc(40 * var(--u)); }

.chero__sakura { z-index: 1; }
.chero__sakura--left { left: calc(15 * var(--u)); top: calc(560 * var(--u)); width: calc(189 * var(--u)); height: calc(249 * var(--u)); }
.chero__sakura--left img { left: -241.02%; top: -179.99%; width: 705.46%; height: 401.6%; }
.chero__sakura--right { left: calc(590 * var(--u)); top: calc(300 * var(--u)); width: calc(125 * var(--u)); height: calc(165 * var(--u)); }
.chero__sakura--right img { left: -491.01%; top: -251.51%; width: 771.43%; height: 439.16%; }

.chero__body { line-height: calc(50 * var(--u)); }

.chero__gallery {
	display: grid;
	grid-template-columns: repeat(2, calc(325 * var(--u)));
	gap: calc(20 * var(--u));
	margin-top: calc(50 * var(--u));
}

/* 大きい写真（扇子）: 枠の下にコピーライト（イラストに掛けない） */
.chero__main {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
}

.chero__main-img {
	height: calc(500 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.08);
}

.chero__credit { margin-top: calc(8 * var(--u)); }

.chero__sub {
	height: calc(325 * var(--u));
	background: #fff;
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.08);
}

/* 購入・鑑賞の方法 */
.ways { margin-top: calc(60 * var(--u)); }

.ways__list {
	display: flex;
	flex-direction: column;
	gap: calc(14 * var(--u));
}

.ways__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(110 * var(--u));
	padding: 0 calc(90 * var(--u)) 0 calc(50 * var(--u));
	border: calc(1 * var(--u)) solid var(--c-navy);
	border-radius: calc(55 * var(--u));
	background: #f5ffff;
	color: var(--c-navy);
	white-space: nowrap;
}

.ways__main {
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(26 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
}

.ways__sub {
	margin-top: calc(2 * var(--u));
	font-size: calc(20 * var(--u));
	line-height: calc(30 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-gray);
	font-feature-settings: "halt" 1;
}

.ways__arrow {
	position: absolute;
	right: calc(40 * var(--u));
	top: 50%;
	width: calc(8 * var(--u));
	height: calc(17 * var(--u));
	transform: translateY(-50%);
}

/* ---------- WORKS ---------- */
.works {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
	background: #fff;
}

.works__list {
	display: flex;
	flex-direction: column;
	gap: calc(30 * var(--u));
	margin-top: calc(50 * var(--u));
}

.work-card {
	padding: calc(40 * var(--u));
	background: #fff;
	border: calc(1 * var(--u)) solid var(--c-line);
	border-radius: calc(30 * var(--u));
	box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(54, 86, 157, 0.06);
}

.work-card__img {
	width: 100%;
	height: calc(440 * var(--u));
}

.work-card__maker {
	margin-top: calc(30 * var(--u));
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(22 * var(--u));
	line-height: calc(33 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-accent);
}

.work-card__name {
	margin-top: calc(10 * var(--u));
	font-weight: 500;
	font-size: calc(28 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

.work-card__desc {
	margin-top: calc(10 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.work-card__sale {
	margin-top: calc(20 * var(--u));
	padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(11 * var(--u));
	background: var(--c-mint);
	font-weight: 500;
	font-size: calc(22 * var(--u));
	line-height: calc(30 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: #fff;
	font-feature-settings: "halt" 1;
}

.work-card__link {
	display: inline-block;
	margin-top: calc(20 * var(--u));
	padding-bottom: calc(4 * var(--u));
	border-bottom: calc(1 * var(--u)) solid var(--c-navy);
	font-family: var(--f-gothic);
	font-weight: 700;
	font-size: calc(24 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-navy);
}

.works__more {
	position: relative;
	display: block;
	margin-top: calc(30 * var(--u));
	padding: calc(30 * var(--u)) calc(80 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
	background: #fff8fc;
	border: calc(1 * var(--u)) solid #f8cad4;
	border-radius: calc(10 * var(--u));
	color: var(--c-navy);
}

.works__more-title {
	display: block;
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	font-feature-settings: "halt" 1;
}

.works__more-text {
	display: block;
	margin-top: calc(4 * var(--u));
	font-size: calc(22 * var(--u));
	line-height: calc(36 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.works__more-arrow {
	position: absolute;
	right: calc(30 * var(--u));
	top: 50%;
	width: calc(17 * var(--u));
	height: calc(8 * var(--u));
	transform: translateY(-50%);
}

/* ---------- MAKERS ---------- */
.makers {
	padding-top: calc(100 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

.makers__list {
	margin-top: calc(50 * var(--u));
	padding: calc(10 * var(--u)) calc(40 * var(--u));
	background: #fff;
	border-radius: calc(30 * var(--u));
}

.maker {
	display: flex;
	align-items: center;
	gap: calc(30 * var(--u));
	padding: calc(30 * var(--u)) 0;
	border-bottom: calc(1 * var(--u)) solid var(--c-line);
}

.maker:last-child { border-bottom: 0; }

.maker__photo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(140 * var(--u));
	height: calc(140 * var(--u));
	border-radius: 50%;
	background: linear-gradient(160deg, #eaf8f9 0%, #fbeef5 100%);
}

.maker__photo .placeholder-note { font-size: calc(10 * var(--u)); line-height: calc(16 * var(--u)); }

/* 作り手の作品写真（2026-11-12 支給）: 白い丸に収める（白地の写真と透過の切り抜きを同じ見え方に） */
.maker__photo:has(img) {
	overflow: hidden;
	border: calc(1 * var(--u)) solid var(--c-line);
	background: #fff;
}

.maker__photo img {
	display: block;
	width: 100%;
	height: 100%;
	padding: calc(14 * var(--u));
	object-fit: contain;
}

.maker__text { min-width: 0; }

.maker__craft {
	font-weight: 600;
	font-size: calc(22 * var(--u));
	line-height: calc(34 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-accent);
	font-feature-settings: "halt" 1;
}

.maker__name {
	margin-top: calc(4 * var(--u));
	font-weight: 500;
	font-size: calc(26 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

/* ---------- EXHIBITION ---------- */
.exhibition {
	padding-top: calc(100 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

.exhibit {
	margin-top: calc(40 * var(--u));
	padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
	background: #fff8fc;
	border: calc(1 * var(--u)) solid #f8cad4;
	border-radius: calc(10 * var(--u));
}

.exhibit__name {
	font-weight: 600;
	font-size: calc(26 * var(--u));
	line-height: calc(40 * var(--u));
	letter-spacing: calc(2.8 * var(--u));
	color: var(--c-navy);
	font-feature-settings: "halt" 1;
}

.exhibit__meta {
	margin-top: calc(14 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: calc(44 * var(--u));
	letter-spacing: calc(2 * var(--u));
	color: var(--c-text);
	font-feature-settings: "halt" 1;
}

.exhibit__meta div { display: flex; flex-wrap: wrap; }
.exhibit__meta dt { flex: none; color: var(--c-gray); }

.exhibit__date {
	font-family: var(--f-en);
	font-weight: 700;
	font-size: calc(26 * var(--u));
	color: var(--c-accent);
}

/* ---------- ONLINE SHOP ---------- */
.shop {
	padding-top: calc(96 * var(--u));
	padding-bottom: calc(124 * var(--u));
	background: #fff;
}

/* 取り扱い予定のグッズ（支給画像を 3 点横並び。ショップ公開後は商品リンク付きのカードに差し替える想定） */
.shop__goods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: calc(20 * var(--u));
	margin-top: calc(50 * var(--u));
	padding: 0;
	list-style: none;
}

.shop__item {
	height: calc(210 * var(--u));
	padding: calc(16 * var(--u));
	background: #fff;
	border: calc(1 * var(--u)) solid var(--c-line);
}

.btn__arrow--ext-lg {
	left: calc(486 * var(--u));
	top: calc(45 * var(--u));
	width: calc(20 * var(--u));
	height: calc(20 * var(--u));
}

/* ---------- LOCAL ---------- */
/* 2026-11-12 クライアント指示で一旦非表示（セクションと冒頭の「まちのお店で」）。復活するときはこのルールを消す（HTML 側は data-local のまま） */
[data-local] { display: none !important; }

.local {
	padding-top: calc(100 * var(--u));
	padding-bottom: calc(124 * var(--u));
}

/* 扇子の写真のコピーライト（写真の枠の外、右下） */
.work-card__credit { margin-top: calc(8 * var(--u)); }