@charset "utf-8";

/**
 * Home
 * ---------------------------------------- */
.home_visual {
	--aspect: 1440;
	overflow: hidden;
	width: var(--cw);
	height: 100dvh;
}
.home_visual .app {
	z-index: 0;
	position: relative;
	width: 100%;
	height: 100%;
	aspect-ratio: 11 / 8;
	background: #a9e7e6;
}
.home_visual .town {
	--width: 4000;
	--height: 3000;
	width: max(var(--cw) * var(--width) / var(--aspect) - var(--cw) * 80 / var(--aspect), var(--width) * 1px - 80px);
	height: max(var(--cw) * var(--height) / var(--aspect) - var(--cw) * 60 / var(--aspect), var(--height) * 1px - 60px);
	will-change: transform;
	backface-visibility: hidden;
}
.home_visual .container {
	display: grid;
	width: max(var(--cw) * var(--width) / var(--aspect), var(--width) * 1px);
	height: max(var(--cw) * var(--height) / var(--aspect), var(--height) * 1px);
	margin-inline: min(var(--cw) * -40 / var(--aspect), -40px);
	margin-bottom: min(var(--cw) * -60 / var(--aspect), -60px);
	clip-path: inset(0);
	background: linear-gradient(to top, #fffff1 70%, #a9e7e6);
}
.home_visual .container > * {
	grid-area: 1 / 1;
	-webkit-user-select: none;
	user-select: none;
}
.home_visual .container img {
	pointer-events: none;
}
.home_visual .watermark {
	z-index: 10;
	width: 100%;
	height: 100%;
	opacity: .2;
}
.home_visual .ground {
	width: 100%;
	height: 100%;
}
.home_visual .car,
.home_visual .building {
	position: absolute;
	backface-visibility: hidden;
}
.home_visual .car {
	transform: translate3d(0,0,0);
	will-change: translate;
	/* content-visibility: auto;
	contain: strict; */
}
@media (hover) {
	.home_visual .app:hover {
		cursor: grab;
	}
	.home_visual .app:active {
		cursor: grabbing;
	}
}

/**
 * 人々 (stroke-width:.3pxの人々)
 * ---------------------------------------- */
.home_visual .people {
	z-index: 0;
	position: absolute;
	width: max(var(--cw) * var(--w) * 1.844 / var(--aspect), var(--w) * 1.844px); /* 2倍の92.2% */
	height: fit-content;
}
.home_visual .people > * {
	width: 100%;
	height: auto;
}

/**
 * 乗り物
 * ---------------------------------------- */
.home_visual .car {
	display: grid;
}
.home_visual :where(.-lt) {
	animation: toLeftTop 16s linear infinite; /* ↖️ */
}
.home_visual :where(.-rb) {
	animation: toRightBottom 16s linear infinite; /* ↘️ */
}
.home_visual :where(.-rt) {
	animation: toRightTop 16s linear infinite; /* ↗️ */
}
.home_visual :where(.-lb) {
	animation: toLeftBottom 16s linear infinite; /* ↙️ */
}
.home_visual .car > * {
	grid-area: 1 / 1;
}
@keyframes toRightBottom {
	from { translate: none; }
	to { translate: max(var(--cw) * var(--xTranslate) / var(--aspect), var(--xTranslate) * 1px) max(var(--cw) * var(--xTranslate) * .58 / var(--aspect), var(--xTranslate) * .58px); }
}
@keyframes toLeftBottom {
	from { translate: none; }
	to { translate: min(var(--cw) * var(--xTranslate) * -1 / var(--aspect), var(--xTranslate) * -1px) max(var(--cw) * var(--xTranslate) * .58 / var(--aspect), var(--xTranslate) * .58px); }
}
@keyframes toRightTop {
	from { translate: none; }
	to { translate: max(var(--cw) * var(--xTranslate) / var(--aspect), var(--xTranslate) * 1px) min(var(--cw) * var(--xTranslate) * -.58 / var(--aspect), var(--xTranslate) * -.58px); }
}
@keyframes toLeftTop {
	from { translate: none; }
	to { translate: min(var(--cw) * var(--xTranslate) * -1 / var(--aspect), var(--xTranslate) * -1px) min(var(--cw) * var(--xTranslate) * -.58 / var(--aspect), var(--xTranslate) * -.58px); }
}

/* :::::: メイン大通りとサブ大通りのスピード統一 :::::: */
.home_visual :is(.mini4,.sedan2,.van2,.van3,.pig,.bus,.sedan,.mini5,.bus2,.sedan3,.mini6,.sedan4,.compact2,.mini7,.kickbord2,.kickbord3) {
	--xTranslate: 3300;
	animation-duration: 24s;
}

.warp_left { z-index: 1; }
.warp_right { z-index: 2; }
.building.factory3 { z-index: 3; }
.building.factory_evolve { z-index: 4; }
.building.factory2 { z-index: 5; }
.building.factory1 { z-index: 6; }
.car.alley5 { z-index: 7; }
.building.area2-6 { z-index: 8; }
.building.area1-6 { z-index: 9; }
.car.alley4 { z-index: 10; }
.car.alley3 { z-index: 11; }
.building.area1-5_farm { z-index: 12; }
.building.area1-5_2 { z-index: 13; }
.building.area1-5_consaru { z-index: 14; }
.building.area1-5_1 { z-index: 15; }
.building.bank { z-index: 16; }
.building.elevator { z-index: 17; }
.building.tb { z-index: 18; }
.building.embankment { z-index: 19; }
.car.mainstreet_up { z-index: 20; }
.car.mainstreet_dn { z-index: 21; }
.building.tunnel { z-index: 22; }
.building.area3-4 { z-index: 23; }
.car.alley2 { z-index: 24; }
.building.area3-3 { z-index: 25; }
.building.area3-2 { z-index: 26; }
.car.alley1 { z-index: 27; }
.building.area2-4 { z-index: 28; }
.building.area2-3 { z-index: 29; }
.building.area2-2 { z-index: 30; }
.building.area2-1 { z-index: 31; }
.car.alley { z-index: 32; }
.building.behind3 { z-index: 33; }
.building.behind2 { z-index: 33; }
.building.behind1 { z-index: 34; }
.building.area1-4_2 { z-index: 35; }
.building.area1-3_2 { z-index: 36; }
.building.station { z-index: 37; }
.building.torch { z-index: 38; }
.building.light { z-index: 39; }
.building.tube { z-index: 40; }
.building.station { z-index: 41; }
.building.area1-5_farm { z-index: 42; }
.building.area1-5_consaru { z-index: 43; }
.building.area1-4 { z-index: 44; }
.building.area1-3 { z-index: 45; }
.car.subway_up { z-index: 46; }
.car.subway_dn { z-index: 47; }
.building.front { z-index: 48; }

.home_catchcopy,
.home_news {
	display: none !important;
}

.home_visual [style*="--w:"] {
	width: max(var(--cw) * var(--w) * 2 / var(--aspect), var(--w) * 2px);
}
.home_visual [style*="--h:"] {
	aspect-ratio: var(--w) / var(--h);
	height: auto;
}
:where(.building, .people, .car) {
	--x: 0; --y: 0;
	--bgx: 0; --bgy: 0;
}
:where(.people, .car)::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
:where(.building), :where(.people, .car)::after {
	background-repeat: no-repeat;
	background-position: max(var(--cw) * var(--bgx) * 2 / var(--aspect), var(--bgx) * 2px)
						 max(var(--cw) * var(--bgy) * 2 / var(--aspect), var(--bgy) * 2px);
	background-size: max(var(--cw) * var(--bgw) * 2 / var(--aspect), var(--bgw) * 2px)
					 max(var(--cw) * var(--bgh) * 2 / var(--aspect), var(--bgh) * 2px);
}
:where(.building) {
	--bgw: 1900; --bgh: 1511;
	background-image: url(../img/sprites/building.png);
}
:where(.people) {
	--bgw: 318; --bgh: 438;
}
:where(.people)::after {
	background-image: url(../img/sprites/people.png);
}
:where(.car) {
	--bgw: 368; --bgh: 292;
}
:where(.car)::after {
	background-image: url(../img/sprites/car.png);
}

.home_visual [class="alley"] {
	position: absolute;
}

.car[class*="track"] { --bgx: 0; --bgy: -98; }
.car[class*="track"].-rear { --bgx: -77; --bgy: -98; }
.car[class*="van"] { --bgx: -192; --bgy: 0; }
.car.van2 {}
.car.van3 {}
.car[class*="pig"] { --bgx: -263; --bgy: 0; }
.car[class*="bus"] { --bgx: 0; --bgy: 0; }
.car[class*="bus"].rear { --bgx: -96; --bgy: 0; }
.car.bus2 {}
.car[class*="mini"] { --bgx: -220; --bgy: -75; }
.car[class*="mini"].--rear { --bgx: -293; }
.car.mini2 {}
.car.mini3 {}
.car.mini4 {}
.car.mini5 {}
.car.mini6 {}
.car.mini8 {}
.car.mini7 {}
.car[class*="sedan"] { --bgx: 0; --bgy: -182; }
.car[class*="sedan"].--rear { --bgx: -77; }
.car.sedan2 {}
.car.sedan3 { --bgy: -242; }
.car.sedan4 {}
.car[class*="compact"] { --bgx: -154; --bgy: -98; }
.car.compact2 { --bgy: -157; }




/* キックボード */
.people[class*="kickbord"] {
	--frameShift: -104;
}
.people:where(.kickbord) {
	--bgx: 0; --bgy: 0;
}
.people:where(.kickbord2) {
	--bgx: 0; --bgy: -67;
}
.people:where(.kickbord3) {
	--bgx: 0; --bgy: -134;
}
.people[class*="kickbord"]::after {
	animation: kickbordFrameAnime .8s steps(1) infinite;
}
@keyframes kickbordFrameAnime {
	from { background-position: 0 0; }
	33.3333% { background-position: max(var(--cw) * var(--frameShift) / var(--aspect), var(--frameShift) * 1px) var(--bgy); }
	66.6666% { background-position: max(var(--cw) * var(--frameShift) * 2 / var(--aspect), var(--frameShift) * 2px) var(--bgy); }
	from { background-position: max(var(--cw) * var(--frameShift) * 3 / var(--aspect), var(--frameShift) * 3px) var(--bgy); }
}





/* :::::: 一丁目3番地 :::::: */
.home_visual .building.area1-3 {
	--bgx: 0; --bgy: -535;
	top: 72.14%;
	left: 41.75%;
}

/* :::::: 一丁目3番地奥 :::::: */
.home_visual .building.area1-3_2 {
	--bgx: -208; --bgy: -535;
	top: 75.3%;
	left: 31.38%;
}

/* :::::: 一丁目4番地 :::::: */
.home_visual .building.area1-4 {
	--bgx: -484; --bgy: -535;
	top: 65.02%;
	left: 51.5%;
}
.area1-4 .people {
	--bgx: -168; --bgy: -332;
	top: 77.5%;
	left: 8.2%;
}

/* :::::: 一丁目4番地奥 :::::: */
.home_visual .building.area1-4_2 {
	top: 68.54%;
	left: 41.18%;
}

/* :::::: トンネル :::::: */
.home_visual .building.tunnel {
	--bgx: -1592; --bgy: 0;
	top: 33.65%;
	left: 10.735%;
}










/* :::::: メイン大通り上り ↖️ :::::: */
.home_visual :is(.mini4,.sedan2,.van2) {
	--xTranslate: 3120;
	top: calc(100% + 60px);
}
.home_visual :is(.mini4,.sedan2,.van2) > * {
	scale: -1 1;
}
.home_visual .mini4 {
	left: 93.7%;
	animation-delay: -12s;
}
.home_visual .sedan2 {
	--xTranslate: 3100;
	left: 92.5%;
	animation-delay: -18s;
}
.home_visual .van2 {
	left: 93.9%;
	animation-delay: -20s;
}

/* :::::: メイン大通り下り ↘️ :::::: */
.home_visual :is(.van3,.pig,.bus,.sedan,.mini5) {
	top: 37.6%;
	left: 14.8%;
}
.home_visual :is(.van3,.bus,.sedan,.mini5) > * {
	scale: -1 1;
}
.home_visual .van3 {
	animation-delay: 0s;
}
.home_visual .pig {
	animation-delay: -3s;
}
.home_visual .bus {
	top: 36.4%;
	left: 14%;
	animation-delay: -7s;
}
.home_visual .sedan {
	top: 38.8%;
	animation-delay: -10s;
}
.home_visual .mini5 {
	animation-delay: -14s;
}

/* :::::: サブ大通り上り ↗️ :::::: */
.home_visual :is(.bus2,.sedan3,.mini6) {
	top: calc(100% + 60px);
}
.home_visual .sedan3 {
	left: 48.2%;
	animation-delay: -10s;
}
.home_visual .bus2 {
	left: 44.9%;
	animation-delay: -14s;
}
.home_visual .mini6 {
	left: 47.6%;
	animation-delay: -16s;
}

/* :::::: サブ大通り下り ↙️ :::::: */
.home_visual :is(.sedan4,.compact2,.mini7,.kickbord2,.kickbord3) {
	top: 64.6%;
	left: calc(100% + 40px);
}
.home_visual .mini7 {
	top: 63.8%;
	animation-delay: -2s;
}
.home_visual .sedan4 {
	animation-delay: -8s;
}
.home_visual .compact2 {
	top: 64.8%;
	animation-delay: -10s;
}
.home_visual .kickbord3 {
	animation-delay: -12s;
}
.home_visual .kickbord2 {
	animation-delay: -18s;
}

/* :::::: ／路地 ↙️ :::::: */
.home_visual :is(.track,.mini) {
	--xTranslate: 1560;
	left: 35%;
	animation-play-state: paused;
}
.home_visual .track {
	z-index: -1;
	top: 44.5%;
	animation-delay: -6s;
}
.home_visual .mini {
	top: 45.5%;
	animation-delay: -10.2s;
}

/* :::::: ＼路地1 ↘️ :::::: */
.home_visual .compact {
	--xTranslate: 1920;
	top: 53%;
	left: 5%;
	animation-duration: 20s;
	animation-timing-function: cubic-bezier(.8,1,.9,1);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-play-state: running;
}
.home_visual .compact::after {
	scale: -1 1;
}

/* :::::: ＼路地2 ↖️ :::::: */
.home_visual :is(.van,.mini3,.mini2) {
	--xTranslate: 2100;
	top: calc(100% + 60px);
	left: 48.5%;
}
.home_visual :is(.van,.mini3,.mini2)::after {
	scale: -1 1;
}
.home_visual .van {
	animation-delay: -2s;
}
.home_visual .mini3 {
	animation-delay: -6s;
}
.home_visual .mini2 {
	animation-delay: -11s;
}

/* :::::: ＼路地3 ↖️ :::::: */
.home_visual .mini8 {
	--xTranslate: 700;
	top: 65%;
	left: 85.1%;
	animation-duration: 10s;
	animation-delay: -2.6s;
	animation-play-state: paused;
}
.home_visual .mini8::after {
	scale: -1 1;
}

/* :::::: ／キックボードの路地 ↙️ :::::: */
.home_visual .alley {
	--xTranslate: 1000;
	top: 72.3%;
	left: 26%;
	animation-duration: 8s;
	animation-play-state: running;
}

/* :::::: 奥の細道トラック ↙️↖️ :::::: */
.home_visual .alley5 {
	top: 39%;
	left: 79%;
	animation-play-state: running;
}
.home_visual .alley5:first-child::after {
	scale: -1 1;
}
.home_visual .alley5,
.home_visual .alley5:first-child::after,
.home_visual .alley5:last-child::after {
	animation: 12s linear infinite both;
	animation-delay: -7s;
}
.home_visual .alley5 {
	--xTranslate1: 300;
	--xTranslate2: 900;
	animation-name: track2;
}
.home_visual .alley5:first-child::after {
	animation-name: track2rear;
}
.home_visual .alley5:last-child::after {
	animation-name: track2front;
}
@keyframes track2 {
	from { translate: none; }
	26% { translate: min(var(--cw) * var(--xTranslate1) * -1 / var(--aspect), var(--xTranslate1) * -1px) min(var(--cw) * var(--xTranslate1) * -.58 / var(--aspect), var(--xTranslate1) * -.58px); }
	72%, to { translate: min(var(--cw) * var(--xTranslate2) * -1 / var(--aspect), var(--xTranslate2) * -1px) max(var(--cw) * var(--xTranslate1) * .58 / var(--aspect), var(--xTranslate1) * .58px); }
}
@keyframes track2rear {
	from, 25.98% { visibility: visible; }
	26%, to { visibility: hidden; }
}
@keyframes track2front {
	from, 25.98% { visibility: hidden; }
	26%, to { visibility: visible; }
}

/**
 * ランドマーク
 * ---------------------------------------- */

/* :::::: くじら :::::: */
.home_visual .whale {
	z-index: 1;
	position: absolute;
	top: 29.1%;
	left: 28.2%;
}
.home_visual .whale .xwrap {
	animation: whalefloatX 5s alternate infinite;
}
.home_visual .whale .ywrap {
	display: grid;
	place-items: center;
	animation: whalefloatY 3s alternate infinite;
}
.home_visual .whale .ywrap::after {
	grid-area: 1 / 1;
}
@keyframes whalefloatY {
	from { transform: translateY(1%); }
	to { transform: translateY(-1%); }
}
@keyframes whalefloatX {
	from { transform: translateX(2%); }
	to { transform: translateX(-2%); }
}
.home_visual .whale.is-patrol {
	--xTranslate: 4634;
	top: 0;
	left: -10%;
	animation: toRightBottom 100s linear infinite;
	animation-delay: -80s;
}

/* :::::: VR :::::: */
.home_visual .vr {
	position: absolute;
	top: 58%;
	left: 66.2%;
	animation: vrfloat 4s var(--easeInOut) alternate infinite;
}
@keyframes vrfloat {
	from { translate: 0 1%; }
	to { translate: 0 -1%; }
}

/* :::::: 魔女 :::::: */
.home_visual .witch {
	display: grid;
	position: absolute;
	top: 32.4%;
	left: 57.4%;
	width: max(var(--cw) * 92 * 2 / var(--aspect), 92px * 2);
	height: max(var(--cw) * 67 * 2 / var(--aspect), 67px * 2);
	animation: witchFloat 3s -1s var(--easeInOut) alternate infinite;
}
.home_visual .witch > * {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}
.home_visual .witch_car {
	background: url(../img/home/landmark/witch.svg) 40% bottom / 600% 200% no-repeat;
}
.home_visual .witch_normal {
	background: url(../img/home/landmark/witch.svg) 20% bottom / 600% 200% no-repeat;
}
.home_visual .witch.is-anime .witch_normal {
	visibility: hidden;
}
.home_visual .witch.is-anime .witch_magic {
	background: url(../img/home/landmark/witch.svg) left bottom / 600% 200% no-repeat, url(../img/home/landmark/witch.svg) left top / 600% 200% no-repeat;
	animation: magic .6s steps(5) both;
}
@keyframes magic {
	from { background-position: left bottom, 0 0; }
	to { background-position: left bottom, 100% 0; }
}
@keyframes witchFloat {
	from { translate: 0 2%; }
	to { translate: 0 -2%; }
}

/* :::::: 神様 :::::: */
.home_visual .god {
	display: grid;
	justify-items: end;
	position: absolute;
	top: 30.1%;
    left: 20.9%;
	animation: godFloat 3s var(--easeInOut) alternate infinite;
}
.home_visual .god > * {
	grid-area: 1 / 1;
}
.home_visual .dog_body {
	position: relative;
	top: -7.2%;
	left: 2.8%;
	width: max(var(--cw) * 87 * 2 / var(--aspect), 87px * 2);
	height: max(var(--cw) * 78 * 2 / var(--aspect), 78px * 2);
	background: url(../img/home/landmark/god.svg) 0 0 / 400% 100% no-repeat;
}
.home_visual .god.is-anime .dog_body {
	animation: power 1s steps(3) both;
}
@keyframes power {
	from { background-position: left top; }
	50%, to { background-position: right top; }
}
@keyframes godFloat {
	from { translate: 0 2%; }
	to { translate: 0 -2%; }
}

/* :::::: ワープ :::::: */
.warp_left {
	position: absolute;
	top: 37.05%;
	left: 24.17%;
}
.warp_right {
	position: absolute;
	top: 30.45%;
	left: 74.58%;
}
.warp_right > img {
	z-index: 1;
	position: relative;
}
:is(.warp_left,.warp_right) .people {
	display: grid;
}
:is(.warp_left,.warp_right) .people > * {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}
.warp_left .people {
	top: 31%;
	left: 31%;
	height: max(var(--cw) * 46 * 2 / var(--aspect), 46px * 2);
}
.warp_right .people {
	top: 22%;
	left: 3%;
	height: max(var(--cw) * 48 * 2 / var(--aspect), 48px * 2);
}
.warp_left .people * {
	background: url(../img/home/people/mob_warp_left.svg) 0 0 / 400% 100% no-repeat;
}
.warp_right .people * {
	background: url(../img/home/people/mob_warp_right.svg) 0 0 / 400% 100% no-repeat;
}
:is(.warp_left,.warp_right) .people .c {
	visibility: hidden;
	background-position: right top;
}
/* 人の位置 */
:is(.warp_left,.warp_right).is-upload .people {
	animation: uploadPeopleL 1s steps(2) both;
}
.warp_right.is-upload .people {
	animation-name: uploadPeopleR;
}
@keyframes uploadPeopleL {
	from { top: 31%; left: 31%; }
	50%, to { top: 36%; left: 10%; }
}
@keyframes uploadPeopleR {
	from, 50% { top: 22%; left: 3%; }
	to { top: 29%; left: -10%; }
}
:is(.warp_left,.warp_right).is-download .people {
	animation: downloadPeopleL 1s 1s steps(2) both;
}
.warp_right.is-download .people {
	animation-name: downloadPeopleR;
}
@keyframes downloadPeopleL {
	from { top: 36%; left: 10%; }
	50%, to { top: 31%; left: 31%; }
}
@keyframes downloadPeopleR {
	from, 50% { top: 29%; left: -10%; }
	to { top: 22%; left: 3%; }
}
/* コマアニメ */
:is(.warp_left,.warp_right).is-upload .people .p {
	animation: uploadFrame 1s steps(2) both;
}
@keyframes uploadFrame {
	from { background-position: left top; }
	to { background-position: 66.6666% top; }
}
:is(.warp_left,.warp_right).is-download .people .p {
	animation: downloadFrame 1s .5s steps(2) both;
}
@keyframes downloadFrame {
	from { background-position: 66.6666% top; }
	to { background-position: left top; }
}
/* 荷物 */
:is(.warp_left,.warp_right).is-upload .people .c {
	animation: upCargo1 2s var(--easeInOut) both;
}
.warp_right.is-upload .people .c {
	animation-name: upCargo2;
}
@keyframes upCargo1 {
	from, 49.9% { visibility: hidden; }
	50% { visibility: visible; translate: -20% 0; opacity: 1; }
	to { visibility: visible; translate: -20% 40%; opacity: 0; }
}
@keyframes upCargo2 {
	from, 49.9% { visibility: hidden; }
	50% { visibility: visible; translate: 10% 0; opacity: 1; }
	to { visibility: visible; translate: 10% 40%; opacity: 0; }
}
:is(.warp_left,.warp_right).is-download .people .c {
	animation: downCargo1 2s var(--easeInOut) both;
}
.warp_right.is-download .people .c {
	animation-name: downCargo2;
}
@keyframes downCargo1 {
	from { visibility: visible; translate: -20% 40%; opacity: 0; }
	49.9% { visibility: visible; translate: -20% 0; opacity: 1; }
	50%, to{ visibility: hidden; }
}
@keyframes downCargo2 {
	from { visibility: visible; translate: 10% 40%; opacity: 0; }
	49.9% { visibility: visible; translate: 10% 0; opacity: 1; }
	50%, to { visibility: hidden; }
}

/* :::::: グローバル :::::: */
.home_visual .global {
	position: absolute;
	top: 26.75%;
	left: 42.05%;
}

/* :::::: 工場地帯 :::::: */
.home_visual .building.factory_evolve {
	display: grid;
	top: 24.94%;
	left: 61.84%;
}
.home_visual .building.factory_evolve > * {
	grid-area: 1 / 1;
}
.home_visual .building.factory_evolve .old {
	visibility: hidden;
}
.home_visual .building.factory3 {
	top: 35.74%;
	left: 78.2%;
}
.home_visual .building.factory2 {
	top: 35.92%;
	left: 52.87%;
}
.home_visual .building.factory1 {
	top: 41.94%;
	left: 25.05%;
}

/* :::::: 二丁目6番地（車工場） :::::: */
.home_visual .building.area2-6 {
	top: 36.35%;
	left: 61.14%;
}
.home_visual .building.area2-6 .-p1 {
	top: 10.6%;
	left: 69.9%;
}
.home_visual .building.area2-6 .-p2 {
	top: 26.2%;
	left: 16%;
	width: max(var(--cw) * 41 * 2 / var(--aspect), 41 * 2px);
	height: max(var(--cw) * 49 * 2 / var(--aspect), 49 * 2px);
	background: url(../img/home/people/mob_area2_block6_2.svg) 0 0 / 300% 100% no-repeat;
}
.home_visual .building.area2-6 .-p2.is-anime {
	animation: pushHeart 1s steps(2) both;
}
@keyframes pushHeart {
	from { background-position: left top; }
	50%, to { background-position: right top; }
}

/* :::::: 一丁目6番地 :::::: */
.home_visual .building.area1-6 {
	top: 40.76%;
	left: 72.35%;
}
/* ボタンを押すロボ */
.area1-6 .robot {
	position: absolute;
	top: 21.4%;
	left: 43.5%;
	width: max(var(--cw) * 39 * 2 / var(--aspect), 39 * 2px);
	height: max(var(--cw) * 54 * 2 / var(--aspect), 54 * 2px);
}
.area1-6 .robot,
.area1-6 .robot_body {
	display: grid;
}
.area1-6 .robot > *,
.area1-6 .robot_body > * {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}
.area1-6 :is(.robot_button,.robot_body1,.robot_body2) {
	background-image: url(../img/home/building/area1_block6_robot.svg);
	background-size: 500% 300%;
	background-repeat: no-repeat;
}
.area1-6 .robot_body {
	transform-origin: center bottom;
}
.area1-6 :is(.robot_body1,.robot_body2) {
	background-image: url(../img/home/building/area1_block6_robot.svg), url(../img/home/building/area1_block6_robot.svg), url(../img/home/building/area1_block6_robot.svg);
}
.area1-6 .robot_button {
	background-position: left top;
}
.area1-6 .robot_body1 {
	background-position: 75% center, left center, 25% center;
}
.area1-6 .robot_body2 {
	visibility: hidden;
	background-position: 75% bottom, left bottom, 25% bottom;
}
.area1-6 .robot.is-anime .robot_body {
	animation: bound 1.2s;
}
.area1-6 .robot.is-anime .robot_button {
	animation: robotButton 1s steps(1) both;
}
.area1-6 .robot.is-anime .robot_body1 {
	animation: quruli1 1s steps(1) both;
}
.area1-6 .robot.is-anime .robot_body2 {
	animation: quruli2 1s steps(1) both;
}
@keyframes quruli1 {
	from { visibility: visible; background-position: 75% center, left center, 25% center; }
	25% { visibility: visible; background-position: right center, left center, center center; }
	50%, to { visibility: hidden; }
}
@keyframes quruli2 {
	from, 25% { visibility: hidden; }
	50% { visibility: visible; background-position: 75% bottom, left bottom, 25% bottom; }
	to { visibility: visible; background-position: right bottom, left bottom, center bottom; }
}
@keyframes robotButton {
	from { background-position: left top; }
	to { background-position: 25% top; }
}
@keyframes bound {
	from, to { transform: none; }
	20% { transform: scaleY(.8); }
	40% { transform: translateY(-10%); }
	60% { transform: scaleY(.9); }
	80% { transform: scaleY(1.08); }
}
/* 女性 */
.area1-6 .people.-p1 {
	top: 30.2%;
	left: 52.4%;
}
/* キョロキョロ */
.area1-6 .people.-p2 {
	top: 60.6%;
	left: 24.8%;
}
/* 行ったり来たり */
.area1-6 .people.-p3 {
	display: grid;
	top: 43%;
	left: 72%;
	animation: roundTrip 6s linear alternate infinite both;
}
.area1-6 .people.-p3 > * {
	grid-area: 1 / 1;
	animation: roundTripSwitch 12s steps(2) infinite both;
}
.area1-6 .people.-p3 > *:first-child {
	animation-delay: -6s;
}
@keyframes roundTripSwitch {
	from { visibility: visible; }
	50%, to { visibility: hidden; }
}
@keyframes roundTrip {
	from { translate: 0 0; }
	to { translate: min(var(--cw) * -150 / var(--aspect), -150px) min(var(--cw) * -87 / var(--aspect), -87px); }
}

/* :::::: 一丁目奥5番地2（農園） :::::: */
.home_visual .building.area1-5_farm {
	top: 48.38%;
	left: 65.01%;
}
/* ドローンとロボ */
.home_visual .building.area1-5_farm .drone,
.home_visual .building.area1-5_farm .robot {
	position: absolute;
}
.home_visual .building.area1-5_farm .-d1 > * {
	scale: -1 1;
}
.home_visual .building.area1-5_farm .-d1 {
	top: 22.8%;
	left: 64.1%;
	--xTranslate: 56;
	animation: toLeftBottom 8s alternate infinite; /* ↙️ */
	animation-timing-function: cubic-bezier(.4,0,.6,1);
}
.home_visual .building.area1-5_farm .-d2 {
	top: 44%;
	left: 11%;
	--xTranslate: 96;
	animation: toRightBottom 12s alternate infinite; /* ↘️ */
	animation-timing-function: cubic-bezier(.4,0,.6,1);
}
.home_visual .building.area1-5_farm .-r1 {
	top: 18.2%;
	left: 48.2%;
}
.home_visual .building.area1-5_farm .-r2 {
	top: 38.5%;
	left: 29.2%;
}

/* :::::: 一丁目前5番地2 :::::: */
.home_visual .building.area1-5_2 {
	top: 63.09%;
	left: 75.56%;
}

/* :::::: 一丁目奥5番地1（コンサル） :::::: */
.home_visual .building.area1-5_consaru {
	top: 55.68%;
	left: 55.46%;
}
/* con/saruフキダシ */
.home_visual .building.area1-5_consaru :is(.con,.saru) {
	position: absolute;
}
.home_visual .building.area1-5_consaru .con {
	top: 22.6%;
	left: 38.4%;
	transform-origin: 40% bottom;
	animation: popConSaru 6s ease infinite both;
}
.home_visual .building.area1-5_consaru .saru {
	top: 16.8%;
	left: 52.2%;
	transform-origin: 32% bottom;
	animation: popConSaru 6s .2s ease infinite both;
}
@keyframes popConSaru {
	from, 84%, to { transform: scale(0); }
	4% { transform: scale(1.2) rotate(-8deg); }
	8% { transform: scale(.9) rotate(6deg); }
	12% { transform: scale(1.08) rotate(-4deg); }
	16% { transform: scale(.98) rotate(2deg); }
	20%, 80% { transform: scale(1); }
}

/* :::::: 一丁目前5番地1 :::::: */
.home_visual .building.area1-5_1 {
    top: 68.62%;
	left: 66.32%;
}

/* :::::: 二丁目5番地（TBビル） :::::: */
.home_visual .building.bank {
	top: 47.9%;
	left: 35.12%;
}
.home_visual .building.elevator {
	top: 46.04%;
	left: 38.98%;
}
.home_visual .building.tb {
	display: grid;
	top: 36%;
	left: 42.72%;
}
.home_visual .building.tb > * {
	grid-area: 1 / 1;
}
.home_visual .building.tb .emblem {
	z-index: 1;
	place-self: start;
}
/* 主人公 */
.building.tb .people.-p0 {
	top: 7.4%;
	left: 3.4%;
}
.tobeyond ~ .home_visual .building.tb .people.-p0 {
	visibility: hidden;
}
/* 仰ぐ人 */
.building.tb .people.-p1 {
	top: 23.4%;
	left: 33.6%;
}
/* 座る人 */
.building.tb .people.-p2 {
	top: 18.3%;
	left: 52.9%;
}
/* エントランスの人 */
.building.tb .people.-p3 {
	top: 82.8%;
	left: 21.8%;
}
/* エレベータ前 */
.building.tb .people.-p4 {
	top: 58.9%;
	left: .2%;
}

/* :::::: 最前5番地（土手） :::::: */
.home_visual .building.embankment {
	top: 68.52%;
	left: 80.74%;
}
/* 犬 */
.building.embankment .people.-dog {
	top: 51.1%;
	left: 33%;
}
/* 飼い主 */
.building.embankment .people.-p1 {
	top: 43%;
	left: 43%;
}
/* 歩く女性 */
.building.embankment .people.-p2 {
	top: 29%;
	left: 70%;
}

/* :::::: 三丁目4番地（アウトレット） :::::: */
.home_visual .building.area3-4 {
	display: grid;
	top: 46.8%;
	left: 9.3%;
}
.home_visual .building.area3-4 > * {
	grid-area: 1 / 1;
}

/* :::::: 二丁目4番地（医療） :::::: */
.home_visual .building.area2-4 {
	display: grid;
	place-items: start;
	top: 41.32%;
	left: 20.37%;
	width: max(var(--cw) * 495 * 2 / var(--aspect), 495 * 2px);
	height: max(var(--cw) * 508 * 2 / var(--aspect), 508 * 2px);
}
/* 観覧車 */
.home_visual .building.area2-4 .wheel {
	display: grid;
	place-items: start;
	z-index: 0;
	width: max(var(--cw) * 231 * 2 / var(--aspect), 231 * 2px);
	height: max(var(--cw) * 366 * 2 / var(--aspect), 366 * 2px);
}
.home_visual .building.area2-4 > *,
.home_visual .building.area2-4 .wheel > * {
	grid-area: 1 / 1;
	position: relative;
}
.home_visual .building.area2-4 .wheel > * {
	place-self: center;
}
.home_visual .building.area2-4 .wheel .center {
	place-self: end start;
}
.home_visual .building.area2-4 .wheel .pole {
	top: 7.4%;
	left: 10.3%;
}
.home_visual .building.area2-4 .wheel .body {
	top: -12.1%;
	left: 3.7%;
}
.home_visual .building.area2-4 .wheel .capsule {
	display: grid;
	width: max(var(--cw) * 60 * 2 / var(--aspect), 60px * 2);
	height: max(var(--cw) * 66 * 2 / var(--aspect), 66px * 2);
	top: calc(var(--t) * 1%);
	left: calc(var(--l) * 1%);
	background: url(../img/home/building/wheel_capsules.svg) var(--shift) / 500% 400% no-repeat;
}
.home_visual .building.area2-4 .wheel .capsule.-c1 { --shift: left 66.6666%; }
.home_visual .building.area2-4 .wheel .capsule.-c2 { --shift: 25% 66.6666%; }
.home_visual .building.area2-4 .wheel .capsule.-c3 { --shift: 50% 66.6666%; }
.home_visual .building.area2-4 .wheel .capsule.-c4 { --shift: 75% 66.6666%; }
.home_visual .building.area2-4 .wheel .capsule.-c5 { --shift: right 66.6666%; }
.home_visual .building.area2-4 .wheel .capsule.-c6 { --shift: left bottom; }
.home_visual .building.area2-4 .wheel .capsule.-c7 { --shift: 25% bottom; }
.home_visual .building.area2-4 .wheel .capsule.-c8 { --shift: 50% bottom; }
.home_visual .building.area2-4 .wheel .capsule.-c9 { --shift: 75% bottom; }
.home_visual .building.area2-4 .wheel .capsule.-c10 { --shift: right bottom; }
/* 頂上に来たら開く */
.home_visual .building.area2-4 .wheel .capsule.-c1.-d2 { --shift: left top; }
.home_visual .building.area2-4 .wheel .capsule.-c2.-d2 { --shift: 25% top; }
.home_visual .building.area2-4 .wheel .capsule.-c3.-d2 { --shift: 50% top; }
.home_visual .building.area2-4 .wheel .capsule.-c4.-d2 { --shift: 75% top; }
.home_visual .building.area2-4 .wheel .capsule.-c5.-d2 { --shift: right top; }
.home_visual .building.area2-4 .wheel .capsule.-c6.-d2 { --shift: left 33.3333%; }
.home_visual .building.area2-4 .wheel .capsule.-c8.-d2 { --shift: 50% 33.3333%; }
.home_visual .building.area2-4 .wheel .capsule.-c9.-d2 { --shift: 75% 33.3333%; }
.home_visual .building.area2-4 .wheel .capsule.-c10.-d2 { --shift: right 33.3333%; }
.home_visual .building.area2-4 .wheel .body:is(.rear,.front) {
	width: max(var(--cw) * 190 * 2 / var(--aspect), 190px * 2);
	height: max(var(--cw) * 228 * 2 / var(--aspect), 228px * 2);
	background: url(../img/home/building/wheel_shafts.svg) var(--shift) / 400% 200% no-repeat;
}
.home_visual .building.area2-4 .wheel .body.rear.-r1 { --shift: left top;  }
.home_visual .building.area2-4 .wheel .body.rear.-r2 { --shift: 33.3333% top;  }
.home_visual .building.area2-4 .wheel .body.rear.-r3 { --shift: 66.6666% top;  }
.home_visual .building.area2-4 .wheel .body.rear.-r4 { --shift: right top;  }
.home_visual .building.area2-4 .wheel .body.front.-r1 { --shift: left bottom;  }
.home_visual .building.area2-4 .wheel .body.front.-r2 { --shift: 33.3333% bottom;  }
.home_visual .building.area2-4 .wheel .body.front.-r3 { --shift: 66.6666% bottom;  }
.home_visual .building.area2-4 .wheel .body.front.-r4 { --shift: right bottom;  }
.home_visual .building.area2-4 .wheel:not(.deg1) .body.-r1,
.home_visual .building.area2-4 .wheel:not(.deg2) .body.-r2,
.home_visual .building.area2-4 .wheel:not(.deg3) .body.-r3,
.home_visual .building.area2-4 .wheel:not(.deg4) .body.-r4 {
	visibility: hidden;
}
.home_visual .building.area2-4 .wheel .front,
.home_visual .building.area2-4 .wheel .pole { z-index: 3; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d10,
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d10 { z-index: 2; }
.home_visual .building.area2-4 .wheel.deg4 .capsule:is(.-d1,.-d9,.-d10),
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d10,
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d9,
.home_visual .building.area2-4 .wheel.deg1 .capsule:is(.-d1,.-d9,.-d10) { z-index: 1; }
.home_visual .building.area2-4 .wheel.deg4 .capsule:is(.-d4,.-d5,.-d6),
.home_visual .building.area2-4 .wheel.deg3 .capsule:is(.-d3,.-d4,.-d5),
.home_visual .building.area2-4 .wheel.deg2 .capsule:is(.-d3,.-d4,.-d5),
.home_visual .building.area2-4 .wheel.deg1 .capsule:is(.-d3,.-d4,.-d5) { z-index: -1; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d5,
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d4,
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d4,
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d4 { z-index: -2; }
.home_visual .building.area2-4 .wheel .rear,
.home_visual .building.area2-4 .wheel .center { z-index: -3; }
/* rotate1 */
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d1 { --t: -39; --l: 3; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d2 { --t: -41.8; --l: 23.5; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d3 { --t: -34.5; --l: 36; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d4 { --t: -19.3; --l: 36.6; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d5 { --t: -2.3; --l: 24.8; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d6 { --t: 10; --l: 5; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d7 { --t: 13.8; --l: -15.6; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d8 { --t: 5.3; --l: -28.5; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d9 { --t: -10.3; --l: -28.8; }
.home_visual .building.area2-4 .wheel.deg1 .capsule.-d10 { --t: -27.3; --l: -17; }
/* rotate2 */
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d1 { --t: -37.6; --l: -1.3; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d2 { --t: -42.8; --l: 19.4; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d3 { --t: -37; --l: 34.8; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d4 { --t: -23; --l: 37.8; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d5 { --t: -6.1; --l: 27.7; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d6 { --t: 7.5; --l: 9.4; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d7 { --t: 12.9; --l: -10.7; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d8 { --t: 7; --l: -26.8; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d9 { --t: -6.8; --l: -30; }
.home_visual .building.area2-4 .wheel.deg2 .capsule.-d10 { --t: -23.9; --l: -20.5; }
/* rotate3 */
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d1 { --t: -35.6; --l: -6.2; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d2 { --t: -42.9; --l: 15; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d3 { --t: -39; --l: 32.8; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d4 { --t: -26.3; --l: 38.2; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d5 { --t: -9.6; --l: 31.1; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d6 { --t: 5.4; --l: 13.7; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d7 { --t: 12.9; --l: -7.4; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d8 { --t: 9.1; --l: -25; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d9 { --t: -3.5; --l: -30.8; }
.home_visual .building.area2-4 .wheel.deg3 .capsule.-d10 { --t: -20.4; --l: -23.6; }
/* rotate4 */
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d1 { --t: -32.9; --l: -10.7; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d2 { --t: -42.2; --l: 10.3; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d3 { --t: -40.5; --l: 29.7; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d4 { --t: -29.5; --l: 37.9; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d5 { --t: -13.3; --l: 32.9; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d6 { --t: 2.7; --l: 18.1; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d7 { --t: 11.8; --l: -3; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d8 { --t: 10.9; --l: -22.2; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d9 { --t: -0.2; --l: -30.5; }
.home_visual .building.area2-4 .wheel.deg4 .capsule.-d10 { --t: -16.9; --l: -26.6; }

.home_visual .building.area2-4 .slide,
.home_visual .building.area2-4 .medical {
	place-self: center;
}
.home_visual .building.area2-4 .slide {
	top: -4%;
	left: -8%;
}
.home_visual .building.area2-4 .medical {
	top: 14.9%;
	left: -11.1%;
}
.home_visual .building.area2-4 .brain {
	place-self: end;
	top: -2.38%;
	left: -0.15%;
}
/* 踊る子 */

/* 犬 */
.home_visual .building.area2-4 .brain .people.-dog {
	top: 76.7%;
	left: 11.8%;
}
/* 飼い主 */
.home_visual .building.area2-4 .brain .people.-p1 {
	top: 79.8%;
	left: 21%;
}
.home_visual .building.area2-4 .fence {
	place-self: end center;
	top: 0;
	left: 4.6%;
}

/* :::::: 三丁目3番地（宿泊） :::::: */
.home_visual .building.area3-3 {
	top: 51.08%;
	left: -1.79%;
}

/* :::::: 三丁目2番地 :::::: */
.home_visual .building.area3-2 {
	top: 65.52%;
	left: -5.42%;
}

/* :::::: 二丁目3番地（モール） :::::: */
.home_visual .building.area2-3 {
	top: 62.48%;
	left: 10.66%;
}
.area2-3 .people.-p1 {
	top: 80%;
	left: 64%;
}
.area2-3 .people.-p2 {
	top: 89%;
	left: 71.6%;
}

/* :::::: 二丁目2番地（ショッピング） :::::: */
.home_visual .building.area2-2 {
	top: 72.26%;
	left: -2.23%;
}
.area2-2 .people.-p1 {
	top: 50%;
	left: 41%;
}
.area2-2 .people.-p2 {
	top: 46%;
	left: 49%;
}

/* :::::: 二丁目1番地 :::::: */
.home_visual .building.area2-1 {
	top: 81.82%;
	left: -3.47%;
}

/* :::::: 駅の向こう1番地 :::::: */
.home_visual .building.behind3 {
	top: 71.23%;
	left: 24.24%;
}

/* :::::: 駅の向こう2番地 :::::: */
.home_visual .building.behind2 {
	top: 69.55%;
	left: 12.3%;
}

/* :::::: 駅の向こう3番地 :::::: */
.home_visual .building.behind1 {
	top: 88.4%;
	left: -1.03%;
}


/* :::::: 駅 :::::: */
.home_visual .building.station,
.home_visual .building.light,
.home_visual .building.tube {
	pointer-events: none;
}
.home_visual .building.station {
	display: grid;
	place-items: center;
	top: 72.88%;
	left: 7.42%;
	pointer-events: none;
}
.home_visual .building.station > * {
	grid-area: 1 / 1;
}
.home_visual .building.torch {
	top: 33.4%;
	left: 78.25%;
}
.home_visual .building.light {
	top: 40.17%;
	left: 12.25%;
}
.home_visual .building.tube {
	top: 40.17%;
	left: -2.6%;
	width: max(var(--cw) * 1657 * 2 / var(--aspect), 1657 * 2px);
	height: max(var(--cw) * 1010 * 2 / var(--aspect), 1010 * 2px);
	mask: url(../img/home/building/station_tube.svg) center / cover no-repeat;
}
.home_visual .building.tube .train {
	position: absolute;
	top: -37%;
	left: 100%;
}
.home_visual :where(.train) {
	animation: shinkansen 20s var(--easeOut) infinite;
	animation-delay: 5s;
}
@keyframes shinkansen {
	from { translate: none; }
	26% { translate: min(var(--cw) * -3000 / var(--aspect), -3000px) max(var(--cw) * 3000 * .58 / var(--aspect), 3000 * .58px); }
	60% { translate: min(var(--cw) * -3000 / var(--aspect), -3000px) max(var(--cw) * 3000 * .58 / var(--aspect), 3000 * .58px); animation-timing-function: cubic-bezier(.3,0,.7,0); }
	72%, to { translate: min(var(--cw) * -4680 / var(--aspect), -4680px) max(var(--cw) * 4680 * .58 / var(--aspect), 4680 * .58px); }
}
.station .people.-p1 {
	top: 36.4%;
	left: 70.2%;
}
.station .people.-p2 {
	top: 22.8%;
	left: 86.5%;
}
.station .people.-p3 {
	top: 53%;
	left: 74.8%;
}
.station .people.-p4 {
	top: 60.2%;
	left: 48.1%;
}
.station .people.-p5 {
	top: 65.4%;
	left: 53.8%;
}
.station .people.-p6 {
	top: 59.8%;
	left: 57.8%;
}
.station .people.-p7 {
	top: 67.6%;
	left: 58.2%;
}
.station .people.-p8 {
	top: 67.7%;
	left: 66%;
}


/* :::::: 一番手前 :::::: */
.home_visual .building.front {
	top: 84.15%;
	left: 35.33%;
}
.front .people.-p1 {
	top: 15.9%;
	left: 66.6%;
}





/**
 * マーカー
 * ---------------------------------------- */
.home_visual .markers {
	position: absolute;
	inset: 20% 14% 21% 14%;
	pointer-events: none;
}
.home_visual .marker {
	position: absolute;
	pointer-events: auto;
}
.home_visual .marker img {
	pointer-events: none;
}
/* MEMO: townをズームアウトしてる分2倍サイズで指定 */
.home_visual .marker_info {
	position: absolute;
	width: 480px;
	bottom: 48px;
	left: calc(50% - 240px);
	padding: calc(var(--basisgap) * .6) calc(var(--basisgap) * .4);
	border: 2px solid var(--themecolor);
	border-radius: calc(var(--radius) * 2);
	font-size: calc(28 * .0625rem);
	background: linear-gradient(to left, #d6ffffd9, #ffffffd9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	scale: .9;
	transform-origin: center bottom;
	transition: opacity .2s var(--easeOut), scale .2s var(--easeOut);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.home_visual .marker.is-active,
.home_visual .marker:has(:focus-visible) {
	z-index: 1;
}
.home_visual .marker.is-active .marker_info,
.home_visual .marker:has(:focus-visible) .marker_info {
	opacity: 1;
	scale: 1;
	pointer-events: auto;
}
.home_visual .marker_info dt {
	margin-inline: calc(var(--basisgap) * -.2);
	padding: .25em;
	border-radius: .2em;
	color: var(--themecolor);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	background: var(--accentcolor)
}
.home_visual .marker_info dt a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.home_visual .marker_info dd {
	margin-top: .75em;
	font-size: 85.7%
}
.home_visual .marker_icon {
	z-index: 1;
	position: absolute;
	width: 48px;
	bottom: 0;
	left: -24px;
	transform-origin: center bottom;
}
.home_visual .marker_icon span {
	display: block;
}
.home_visual .marker_icon img {
	width: 100%;
	height: auto;
}
.home_visual .markers.is-standby .marker_icon {
	opacity: 0;
}
.home_visual .markers.is-appear .marker_icon {
	animation: markerAppear .8s both;
	animation-delay: calc(var(--delay) * .05s);
}
@keyframes markerAppear {
	from { opacity: 0; transform: translateY(-50%); }
	25% { opacity: 1; transform: scale(1.12, .6); }
	50% { transform: scale(.9, 1.1); }
	75% { transform: none; }
	to { opacity: 1; }
}
.home_visual .markers.is-fix .marker_icon span {
	transform-origin: center bottom;
	animation: markerAttention 5s -2s;
	animation-delay: calc(var(--delay) * .05s);
}
.home_visual .markers.is-fix .marker_icon img {
	transform-origin: center bottom;
	animation: markerAttention2 5s -2s;
	animation-delay: calc(var(--delay) * .05s);
}
@keyframes markerAttention {
	from { transform: none; }
	5% { transform: scale(1.12, .6); animation-timing-function: cubic-bezier(.3,1,.7,1); }
	10% { transform: scale(.9, 1.1) translateY(-50%); animation-timing-function: cubic-bezier(.3,0,.7,0); }
	15% { transform: none; animation-timing-function: ease; }
	15.75% { transform: scale(1.08, .8); animation-timing-function: ease; }
	18%, to { transform: none; }
}
@keyframes markerAttention2 {
	from, 5% { transform: none; }
	15% { transform: rotateY(180deg); }
	15.01%, to { transform: none; }
}
.home_visual .marker:nth-child(1) .marker_icon { --delay: 1; }
.home_visual .marker:nth-child(2) .marker_icon { --delay: 2; }
.home_visual .marker:nth-child(3) .marker_icon { --delay: 3; }
.home_visual .marker:nth-child(4) .marker_icon { --delay: 4; }
.home_visual .marker:nth-child(5) .marker_icon { --delay: 5; }
.home_visual .marker:nth-child(6) .marker_icon { --delay: 6; }
.home_visual .marker:nth-child(7) .marker_icon { --delay: 7; }
.home_visual .marker:nth-child(8) .marker_icon { --delay: 8; }
.home_visual .marker:nth-child(9) .marker_icon { --delay: 9; }
.home_visual .marker:nth-child(10) .marker_icon { --delay: 10; }
.home_visual .marker:nth-child(11) .marker_icon { --delay: 11; }
.home_visual .marker:nth-child(12) .marker_icon { --delay: 12; }
.home_visual .marker:nth-child(13) .marker_icon { --delay: 13; }
.home_visual .marker:nth-child(14) .marker_icon { --delay: 14; }
.home_visual .marker:nth-child(15) .marker_icon { --delay: 15; }
/* グローバル事業 */
.home_visual .marker.-m1 {
	top: 12.58672%;
	left: 44.21148%;
}
/* クラウド事業 */
.home_visual .marker.-m2 {
	top: 20.84358%;
	left: 14.21348%;
}
/* DX事業 */
.home_visual .marker.-m3 {
	top: 22.12263%;
	left: 71.18584%;
}
/* 官公庁事業 */
.home_visual .marker.-m4 {
	top: 29.10044%;
	left: 27.64165%;
}
/* 製造業事業 */
.home_visual .marker.-m5 {
	top: 29.08331%;
	left: 80.75855%;
}
/* ロジスティクス事業 */
.home_visual .marker.-m6 {
	top: 34.46702%;
	left: 15.11874%;
}
/* エンベデッド事業 */
.home_visual .marker.-m7 {
	top: 35.64657%;
	left: 68.2379%;
}
/* 金融事業 */
.home_visual .marker.-m8 {
	top: 50.09647%;
	left: 31.21769%;
}
/* カーボンニュートラル事業 */
.home_visual .marker.-m9 {
	top: 60.47653%;
	left: 76.90761%;
}
/* 医療・製薬事業 */
.home_visual .marker.-m10 {
	top: 64.48701%;
	left: 24.27893%;
}
/* コンサルティング事業 */
.home_visual .marker.-m11 {
	top: 65.60719%;
	left: 64.08987%;
}
/* AI事業 */
.home_visual .marker.-m12 {
	top: 68.59698%;
	left: 34.52043%;
}
/* xR事業 */
.home_visual .marker.-m13 {
	top: 71.4279%;
	left: 79.16748%;
}
/* 鉄道事業 */
.home_visual .marker.-m14 {
	top: 74.25112%;
	left: 50.99372%;
}

/**
 * 超えTech
 * ---------------------------------------- */
.home_catchcopy {
	pointer-events: none;
	z-index: 1;
	position: absolute;
	inset: auto auto var(--basisgap) var(--stretchgap);
	max-width: calc(100% - var(--stretchgap) * 2);
	fill: var(--themecolor);
}
.home_catchcopy > * {
	width: 100%;
	height: auto;
}
@media screen and (max-width: 767.98px) {
	.home_catchcopy {
		bottom: max(25%, 144px);
	}
}

/**
 * ニュース
 * ---------------------------------------- */
.home_news {
	position: fixed;
	inset: auto 20px 96px auto;
	width: min(100% - 40px, 400px);
	height: 40px;
	padding-inline: 1em;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: calc(12 * .0625rem);
	line-height: 1;
	background: white;
	box-shadow: 1px 2px 8px #0003;
}
.news_label {
	color: var(--red);
	font-size: 133.3333%;
	font-family: var(--fontEn);
}
.home_news,
.home_news .news_list .item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	white-space: nowrap;
}
.home_news .news_list .item {
	column-gap: .5em;
}
.home_news .news_list {
	margin-left: .75em;
	padding-left: .75em;
	border-left: 1px solid var(--lightgray);
}
.home_news .news_list dt {
	color: var(--gray);
	font-size: 108.3333%;
	font-family: var(--fontEn);
}
.home_news .news_list dd {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.home_news .news_list a::before {
	content: "";
	position: absolute;
	inset: 0;
}
body:has(.page-home) .l-footer {
	display: none;
}