@charset "utf-8";

/* ========================================
   KV p-cans: 缶のポップアップアニメーション
   （footer の缶は /assets/css/layout.css 側で独立定義）
======================================== */
.p-main .p-cans ul li {
	--can-pop-x: 0px;
	--can-pop-y: -28px;
}

/* hero: pop direction matches can rotation angle */
.p-main .p-cans ul li:nth-of-type(1) { --can-pop-x: 10px; --can-pop-y: -26px; }
.p-main .p-cans ul li:nth-of-type(2) { --can-pop-x: 10px; --can-pop-y: -26px; }
.p-main .p-cans ul li:nth-of-type(3) { --can-pop-x: 7px; --can-pop-y: -27px; }
.p-main .p-cans ul li:nth-of-type(5) { --can-pop-x: -7px; --can-pop-y: -27px; }
.p-main .p-cans ul li:nth-of-type(6) { --can-pop-x: -10px; --can-pop-y: -26px; }
.p-main .p-cans ul li:nth-of-type(7) { --can-pop-x: -10px; --can-pop-y: -26px; }

@media (max-width: 768px) {
	.p-main .p-cans ul li {
		--can-pop-x: 0px;
		--can-pop-y: -14px;
	}
	.p-main .p-cans ul li:nth-of-type(1) { --can-pop-x: 5px; --can-pop-y: -13px; }
	.p-main .p-cans ul li:nth-of-type(2) { --can-pop-x: 5px; --can-pop-y: -13px; }
	.p-main .p-cans ul li:nth-of-type(3) { --can-pop-x: 4px; --can-pop-y: -13px; }
	.p-main .p-cans ul li:nth-of-type(5) { --can-pop-x: -4px; --can-pop-y: -13px; }
	.p-main .p-cans ul li:nth-of-type(6) { --can-pop-x: -5px; --can-pop-y: -13px; }
	.p-main .p-cans ul li:nth-of-type(7) { --can-pop-x: -5px; --can-pop-y: -13px; }
}

@keyframes can-pop-kv {
	0%   {
		translate: 0 0;
		animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	}
	30%  {
		translate: var(--can-pop-x) var(--can-pop-y);
		animation-timing-function: linear;
	}
	58%  {
		translate: var(--can-pop-x) var(--can-pop-y);
		animation-timing-function: cubic-bezier(0.4, 0.0, 1.0, 1.0);
	}
	100% {
		translate: 0 0;
	}
}

.p-main .p-cans ul li.is-popping {
	animation: can-pop-kv 0.75s forwards;
}


/* ========================================
   KV fade
======================================== */
.kv-fade {
	position: relative;
}

.kv-fade img {
	transition: opacity 1s ease;
}

.kv-fade img + img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.kv-fade.is-switched img:first-child {
	opacity: 0;
}

.kv-fade.is-switched img + img {
	opacity: 1;
}

@media (max-width: 768px) {
	.p-main .h1_wrap {
		z-index: 2;
	}
}


/* ========================================
   Illustration pop-up on scroll
======================================== */

/* default: hidden below final position */
.p-main .h1_char,
.p-press_room .aliens,
.p-press_room .satan,
.p-lineup .satan,
.p-lineup .aliens,
.p-about .dondabada,
.p-company .aliens {
	--pop-x-start: 0px;
	--pop-y-start: 50px;
	--pop-x-over: 0px;
	--pop-y-over: -10px;
	translate: var(--pop-x-start) var(--pop-y-start);
}

/* right-tilted figures: pop toward upper-right */
.p-press_room .aliens,
.p-press_room .satan {
	--pop-x-start: -10px;
	--pop-x-over: 3px;
}

/* left-tilted figures: pop toward upper-left */
.p-lineup .satan,
.p-lineup .aliens,
.p-about .dondabada {
	--pop-x-start: 10px;
	--pop-x-over: -3px;
}

/* ========================================
   h1_wrap: random 9-pattern characters
======================================== */
.p-main .h1_wrap .h1_chars {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.p-main .h1_char {
	position: absolute;
	margin: 0;
	z-index: 1;
	opacity: 0;
}

.p-main .h1_char.is-entered {
	animation: h1-char-pop 0.6s ease-out forwards;
}

@keyframes h1-char-pop {
	0% {
		opacity: 0;
		translate: var(--pop-x-start) var(--pop-y-start);
		animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	}
	30% {
		opacity: 1;
	}
	70% {
		translate: var(--pop-x-over) var(--pop-y-over);
		animation-timing-function: ease-out;
	}
	100% {
		opacity: 1;
		translate: 0 0;
	}
}

.p-main .h1_char img {
	display: block;
	width: 100%;
	height: 100%;
}

/* rotated figures: pop along their own tilt direction */
.p-main .h1_char[data-rot="-20"] {
	--pop-x-start: 17px;
	--pop-y-start: 47px;
	--pop-x-over: -3px;
	--pop-y-over: -9px;
}

.p-main .h1_char[data-rot="20"] {
	--pop-x-start: -17px;
	--pop-y-start: 47px;
	--pop-x-over: 3px;
	--pop-y-over: -9px;
}

@keyframes illust-pop {
	0%   {
		translate: var(--pop-x-start) var(--pop-y-start);
		animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	}
	70%  {
		translate: var(--pop-x-over) var(--pop-y-over);
		animation-timing-function: ease-out;
	}
	100% {
		translate: 0 0;
	}
}

.is-entered {
	animation: illust-pop 0.6s ease-out forwards;
}


/* ========================================
   p-lineup: Swiperカルーセル
======================================== */

.p-slide--lineup {
	position: relative;
	margin: 33px 0 0;
	overflow: visible;
}

.swiper-lineup {
	overflow: visible;
}

.swiper-lineup .swiper-wrapper {
	align-items: flex-end;
}

/* style.css の margin: 0 auto を上書き */
.swiper-lineup .swiper-slide {
	height: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	user-select: none;
	margin: 0;
}

/* 缶画像 */
.swiper-lineup .swiper-slide figure {
	width: 205px;
	height: 384px;
	margin: 0;
	transform-origin: center bottom;
	will-change: transform;
}

.swiper-lineup .swiper-slide figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.p-slide--lineup .p-prev_next {
	bottom: 0;
	top: auto;
}

/* バッジ (style.css の .swiper-slide div を上書き) */
.swiper-lineup .swiper-slide .badge {
	position: absolute;
	top: auto;
	bottom: 0px;
	right: -117px;
	width: 158px;
	height: 158px;
	background-color: rgba(0,0,0,.3);
	border: 6px solid #F8E133;
	border-radius: 50%;
	color: #F8E133;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.4;
	z-index: 200;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.swiper-lineup .swiper-slide .badge.show-badge {
	opacity: 1;
	transform: scale(1);
}

@media (max-width: 768px) {
	.swiper-lineup .swiper-slide p {
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	.swiper-lineup .swiper-slide-active p {
		opacity: 1;
	}

	.p-slide--lineup {
		margin: 32px 0 0;
		padding-bottom: 32px;
	}

	.en .p-slide--lineup {
		padding-bottom: 16px;
	}

	.swiper-lineup .swiper-slide {
		height: 320px;
	}

	.swiper-lineup .swiper-slide figure {
		width: 132px;
		height: 248px;
	}

	.swiper-lineup .swiper-slide .badge {
		width: 108px;
		height: 108px;
		font-size: 12px;
		bottom: 8px;
		right: -76px;
	}

	.en .swiper-lineup .swiper-slide .badge {
		bottom: 24px;
	}
}


/* ========================================
   p-breweries: Swiper carousel
======================================== */
.p-slide--breweries {
	position: relative;
	margin: 64px 0 0;
	overflow: visible;
}

.en .p-slide--breweries {
	margin: 52px 0 0;
}

.swiper-breweries {
	overflow: visible;
}

.swiper-breweries .swiper-wrapper {
	align-items: center;
}

/* override style.css margin: 0 auto */
.swiper-breweries .swiper-slide {
	margin: 0;
	z-index: 1;
}

.swiper-breweries .swiper-slide-active {
	z-index: 100;
}

.swiper-breweries .swiper-slide a {
	transform-origin: center center;
	will-change: transform;
	display: block;
}

@media (max-width: 768px) {
	.p-slide--breweries {
		margin: 32px 0 0;
		padding-bottom: 79px;
	}

	.swiper-breweries .swiper-wrapper {
		align-items: flex-start;
	}

	.swiper-breweries .swiper-slide figure img {
		width: 100%;
		height: auto;
	}
}