@charset "UTF-8";
/* WEEKLY NEW ARRIVALS（2026-10-23）
   数値は PSD から。PC は幅 1920 のデザインの px、SP は幅 640 のデザインを vw に直したもの（px ÷ 640 × 100）。
   767px 以下を SP とする。商品写真の位置は body.html の style 属性（tools/layout.json から） */

.fwk {
	--bg: #f0eede;
	--ink: #4c123c;
	--accent: #a83d8b;
	background: var(--bg);
	color: var(--ink);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: .05em;
	line-height: 1.6;
	text-align: center;
	overflow: hidden;
	padding-bottom: 78px;
}
.fwk *,
.fwk *::before,
.fwk *::after { box-sizing: border-box; }
.fwk img { display: block; max-width: 100%; height: auto; }
.fwk a { color: inherit; text-decoration: none; }
.fwk p,
.fwk ul,
.fwk h2,
.fwk h3 { margin: 0; padding: 0; }
.fwk ul { list-style: none; }
.fwk .fwk-sp { display: none; }

/* メイン画像 */
.fwk .fwk-hero img { width: 100%; }

/* リード文 */
.fwk .fwk-lead { margin: 99px auto 0; padding: 0 16px; }
.fwk .fwk-lead p + p { margin-top: 1.6em; }

/* 見出し（LINE UP・ITEM 01〜06） */
.fwk .fwk-ttl img { height: 39px; width: auto; margin: 0 auto; }

/* 商品写真: PSD の配置どおりに置く箱 */
.fwk .fwk-figs {
	position: relative;
	display: block;
	width: min(calc(var(--w) * 1px), calc(100% - 32px));
	aspect-ratio: var(--a);
	margin: calc(39px + var(--over, 0) * 1px) auto 0;
}
.fwk .fwk-fig {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--fw);
}
.fwk .fwk-fig img { width: 100%; }
.fwk .fwk-new {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--fw);
}
.fwk a.fwk-fig,
.fwk a.fwk-figs { transition: opacity .2s; }
.fwk a.fwk-fig:hover,
.fwk a.fwk-figs:hover { opacity: .8; }

/* LINE UP */
.fwk .fwk-lineup { margin-top: 99px; }
.fwk .fwk-lineup .fwk-figs { margin-top: 38px; }

/* ITEM */
.fwk .fwk-item { margin-top: 138px; scroll-margin-top: 96px; }
.fwk .fwk-item + .fwk-item { margin-top: 119px; }
.fwk .fwk-name { margin-top: 44px; font-size: inherit; font-weight: 500; line-height: 1.5; }
.fwk .fwk-name a:hover { text-decoration: underline; }
.fwk .fwk-chips { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.fwk .fwk-chips li { width: 25px; height: 15px; border-radius: 2px; background: var(--c); }
.fwk .fwk-chips span {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.fwk .fwk-catch { margin-top: 39px; }
.fwk .fwk-points { margin-top: 1.6em; padding: 0 16px; }
.fwk .fwk-points li::before { content: "・"; }
.fwk .fwk-shop { display: inline-block; margin-top: 29px; transition: opacity .2s; }
.fwk .fwk-shop:hover { opacity: .7; }
.fwk .fwk-shop img { height: 24px; width: auto; }

/* 下のリンク */
.fwk .fwk-more,
.fwk .fwk-prev span { font-size: 17px; font-weight: 700; letter-spacing: .05em; }
.fwk .fwk-more { margin-top: 119px; }
.fwk .fwk-more a:hover,
.fwk .fwk-prev a:hover span { text-decoration: underline; }
.fwk .fwk-prev { margin-top: 79px; }
.fwk .fwk-prev a { display: inline-block; max-width: calc(100% - 32px); }
.fwk .fwk-prev img { width: 800px; }
.fwk .fwk-prev span { display: block; margin-top: 20px; }

html:has(.fwk) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html:has(.fwk) { scroll-behavior: auto; }
}

/* モーション（body.html 末尾の JS が .fwk に fwk-js、画面に入った要素に is-in を付ける）
   JS が動かないときと「視差効果を減らす」設定では、ここは効かず最初から表示される */
@media (prefers-reduced-motion: no-preference) {
	/* メイン画像: 読み込み後にふわっと（opacity を 0 にしないのは LCP の計測を遅らせないため） */
	.fwk-js .fwk-hero img { opacity: .01; }
	.fwk-js .fwk-hero.is-in img { animation: fwk-fade 1.4s ease-out both; }

	/* 文章・リンク: 下からふわっと */
	.fwk-js :is(.fwk-lead p, .fwk-name, .fwk-chips, .fwk-catch, .fwk-points, .fwk-shop, .fwk-more, .fwk-prev) {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 1s ease-out, transform 1s cubic-bezier(.22, 1, .36, 1);
	}
	.fwk-js :is(.fwk-lead p, .fwk-name, .fwk-chips, .fwk-catch, .fwk-points, .fwk-shop, .fwk-more, .fwk-prev).is-in {
		opacity: 1;
		transform: none;
	}

	/* 商品写真: 左上から順に 0.1 秒ずつずらして、ふわっと */
	.fwk-js .fwk-figs .fwk-fig {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .9s ease-out, transform .9s cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(var(--i, 0) * .1s);
	}
	.fwk-js .fwk-figs.is-in .fwk-fig { opacity: 1; transform: none; }

	/* NEW: 写真が出たあとに、ぽよんと弾む */
	.fwk-js .fwk-figs .fwk-new img { transform: scale(0); }
	.fwk-js .fwk-figs.is-in .fwk-new img {
		animation: fwk-pop .7s cubic-bezier(.34, 1.56, .64, 1) both;
		animation-delay: calc(var(--i, 0) * .1s + .6s);
	}

	/* 見出し: スタンプのように押されて、まっすぐ止まる */
	.fwk-js .fwk-ttl img { opacity: 0; }
	.fwk-js .fwk-ttl.is-in img { animation: fwk-stamp .6s cubic-bezier(.2, .9, .3, 1.2) both; }

	/* 触れると反応（マウスのある端末だけ） */
	@media (hover: hover) {
		.fwk .fwk-fig img,
		.fwk .fwk-shop img { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
		.fwk .fwk-fig:hover img { transform: rotate(-3deg) scale(1.06); }
		.fwk .fwk-shop:hover img { transform: rotate(-2deg) scale(1.08); }
	}
}
@keyframes fwk-fade {
	from { opacity: .01; }
	to { opacity: 1; }
}
@keyframes fwk-pop {
	0% { transform: scale(0); }
	60% { transform: scale(1.15); }
	80% { transform: scale(.95); }
	100% { transform: scale(1); }
}
@keyframes fwk-stamp {
	0% { opacity: 0; transform: scale(1.35) rotate(3deg); }
	60% { opacity: 1; transform: scale(.97) rotate(-2deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* SP */
@media (max-width: 767px) {
	.fwk { font-size: max(13px, 3.2vw); padding-bottom: 11.4vw; word-break: auto-phrase; text-wrap: pretty; }
	.fwk .fwk-sp { display: inline; }
	.fwk .fwk-pc { display: none; }
	.fwk .fwk-lead { margin-top: 6.25vw; padding: 0 4vw; font-size: max(13px, 3.4vw); line-height: 2; }
	.fwk .fwk-lead p + p { margin-top: 1.2em; }
	.fwk .fwk-ttl img { height: 8vw; }
	.fwk .fwk-figs {
		width: calc(var(--mw) / 640 * 100vw);
		aspect-ratio: var(--ma);
		margin-top: calc(6.1vw + var(--mover, 0) / 640 * 100vw);
	}
	.fwk .fwk-fig,
	.fwk .fwk-new { left: var(--mx); top: var(--my); width: var(--mfw); }
	.fwk .fwk-lineup { margin-top: 9.2vw; }
	.fwk .fwk-lineup .fwk-figs { margin-top: 4.5vw; }
	.fwk .fwk-item { margin-top: 13.9vw; }
	.fwk .fwk-item + .fwk-item { margin-top: 15.5vw; }
	.fwk .fwk-name { margin-top: 4.4vw; line-height: 1.7; }
	.fwk .fwk-chips { gap: .8vw; margin-top: 1.9vw; }
	.fwk .fwk-chips li { width: 4.4vw; height: 3vw; }
	.fwk .fwk-catch { margin-top: 4.5vw; padding: 0 3vw; line-height: 1.5; }
	.fwk .fwk-points { margin-top: 3vw; padding: 0 2vw; line-height: 1.75; }
	.fwk .fwk-shop { margin-top: 4.5vw; }
	.fwk .fwk-shop img { height: 5.2vw; }
	.fwk .fwk-more,
	.fwk .fwk-prev span { font-size: max(15px, 4.4vw); }
	.fwk .fwk-more { margin-top: 18.6vw; }
	.fwk .fwk-prev { margin-top: 12.3vw; }
	.fwk .fwk-prev a { max-width: 75vw; }
	.fwk .fwk-prev span { margin-top: 3.1vw; }
}