/* =========================================================
   Area article key visual (.kb-area-hero) and heading band (.kb-area-heading)
   The visual is laid out on a fixed design grid: every length is a multiple
   of --u, one design pixel of a 1367px-wide (phones: 758px-wide) artboard.
   ========================================================= */

.kb-area-hero { background: #e8f6fc; }

.kb-area-hero__frame {
	width: 100%;
	margin-inline: auto;
}
@media (min-width: 576px)  { .kb-area-hero__frame { max-width: 540px; } }
@media (min-width: 768px)  { .kb-area-hero__frame { max-width: 720px; } }
@media (min-width: 992px)  { .kb-area-hero__frame { max-width: 960px; } }
@media (min-width: 1200px) { .kb-area-hero__frame { max-width: 1140px; } }
@media (min-width: 1400px) { .kb-area-hero__frame { max-width: 1320px; } }

.kb-area-hero__stage {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1367 / 602;
	overflow: hidden;
	background: #e8f6fc;
	color: #3c302a;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	line-height: 1;
}
.kb-area-hero__stage > * {
	--u: calc(100cqw / 1367);
	position: absolute;
	margin: 0;
	padding: 0;
}
.kb-area-hero__stage ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.kb-area-hero__stage li { padding: 0; }

/* Hatched panel behind the mascot */
.kb-area-hero__stripes {
	top: calc(var(--u) * 29);
	left: calc(var(--u) * 975);
	width: calc(var(--u) * 303);
	height: calc(var(--u) * 536);
	background: repeating-linear-gradient(135deg, #d8dee4 0 calc(var(--u) * 5.7), transparent calc(var(--u) * 5.7) calc(var(--u) * 12.7));
}
.kb-area-hero__disc { display: none; }

.kb-area-hero__mascot {
	display: block;
	top: calc(var(--u) * 63);
	left: calc(var(--u) * 930);
	width: calc(var(--u) * 355);
}
.kb-area-hero__mascot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Pill tags */
.kb-area-hero__tags {
	display: flex;
	top: calc(var(--u) * 63);
	left: calc(var(--u) * 102);
	gap: calc(var(--u) * 16);
}
.kb-area-hero__tag {
	width: calc(var(--u) * 168);
	height: calc(var(--u) * 50);
	border-radius: calc(var(--u) * 25);
	background: #4a92d4;
	color: #fff;
	font-size: calc(var(--u) * 27);
	font-weight: 700;
	line-height: calc(var(--u) * 50);
	text-align: center;
	white-space: nowrap;
}
.kb-area-hero__tag--wide { width: calc(var(--u) * 192); }

/* Copy */
.kb-area-hero__kicker,
.kb-area-hero__headline,
.kb-area-hero__sub {
	font-weight: 700;
	white-space: nowrap;
}
.kb-area-hero__kicker {
	top: calc(var(--u) * 139);
	left: calc(var(--u) * 104);
	font-size: calc(var(--u) * 32);
	font-feature-settings: "palt";
}
.kb-area-hero__headline {
	top: calc(var(--u) * 183);
	left: calc(var(--u) * 102);
	font-size: calc(var(--u) * 56);
	font-weight: 800;
	font-feature-settings: "palt";
}
.kb-area-hero__headline em {
	color: #e0902a;
	font-style: normal;
}
.kb-area-hero__sub {
	top: calc(var(--u) * 258);
	left: calc(var(--u) * 104);
	font-size: calc(var(--u) * 29);
}

/* Ribbon */
.kb-area-hero__ribbon {
	display: block;
	z-index: 2;
	overflow: visible;
}
.kb-area-hero__ribbon--wide {
	top: calc(var(--u) * 300);
	left: calc(var(--u) * 240);
	width: calc(var(--u) * 510);
	height: calc(var(--u) * 110);
}
.kb-area-hero__ribbon--narrow { display: none; }
.kb-area-hero__ribbon-face  { fill: #e0902a; }
.kb-area-hero__ribbon-ends  { fill: #db7c24; }
.kb-area-hero__ribbon-shade { fill: #b4631c; }
.kb-area-hero__ribbon-text {
	fill: #fff;
	font-family: inherit;
	font-size: 28px;
	font-weight: 800;
}

/* Two round badges joined by a cross */
.kb-area-hero__badge {
	top: calc(var(--u) * 365);
	z-index: 1;
	width: calc(var(--u) * 118);
	height: calc(var(--u) * 118);
	border-radius: 50%;
	background: #fff;
	text-align: center;
}
.kb-area-hero__badge--pickup { left: calc(var(--u) * 340); }
.kb-area-hero__badge--buy    { left: calc(var(--u) * 528); }

.kb-area-hero__badge-icon {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: #b4bac0;
	line-height: 1;
}
.kb-area-hero__badge--pickup .kb-area-hero__badge-icon {
	top: calc(var(--u) * 13);
	font-size: calc(var(--u) * 42);
}
.kb-area-hero__coins {
	display: block;
	top: calc(var(--u) * 12);
	width: calc(var(--u) * 48);
	height: calc(var(--u) * 42);
}
.kb-area-hero__coins .fa-coins {
	position: absolute;
	top: 0;
	left: 0;
	font-size: calc(var(--u) * 34);
}
.kb-area-hero__coins .fa-magnifying-glass {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: calc(var(--u) * 24);
	-webkit-text-stroke: calc(var(--u) * 3) #fff;
	paint-order: stroke fill;
}
.kb-area-hero__badge-label {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	font-size: calc(var(--u) * 18);
	font-weight: 700;
	line-height: 1.1;
}
.kb-area-hero__badge--pickup .kb-area-hero__badge-label { top: calc(var(--u) * 61); }
.kb-area-hero__badge--buy .kb-area-hero__badge-label    { top: calc(var(--u) * 54); }

.kb-area-hero__times {
	top: calc(var(--u) * 414);
	left: calc(var(--u) * 470);
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 7);
}
.kb-area-hero__times::before,
.kb-area-hero__times::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: calc(var(--u) * 4);
	background: #e0902a;
	transform: rotate(45deg);
}
.kb-area-hero__times::after { transform: rotate(-45deg); }

/* Service area strip */
.kb-area-hero__reach {
	inset: 0;
	pointer-events: none;
}
.kb-area-hero__reach-title {
	display: flex;
	position: absolute;
	top: calc(var(--u) * 495);
	left: calc(var(--u) * 102);
	height: calc(var(--u) * 41);
	margin: 0;
	align-items: center;
	gap: calc(var(--u) * 16);
	font-size: calc(var(--u) * 22);
	font-weight: 700;
	white-space: nowrap;
}
.kb-area-hero__reach-title i {
	color: #b4bac0;
	font-size: calc(var(--u) * 50);
}
.kb-area-hero__reach-list {
	display: flex;
	position: absolute;
	top: calc(var(--u) * 497);
	left: calc(var(--u) * 310);
	gap: calc(var(--u) * 15);
}
.kb-area-hero__reach-list li {
	height: calc(var(--u) * 36);
	padding: 0 calc(var(--u) * 21);
	border: calc(var(--u) * 1) solid #d3dae0;
	border-radius: calc(var(--u) * 18);
	background: #fff;
	font-size: calc(var(--u) * 19);
	font-weight: 700;
	line-height: calc(var(--u) * 34);
	white-space: nowrap;
}

/* ---------- Phones: tall artboard ---------- */
@media (max-width: 575.98px) {
	.kb-area-hero__stage {
		aspect-ratio: 758 / 1233;
		background: #e3eff8;
		color: #1a0f08;
	}
	.kb-area-hero__stage > * { --u: calc(100cqw / 758); }

	.kb-area-hero__stripes,
	.kb-area-hero__ribbon--wide { display: none; }

	.kb-area-hero__disc {
		display: block;
		top: calc(var(--u) * 300);
		left: calc(var(--u) * 96);
		width: calc(var(--u) * 558);
		height: calc(var(--u) * 558);
		border-radius: 50%;
		background: repeating-linear-gradient(135deg, #c6e4f6 0 calc(var(--u) * 7), #ddeffa calc(var(--u) * 7) calc(var(--u) * 17));
	}
	.kb-area-hero__mascot {
		top: calc(var(--u) * 304);
		left: calc(var(--u) * 201);
		width: calc(var(--u) * 353);
	}

	.kb-area-hero__tags {
		top: calc(var(--u) * 46);
		left: calc(var(--u) * 14);
		gap: calc(var(--u) * 18);
	}
	.kb-area-hero__tag {
		width: calc(var(--u) * 213);
		height: calc(var(--u) * 64);
		border-radius: calc(var(--u) * 32);
		background: #1e74b6;
		font-size: calc(var(--u) * 34);
		line-height: calc(var(--u) * 64);
	}
	.kb-area-hero__tag--wide { width: calc(var(--u) * 233); }

	.kb-area-hero__kicker,
	.kb-area-hero__headline,
	.kb-area-hero__sub {
		left: 0;
		right: 0;
		text-align: center;
	}
	.kb-area-hero__kicker { top: calc(var(--u) * 132); font-size: calc(var(--u) * 31); }
	.kb-area-hero__headline { top: calc(var(--u) * 180); font-size: calc(var(--u) * 48); font-weight: 700; }
	.kb-area-hero__headline em { color: #e0880a; }
	.kb-area-hero__sub { top: calc(var(--u) * 252); font-size: calc(var(--u) * 28); }

	.kb-area-hero__ribbon--narrow {
		display: block;
		top: calc(var(--u) * 730);
		left: calc(var(--u) * 35);
		width: calc(var(--u) * 680);
		height: calc(var(--u) * 150);
	}
	.kb-area-hero__ribbon-face  { fill: #e48a0a; }
	.kb-area-hero__ribbon-ends  { fill: #dc770c; }
	.kb-area-hero__ribbon-shade { fill: #a85a06; }
	.kb-area-hero__ribbon--narrow .kb-area-hero__ribbon-text { font-size: 38px; font-weight: 700; }

	.kb-area-hero__badge {
		top: calc(var(--u) * 832);
		width: calc(var(--u) * 159);
		height: calc(var(--u) * 159);
	}
	.kb-area-hero__badge--pickup { left: calc(var(--u) * 167); }
	.kb-area-hero__badge--buy    { left: calc(var(--u) * 422); }
	.kb-area-hero__badge-icon { color: #1e74b6; }
	.kb-area-hero__badge--pickup .kb-area-hero__badge-icon {
		top: calc(var(--u) * 21);
		font-size: calc(var(--u) * 58);
	}
	.kb-area-hero__coins {
		top: calc(var(--u) * 14);
		width: calc(var(--u) * 66);
		height: calc(var(--u) * 57);
	}
	.kb-area-hero__coins .fa-coins { font-size: calc(var(--u) * 46); }
	.kb-area-hero__coins .fa-magnifying-glass { font-size: calc(var(--u) * 32); }
	.kb-area-hero__badge-label { font-size: calc(var(--u) * 24); }
	.kb-area-hero__badge--pickup .kb-area-hero__badge-label { top: calc(var(--u) * 88); }
	.kb-area-hero__badge--buy .kb-area-hero__badge-label    { top: calc(var(--u) * 77); }

	.kb-area-hero__times {
		top: calc(var(--u) * 900);
		left: calc(var(--u) * 343);
		width: calc(var(--u) * 62);
		height: calc(var(--u) * 10);
	}
	.kb-area-hero__times::before,
	.kb-area-hero__times::after {
		border-radius: calc(var(--u) * 5);
		background: #1e74b6;
	}

	.kb-area-hero__reach-title {
		top: calc(var(--u) * 1006);
		left: 0;
		right: 0;
		height: calc(var(--u) * 52);
		justify-content: center;
		gap: calc(var(--u) * 17);
		font-size: calc(var(--u) * 37);
	}
	.kb-area-hero__reach-title i { font-size: calc(var(--u) * 65); }
	.kb-area-hero__reach-list {
		display: grid;
		top: calc(var(--u) * 1078);
		left: calc(var(--u) * 130);
		grid-template-columns: repeat(2, calc(var(--u) * 235));
		gap: calc(var(--u) * 20);
	}
	.kb-area-hero__reach-list li {
		height: calc(var(--u) * 59);
		padding: 0;
		border: 0;
		border-radius: calc(var(--u) * 6);
		background: #b4bac0;
		font-size: calc(var(--u) * 33);
		line-height: calc(var(--u) * 59);
		text-align: center;
	}
}

/* ---------- Heading band ---------- */
.kb-area-heading {
	padding: 24px 12px;
	background: #fff54d;
	color: #4169e1;
	text-align: center;
}
.kb-area-heading__eyebrow {
	display: flex;
	margin-bottom: 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.kb-area-heading__icon {
	display: block;
	width: 24px;
	height: auto;
}
.kb-area-heading__lead {
	margin: 0;
	font-size: 16px;
}
.kb-area-heading__title {
	margin: .5em 0;
	font-size: 28.8px;
	font-weight: 700;
	line-height: 1.4;
}
.kb-area-heading__en {
	margin-top: 14.4px;
	font-size: 14.4px;
	letter-spacing: .1em;
	opacity: .9;
}
@media (max-width: 768px) {
	.kb-area-heading__lead { font-size: 14.4px; }
	.kb-area-heading__title { font-size: 22.4px; }
}