@charset "UTF-8";
/* umbro × Casselini NOW AVAILABLE（2026-10-30）。WEEKLY -13 の style.css と同じ作り（tools/build.py がそのまま out/ に写す）
   数値は PSD から。PC は幅 1920 のデザインの px、SP は幅 640 のデザインを vw に直したもの（px ÷ 640 × 100）。
   767px 以下を SP とする。写真とメイン画像の部品の位置は body.html の style 属性（tools/layout.json から） */

.una {
	--ink: #4d3228;
	--mint: #abf4eb;
	--pink: #fdc8db;
	background: #fff;
	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;
}
.una *,
.una *::before,
.una *::after { box-sizing: border-box; }
.una img { display: block; max-width: 100%; height: auto; }
.una a { color: inherit; text-decoration: none; }
.una p,
.una ul,
.una h2,
.una h3 { margin: 0; padding: 0; }
.una ul { list-style: none; }
.una .una-sp { display: none; }

/* メイン画像: 背景に部品を重ねる（PC 1920×904、SP 正方形） */
.una .una-hero { position: relative; aspect-ratio: 1920 / 904; overflow: hidden; }
.una .una-hero picture,
.una .una-hero picture img { width: 100%; height: 100%; }
.una .una-dot,
.una .una-hp { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.una .una-dot { height: var(--h); border-radius: 50%; background: var(--c); opacity: var(--o); }
.una .una-hp img { width: 100%; }
.una .una-h-sp { display: none; }

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

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

/* 写真: PSD の配置どおりに置く箱 */
.una .una-figs {
	position: relative;
	display: block;
	width: min(calc(var(--w) * 1px), calc(100% - 32px));
	aspect-ratio: var(--a);
	margin: 29px auto 0;
}
.una .una-fig { position: absolute; left: var(--x); top: var(--y); width: var(--fw); }
.una .una-fig img { width: 100%; }

/* LINE UP */
.una .una-lineup { margin-top: 89px; }

/* ITEM */
.una .una-item { margin-top: 80px; scroll-margin-top: 96px; }
.una .una-item + .una-item { margin-top: 99px; }
.una .una-name { margin-top: 30px; font-size: inherit; font-weight: 500; line-height: 1.5; }
.una .una-name a:hover { text-decoration: underline; }
.una .una-chips { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.una .una-chips li { width: 25px; height: 15px; border-radius: 2px; background: var(--c); overflow: hidden; }
.una .una-chips li img { width: 100%; height: 100%; object-fit: cover; }
.una .una-chips .una-chip-light { box-shadow: inset 0 0 0 1px #000; }   /* 白のチップは黒い枠（大きさは変えない） */
.una .una-catch { margin-top: 39px; }
.una .una-points { margin-top: 1.6em; padding: 0 16px; }
.una .una-points li::before { content: "・"; }
.una .una-desc { max-width: 900px; margin: 1.2em auto 0; padding: 0 16px; }   /* 箇条書きとの間を少し空ける（10/29） */
.una .una-shop { display: inline-block; margin-top: 24px; }
.una .una-shop img { height: 30px; width: auto; }

/* 横に流れる写真（ITEM 01・04）。高さは PSD の写真 1 枚の高さ */
.una .una-mq { margin-top: 60px; overflow: hidden; }
.una .una-mq + .una-name { margin-top: 50px; }
.una .una-mq-track { display: flex; width: max-content; }
.una .una-mq-track img,
.una .una-mq-track a,
.una .una-mq-copy { display: flex; flex: none; }
.una .una-mq-track img { height: calc(var(--ph) / 1920 * min(100vw, 1920px)); width: auto; max-width: none; }

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

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

/* SP */
@media (max-width: 767px) {
	.una { font-size: max(13px, 3.125vw); padding-bottom: 11.4vw; word-break: auto-phrase; text-wrap: pretty; }
	.una .una-sp { display: inline; }
	.una .una-pc { display: none; }
	.una .una-hero { aspect-ratio: 1; }
	.una .una-h-pc { display: none; }
	.una .una-h-sp { display: block; }
	.una .una-lead { margin-top: 6.4vw; padding: 0 4vw; line-height: 2; }
	.una .una-lead p + p { margin-top: 1.2em; }
	.una .una-ttl img { height: 9.1vw; }
	.una .una-figs {
		width: calc(var(--mw) / 640 * 100vw);
		aspect-ratio: var(--ma);
		margin-top: 4.5vw;
	}
	.una .una-fig { left: var(--mx); top: var(--my); width: var(--mfw); }
	#item06 .una-figs { width: calc(600 / 640 * 100vw); }   /* PSD の ITEM06 は幅 701 で画面からはみ出し右寄りに見える → ほかの ITEM と同じ幅 600 に（10/30 先方） */
	/* ITEM06 の上の商品 2 枚は、PSD だと右の余白が広い → 左右の余白を同じに（10/30 久原さん。下の写真はデザインのまま）。インラインの --mx より優先させるので !important */
	#item06 .una-fig:nth-child(1) { --mx: 6.95% !important; }
	#item06 .una-fig:nth-child(2) { --mx: 50.74% !important; }
	.una .una-lineup { margin-top: 8.6vw; }
	.una .una-item { margin-top: 10.6vw; }
	.una .una-item + .una-item { margin-top: 14.7vw; }
	.una .una-name { margin-top: 4.5vw; line-height: 1.7; }
	.una .una-chips { gap: .8vw; margin-top: 2.8vw; }
	.una .una-chips li { width: 4.8vw; height: 2.8vw; }
	.una .una-catch { margin-top: 4.5vw; padding: 0 3vw; line-height: 1.5; }
	.una .una-points { margin-top: 3vw; padding: 0 2vw; line-height: 1.75; }
	.una .una-desc { padding: 0 4vw; line-height: 1.75; }
	.una .una-shop { margin-top: 4.7vw; }
	.una .una-shop img { height: 6.6vw; }
	.una .una-mq { margin-top: 4.7vw; }
	.una .una-mq + .una-name { margin-top: 4.7vw; }
	.una .una-mq-track img { height: calc(var(--mph) / 640 * 100vw); }
	.una .una-more,
	.una .una-prev span { font-size: max(15px, 4.7vw); }
	.una .una-more { margin-top: 15.5vw; }
	.una .una-prev { margin-top: 15.5vw; }
	.una .una-prev a { max-width: 75vw; }
	.una .una-prev span { margin-top: 3.1vw; }
}

/* モーション（body.html 末尾の JS が .una に una-js、画面に入った要素に is-in を付ける）
   JS が動かないときと「視差効果を減らす」設定では、ここは効かず最初から表示される。横に流れる写真も止まったまま
   コンセプト: umbro のスポーティーさ（切れ味のある動き）と、メイン画像のピンクの丸（ぽんぽんと弾む） */
@media (prefers-reduced-motion: no-preference) {
	/* メイン画像は動かさない（10/30 先方: PC・SP ともバナーの動きなし） */

	/* 見出し: 左からワイプ（スコアボードのように、きびきび） */
	.una-js .una-ttl img { clip-path: inset(0 100% 0 0); }
	.una-js .una-ttl.is-in img { clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.77, 0, .18, 1); }

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

	/* 写真: 1 枚ずつ、画面に入ったら下から上へワイプ（中の写真は少し縮みながら）。同じ段は左から少しずつずらす */
	/* （隠すのは中の画像。写真の箱ごと clip-path で隠すと、画面に入ったかの判定が遅れる） */
	.una-js .una-figs .una-fig img {
		clip-path: inset(100% 0 0 0);
		transform: scale(1.08);
		transition: clip-path .9s cubic-bezier(.77, 0, .18, 1), transform 1.4s cubic-bezier(.22, 1, .36, 1);
		transition-delay: calc(var(--d) * .12s);
	}
	.una-js .una-figs .una-fig.is-in img { clip-path: inset(0 0 0 0); transform: none; }
	/* LINE UP の切り抜きは、ぽんと弾む */
	.una-js .una-lineup .una-fig img { clip-path: none; }
	.una-js .una-lineup .una-fig img { transform: scale(0); transition: transform .6s cubic-bezier(.34, 1.7, .64, 1); transition-delay: calc(var(--d) * .08s); }
	.una-js .una-lineup .una-fig.is-in img { transform: none; }

	/* 横に流れる写真: ゆっくり（CITEN と同じくらい。1 枚あたり 6 秒）。画面にある間だけ動く */
	.una-js .una-mq-track { animation: una-mq calc(var(--n) * 6s) linear infinite; animation-play-state: paused; }
	.una-js .una-mq.is-on .una-mq-track { animation-play-state: running; }
	@media (hover: hover) { .una-js .una-mq.is-on:hover .una-mq-track { animation-play-state: paused; } }   /* マウスを乗せたら止めて押しやすく */
	.una-js .una-mq { opacity: 0; transition: opacity 1s ease-out; }
	.una-js .una-mq.is-in { opacity: 1; }

	/* 触れると反応（マウスのある端末だけ） */
	@media (hover: hover) {
		/* 拡大は写真の外枠に掛ける（中の画像に掛けると、上のワイプの動きの指定を上書きしてしまう） */
		.una .una-fig,
		.una .una-shop img { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
		.una .una-fig.is-in:hover,
		.una a.una-figs:hover .una-fig.is-in { transform: scale(1.03); }
		.una .una-lineup .una-fig.is-in:hover { transform: rotate(-4deg) scale(1.08); }
		.una .una-shop:hover img { transform: translateX(6px); }
	}
}
@keyframes una-mq {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}