@charset "UTF-8";
/* LOOK 特集（2026-10-27〜）の共通部分。tools/build.py が特集ごとの CSS（tools/css/<theme>.css）とつなげて style.css にする
   位置と大きさは body.html の style 属性（PSD から。PC は幅 1920、SP は幅 640 のデザインに対する %）
   --x/--w/--a/--g が PC、--mx/--mw/--ma/--mg が SP。767px 以下を SP とする */

.lk {
	--bg: #fff;
	--ink: #222;
	max-width: 1920px;
	margin: 0 auto;
	background: var(--bg);
	color: var(--ink);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 15px;
	letter-spacing: .04em;
	line-height: 2;
	text-align: center;
	overflow: hidden;
	padding-bottom: 120px;
}
.lk *,
.lk *::before,
.lk *::after { box-sizing: border-box; }
.lk img { display: block; max-width: 100%; height: auto; }
.lk picture { display: block; }
.lk a { color: inherit; text-decoration: none; }
.lk p,
.lk ul,
.lk h2 { margin: 0; padding: 0; }
.lk ul { list-style: none; }
.lk .lk-sp { display: none; }

/* PSD のパーツ */
.lk .lk-s {
	margin: var(--g) 0 0 var(--x);
	width: var(--w);
}
.lk .lk-in {
	position: relative;
	display: block;
	aspect-ratio: var(--a);
}
.lk .lk-in img { width: 100%; }
.lk .lk-o {
	position: absolute;
	left: var(--ox);
	top: var(--oy);
	width: var(--ow);
}
.lk .lk-o img { width: 100%; }
.lk .lk-o-sp { display: none; }
.lk .lk-nopc { display: none; }
.lk .lk-sponly { display: none; }

/* 横に並ぶパーツ（ボタンなど）。--ml は左隣との間 */
.lk .lk-row {
	display: flex;
	align-items: flex-start;
	margin-top: var(--g);
}
.lk .lk-ri {
	display: block;
	flex: none;
	margin-left: var(--ml);
	width: var(--w);
}
.lk .lk-ri img { width: 100%; }

/* 商品クレジット（画像の下の文字） */
.lk .lk-s .lk-cr { display: block; width: fit-content; margin-left: var(--cx, 0); }

/* 横に流れる写真 */
.lk .lk-mq {
	--gap: calc(20 / 1920 * min(100vw, 1920px));
	margin-top: var(--g);
	aspect-ratio: var(--a);
	overflow: hidden;
}
.lk .lk-mq-track {
	display: flex;
	gap: var(--gap);
	width: max-content;
	height: 100%;
}
.lk .lk-mq picture,
.lk .lk-mq img { height: 100%; width: auto; max-width: none; }

/* 文章 */
.lk .lk-t { margin: 80px auto 0; padding: 0 16px; max-width: 1100px; }
.lk .lk-t p + p { margin-top: 1.6em; }
.lk .lk-credit { font-size: 13px; line-height: 2.2; }
.lk .lk-buy { margin: 28px auto 0; padding: 0 16px; font-size: 13px; line-height: 1; }
.lk .lk-buy li + li { margin-top: 12px; }
.lk .lk-buy a { display: inline-flex; align-items: center; gap: 1.2em; flex-wrap: wrap; justify-content: center; }
.lk .lk-buy b { display: inline-block; padding: 5px 16px; background: #000; color: #fff; font-weight: 500; letter-spacing: .1em; }

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

/* SP */
@media (max-width: 767px) {
	.lk { font-size: max(13px, 3.4vw); padding-bottom: 80px; word-break: auto-phrase; text-wrap: pretty; }
	.lk .lk-pc { display: none; }
	.lk .lk-sp { display: inline; }
	.lk .lk-s { margin: var(--mg) 0 0 var(--mx); width: var(--mw); }
	.lk .lk-in { aspect-ratio: var(--ma); }
	.lk .lk-o-pc { display: none; }
	.lk .lk-o-sp { display: block; }
	.lk .lk-nopc { display: block; }
	.lk .lk-nosp { display: none; }
	.lk .lk-sponly { display: block; }
	.lk .lk-row { margin-top: var(--mg); }
	.lk .lk-ri { margin-left: var(--mml); width: var(--mw); }
	.lk .lk-s .lk-cr { margin-left: var(--mcx, 0); }
	.lk .lk-mq { --gap: calc(20 / 640 * 100vw); margin-top: var(--mg); aspect-ratio: var(--ma); }
	.lk .lk-t { margin-top: 48px; padding: 0 20px; }
	.lk .lk-buy { margin-top: 16px; font-size: 12px; }
	.lk .lk-buy li + li { margin-top: 10px; }
}

/* 動きの共通部分（特集ごとの動きは各 CSS）。JS が動かないときと「視差効果を減らす」設定では最初から表示 */
@media (prefers-reduced-motion: no-preference) {
	.lk-js .lk-mq-track { animation: lk-mq var(--dur) linear infinite; animation-play-state: paused; }
	.lk-js .lk-mq.is-on .lk-mq-track { animation-play-state: running; }
	@media (max-width: 767px) {
		.lk-js .lk-mq-track { animation-duration: var(--mdur); }
	}
}
@keyframes lk-mq {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* ---- JUMELLE × Casselini（ディレクター 2 人の子育ての思い）: 落ち着いた、やさしい動き ---- */
.lk-jumelle { --ink: #2b3442; }
.lk-jumelle .lk-h { font-size: 20px; font-weight: 700; letter-spacing: .08em; margin-bottom: 20px; }
.lk-jumelle .lk-voice { font-size: 14px; }
.lk-jumelle .lk-items { margin-top: 40px; font-size: 13px; line-height: 1.4; }
.lk-jumelle .lk-items li + li { margin-top: 14px; }
.lk-jumelle .lk-items a { display: inline-flex; align-items: center; gap: 1.2em; flex-wrap: wrap; justify-content: center; }
/* 商品クレジット: 商品名・価格・CHECK（写真の下は 1 行、商品ボタンは 3 行） */
.lk-jumelle { --check: #3a6284; }
.lk-jumelle .lk-cr { font-size: 12px; line-height: 1.6; letter-spacing: .03em; text-align: left; }
.lk-jumelle .lk-cr > span + span { margin-left: 1.2em; }
.lk-jumelle .lk-cr b,
.lk-jumelle .lk-items b { display: inline-block; margin-left: 1.6em; padding: 2px 12px; background: var(--check); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .12em; line-height: 1.6; }
.lk-jumelle .lk-ri .lk-cr { display: block; margin-top: 10px; text-align: center; }
.lk-jumelle .lk-ri .lk-cr > span { display: block; margin: 0; }
.lk-jumelle .lk-ri .lk-cr b { margin: 6px 0 0; }
.lk-jumelle .lk-items b { padding: 4px 14px; margin-left: 0; }
.lk-jumelle .lk-credit { margin-top: 100px; }
.lk-jumelle .lk-all { margin-top: 80px; }
.lk-jumelle .lk-all a { display: inline-block; border: 2px solid currentColor; padding: 12px 30px; font-size: 18px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; transition: background-color .3s, color .3s; }
@media (hover: hover) {
	.lk-jumelle .lk-all a:hover { background: var(--ink); color: #fff; }
}
@media (max-width: 767px) {
	.lk-jumelle .lk-h { font-size: 18px; margin-bottom: 12px; }
	.lk-jumelle .lk-voice { font-size: 13px; text-align: left; }
	.lk-jumelle .lk-voice .lk-h { text-align: center; }
	.lk-jumelle .lk-items { margin-top: 24px; font-size: 12px; }
	/* 下の商品一覧: 1 行目にブランド名＋商品名、2 行目に価格と CHECK */
	.lk-jumelle .lk-items li + li { margin-top: 20px; }
	.lk-jumelle .lk-items a { row-gap: 6px; column-gap: 1em; }
	.lk-jumelle .lk-items .lk-cr-name { flex-basis: 100%; }
	.lk-jumelle .lk-ri .lk-brand { display: none; }
	.lk-jumelle .lk-cr { font-size: 11px; }
	.lk-jumelle .lk-cr > span + span { margin-left: .8em; }
	.lk-jumelle .lk-cr b { margin-left: 1em; padding: 1px 8px; font-size: 10px; }
	.lk-jumelle .lk-s .lk-cr { margin: 6px auto 0; text-align: center; }
	.lk-jumelle .lk-cr-name,
	.lk-jumelle .lk-cr-price { white-space: nowrap; }
	.lk-jumelle .lk-ri .lk-cr-price { white-space: normal; }
	.lk-jumelle .lk-ri .lk-cr { margin-top: 6px; font-size: 10px; line-height: 1.5; letter-spacing: 0; }
	.lk-jumelle .lk-ri .lk-cr b { margin: 4px 0 0; }
	.lk-jumelle .lk-credit { margin-top: 64px; }
	.lk-jumelle .lk-all { margin-top: 48px; }
	.lk-jumelle .lk-all a { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
	/* メイン画像: 読み込み後に、ゆっくり引きながらフェードイン（opacity を 0 にしないのは LCP の計測を遅らせないため） */
	.lk-js .lk-hero .lk-in { overflow: hidden; }
	.lk-js .lk-hero picture img { opacity: .01; transform: scale(1.04); }
	.lk-js .lk-hero.is-in picture img { animation: lk-j-hero 2.4s cubic-bezier(.25, .8, .3, 1) both; }
	/* ロゴ（JUMELLE / Casselini）: 写真のあとに、ゆっくり浮かぶ */
	.lk-js .lk-hero .lk-o { opacity: 0; transform: translateY(10px); }
	.lk-js .lk-hero.is-in .lk-o { opacity: 1; transform: none; transition: opacity 1.4s ease-out 1s, transform 1.6s cubic-bezier(.22, 1, .36, 1) 1s; }

	/* 写真・文章: 下からゆっくりふわっと */
	.lk-js :is(.lk-s:not(.lk-hero), .lk-t) {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 1.4s ease-out, transform 1.4s cubic-bezier(.22, 1, .36, 1);
	}
	.lk-js :is(.lk-s, .lk-t).is-in { opacity: 1; transform: none; }
	.lk-js .lk-voice p { opacity: 0; transition: opacity 1.4s ease-out; }
	.lk-js .lk-voice.is-in p { opacity: 1; }
	.lk-js .lk-voice.is-in p:nth-of-type(2) { transition-delay: .3s; }
	.lk-js .lk-voice.is-in p:nth-of-type(3) { transition-delay: .6s; }

	/* 商品ボタン: 左から順に */
	.lk-js .lk-row .lk-ri {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 1s ease-out, transform 1s cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(var(--i) * .18s);
	}
	.lk-js .lk-row.is-in .lk-ri { opacity: 1; transform: none; }

	/* 写真を組んだ段（1.jpg・DETAIL）: 写真を 1 枚ずつ、そのあと注釈を上から 1 つずつ */
	.lk-js .lk-split:not(.lk-hero) .lk-oi {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 1.1s ease-out, transform 1.2s cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(.2s + var(--k) * .18s);
	}
	.lk-js .lk-split .lk-ot {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity .8s ease-out, transform .8s ease-out;
		transition-delay: calc(.9s + var(--k) * .12s);
	}
	.lk-js .lk-split.is-in .lk-o { opacity: 1; transform: none; }

	/* 触れると、ほんの少し明るく */
	@media (hover: hover) {
		.lk-jumelle .lk-cr b { transition: opacity .3s; }
		.lk-jumelle .lk-cr:hover b,
		.lk-jumelle .lk-ri:hover .lk-cr b { opacity: .75; }
		.lk-jumelle a.lk-in img,
		.lk-jumelle .lk-ri img { transition: filter .5s; }
		.lk-jumelle a.lk-in:hover img,
		.lk-jumelle .lk-ri:hover img { filter: brightness(1.07); }
	}
}
@keyframes lk-j-hero {
	from { opacity: .01; transform: scale(1.04); }
	to { opacity: 1; transform: scale(1); }
}