/**
 * JRASSの仕事マップ
 * ---------------------------------------- */
.p-jobmap {
	padding: 64px 0 0;
}
.jobmap_container {
	position: relative;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	background: #d3e6e7;
}
.jobmap_canvas {
	position: relative;
	width: 1334px;
	margin: 0 auto;
	padding: 80px 0 24px;
}
.jobmap_canvas .ground {
	position: relative;
	width: 1334px;
}
.jobmap_canvas .sky,
.jobmap_canvas .landscape {
	pointer-events: none;
}
.jobmap_canvas .landscape,
.jobmap_canvas .pinlist {
	position: absolute;
	top: 80px;
	right: 0;
	bottom: 0;
	left: 0;
}
.jobmap_canvas .sky {
	position: absolute;
	overflow: hidden;
	top: 0;
	right: calc(50% - 50vw);
	left: calc(50% - 50vw);
	height: 104px;
}
@media screen and (max-width: 1334px) {
	.jobmap_canvas .sky {
		right: 0;
		left: 0;
	}
}
@media screen and (max-width: 767px) {
	.jobmap_container {
		padding-bottom: 24px;
	}
	.jobmap_canvas {
		width: calc(1334px / 1.53);
		padding-top: calc(80px / 1.53);
		padding-bottom: calc(24px / 1.53);
	}
	.jobmap_canvas .ground {
		width: calc(1334px / 1.53);
	}
	.jobmap_canvas .landscape,
	.jobmap_canvas .pinlist {
		top: calc(80px / 1.53);
	}
	.jobmap_canvas .sky {
		height: calc(104px / 1.53);
	}
}
@media screen and (max-width: 479px) {
	.p-jobmap {
		padding-top: 48px ;
	}
}
/* マウスデバイスは画面を動かす UI になる */
html:not(.isTouch) .jobmap_container {
	height: 886px;
	overflow: hidden;
}
html:not(.isTouch) .jobmap_canvas {
	position: absolute;
	left: calc(50% - 667px);
}
@media screen and (max-width: 767px) {
	html:not(.isTouch) .jobmap_container {
		height: 600px;
	}
	html:not(.isTouch) .jobmap_canvas {
		left: calc(50% - 436px);
	}
}

/* :::::: 空 :::::: */
.jobmap_canvas .cloud {
	position: absolute;
	left: 0;
	animation: cloudFloating linear infinite;
	will-change: animation;
}
.jobmap_canvas .cloud.-c1 {
	bottom: 48%;
	width: 114px;
	animation-duration: 60s;
	animation-delay: -20s;
}
.jobmap_canvas .cloud.-c2 {
	bottom: 40%;
	width: 96px;
	animation-duration: 70s;
	animation-delay: -50s;
}
.jobmap_canvas .cloud.-c3 {
	bottom: 32%;
	width: 87px;
	animation-duration: 80s;
	animation-delay: -5s;
}
.jobmap_canvas .cloud.-c4 {
	bottom: 16%;
	width: 68px;
	animation-duration: 100s;
	animation-delay: -55s;
}
.jobmap_canvas .cloud.-c5 {
	bottom: 0;
	width: 38px;
	animation-duration: 120s;
	animation-delay: -8s;
}
@keyframes cloudFloating {
	from { transform: translateX(100vw); opacity: 0; }
	5%, 95% { opacity: 1; }
	to { transform: translateX(-100%); opacity: 0; }
}
@media screen and (max-width: 767px) {
	.jobmap_canvas .cloud.-c1 {
		width: calc(114px / 1.53);
	}
	.jobmap_canvas .cloud.-c2 {
		width: calc(96px / 1.53);
	}
	.jobmap_canvas .cloud.-c3 {
		width: calc(87px / 1.53);
	}
	.jobmap_canvas .cloud.-c4 {
		width: calc(68px / 1.53);
	}
	.jobmap_canvas .cloud.-c5 {
		width: calc(38px / 1.53);
	}
}

/* :::::: ピンたち :::::: */
:where(.pinlist) .pin {
	position: absolute;
}
:where(.pinlist) .pin a:hover > img,
:where(.pinlist) .pin .linkarea:hover + img {
	filter: drop-shadow(0 0 4px white);
}
.pinlist .pin a {
	display: block;
}
.pinlist .pin img {
	pointer-events: none;
}
.pinlist .linkarea {
	position: absolute;
	inset: 0;
	/*background: rgba(255,0,0,.2);*/
}
:where(.pinlist) .linkarea:focus-visible + img {
	border-radius: 2px;
	box-shadow: 0 0 0 2px #0e62c9, 0 0 0 3px rgba(255,255,255,.6);
}
.pinlist .marker {
	display: flex;
	justify-content: center;
	z-index: 1;
	position: absolute;
	width: 24px;
	height: 31px;
	padding-bottom: 6px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 700;
	color: white;
	background: url(../../jobmap/img/marker.svg) center / cover no-repeat;
	pointer-events: none;
}
.pinlist .marker::after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: calc(50% - 8px);
	width: 16px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0,0,0,.3), transparent );
}

/* :::::: 仕事マップの案内所 :::::: */
.p-guidance {
	right: 10%;
	bottom: 6%;
	width: 255px;
}
.p-guidance .title {
	display: grid;
	place-items: center;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 52%;
	padding: 0 16px;
}
.p-guidance .marker {
	top: -24px;
	left: calc(50% - 12px);
}
@media screen and (max-width: 767px) {
	.p-guidance {
		right: 12%;
		bottom: 4%;
		width: 166px;
	}
	.p-guidance .title {
		padding: 0 8px;
	}
}

/* :::::: 施設 :::::: */
.p-jrass {
	z-index: 1;
	top: -6%;
	left: 43%;
	width: 242px;
}
.p-jrass .marker {
	top: -1.5%;
	left: 30%;
}
.p-jrass .linkarea {
	clip-path: polygon(0 15%, 36% 0, 77% 18%, 77% 88%, 49% 100%, 0 100%);
}
.p-wins {
	z-index: 1;
	top: 22%;
	left: 66.5%;
	width: 229px;
}
.p-wins .marker {
	top: 7%;
	left: 32%;
}
.p-wins .linkarea {
	clip-path: polygon(0 10%, 21% 0, 77% 27%, 77% 90%, 50% 100%, 0 77%);
}
.p-entrance {
	top: 40.2%;
	left: 22.3%;
	width: 355px;
}
.p-entrance .marker {
	top: 18%;
	left: 29%;
}
.p-entrance .linkarea {
	z-index: 2;
	clip-path: polygon(0 40%, 49% 0, 63% 12%, 63% 25%, 11% 68%, 0 58%);
}
.p-racecourse {
	top: 29.3%;
	left: 9%;
	width: 373px;
}
.p-racecourse .marker {
	top: 27%;
	left: 15%;
}
.p-racecourse .linkarea {
	z-index: 2;
	clip-path: polygon(0 50%, 54% 0, 100% 0, 100% 48%, 45% 100%, 0 100%);
}
.p-database {
	z-index: 2;
	top: 36.5%;
	left: 39.1%;
	width: 251px;
}
.p-database .marker {
	top: -5%;
	left: 46%;
}
.p-database .linkarea {
	clip-path: polygon(39% 0, 61% 0, 86% 38%, 86% 55%, 96% 63%, 59% 88%, 13% 56%);
}
.p-jrass_s {
	top: -6.1%;
	left: 77.8%;
	width: 133px;
}
.p-jrass_s .marker {
	top: 16%;
	left: 12%;
}
.p-jrass_s .linkarea {
	clip-path: polygon(0 35%, 34% 0, 70% 10%, 70% 90%, 35% 100%, 0 88%);
}
.p-airplane {
	top: 24.5%;
	left: -12%;
	width: 184px;
	animation: airplaneFlight 30s linear infinite;
}
.p-airplane .marker {
	top: 11%;
	left: 54%;
}
.p-house {
	z-index: 1;
	top: 62.4%;
	left: 41.5%;
	width: 377px;
}
.p-house .marker {
	top: 47%;
	left: 30%;
}
.p-house .linkarea {
	clip-path: polygon(19% 63%, 34% 45%, 43% 66%, 43% 80%, 35% 89%, 19% 75%);
	/*clip-path: polygon(0 80%, 82% 0%, 87% 0%, 93% 6%, 93% 39%, 31% 100%, 6% 100%, 0% 93%);*/
}
@keyframes airplaneFlight {
	from { transform: none; opacity: 0; }
	2%, 98% { opacity: 1; }
	to { transform: translate(680px, -400px); opacity: 0; }
}
@media screen and (max-width: 767px) {
	.p-jrass {
		width: calc(242px / 1.53);
	}
	.p-wins {
		width: calc(229px / 1.53);
	}
	.p-entrance {
		width: calc(355px / 1.53);
	}
	.p-racecourse {
		width: calc(373px / 1.53);
	}
	.p-database {
		width: calc(251px / 1.53);
	}
	.p-jrass_s {
		width: calc(133px / 1.53);
	}
	.p-airplane {
		width: calc(184px / 1.53);
	}
	.p-house {
		width: calc(377px / 1.53);
	}
	@keyframes airplaneFlight {
		from, 10% { transform: none; opacity: 0; }
		12%, 88% { opacity: 1; }
		90%, to { transform: translate(444px, -261px); opacity: 0; }
	}
}

/* :::::: 景観 :::::: */
:where(.landscape) .obj {
	position: absolute;
}
.o-backoffice {
	top: 7.5%;
	left: 53.5%;
	width: 601px;
}
.o-stopcar {
	top: 43.7%;
	left: 80.8%;
	width: 130px;
}
.o-monument {
	top: 16%;
	left: 35%;
	width: 115px;
}
.o-building {
	z-index: 2;
	top: 49.5%;
	left: 75.6%;
	width: 166px;
}
.o-tree_front {
	z-index: 2;
	top: 47.8%;
	left: 63.8%;
	width: 112px;
}
.o-people {
	top: 19%;
	left: 6.5%;
	width: 1062px;
}
.o-tree {
	z-index: 1;
	top: 1.1%;
	left: 2.5%;
	width: 1100px;
}
.o-paddock {
	top: 58%;
	left: 26%;
	width: 168px;
}
.o-track {
	z-index: 2;
	top: 18%;
	left: 28%;
	width: 70px;
	animation: trackDrive 30s linear infinite;
}
.o-van {
	top: 24%;
	left: 72%;
	width: 38px;
	animation: vanDrive 20s linear infinite;
}
.o-van .front {
	position: absolute;
	animation: vanChange 20s 10s steps(2) infinite;
}
.o-van .rear {
	top: 55.5%;
	left: 75%;
	animation: vanChange 20s steps(2) infinite;
}
.o-car {
/*
	top: 66%;
	left: 74.2%;
*/
	top: 60%;
	left: 58.4%;
	width: 34px;
	animation: carDrive 30s linear infinite;
}
@keyframes trackDrive {
	from, 10% { transform: none; opacity: 0; }
	12%, 88% { opacity: 1; }
	90%, to { transform: translate(600px, 347px); opacity: 0; }
}
@keyframes vanDrive {
	from, 10% { transform: none; opacity: 0; }
	12% { opacity: 1; }
	49.9% { transform: translate(-275px, 158px); }
	50.1% { transform: translate(-280px, 158px); }
	88% { opacity: 1; }
	90%, to { transform: translate(-594px, -22px); opacity: 0; }
}
@keyframes vanChange {
	from, 49.9% { opacity: 0; }
	50.1%, to { opacity: 1; }
}
@media screen and (max-width: 767px) {
	.o-backoffice {
		width: calc(601px / 1.53);
	}
	.o-stopcar {
		width: calc(130px / 1.53);
	}
	.o-monument {
		width: calc(115px / 1.53);
	}
	.o-building {
		width: calc(166px / 1.53);
	}
	.o-tree_front {
		width: calc(112px / 1.53);
	}
	.o-people {
		width: calc(1062px / 1.53);
	}
	.o-tree {
		width: calc(1100px / 1.53);
	}
	.o-paddock {
		width: calc(168px / 1.53);
	}
	.o-track {
		width: calc(70px / 1.53);
	}
	.o-van {
		width: calc(38px / 1.53);
	}
	.o-car {
		width: calc(34px / 1.53);
	}
	@keyframes trackDrive {
		from, 10% { transform: none; opacity: 0; }
		12%, 88% { opacity: 1; }
		90%, to { transform: translate(392px, 227px); opacity: 0; }
	}
	@keyframes vanDrive {
		from, 10% { transform: none; opacity: 0; }
		12% { opacity: 1; }
		49.9% { transform: translate(-180px, 103px); }
		50.1% { transform: translate(-180px, 99px); }
		88% { opacity: 1; }
		90%, to { transform: translate(-388px, -21px); opacity: 0; }
	}
	@keyframes vanChange {
		from, 49.9% { opacity: 0; }
		50.1%, to { opacity: 1; }
	}
}

/* :::::: オープニングアニメーション :::::: */
.jobmap_canvas:not(.is-loaded) .pinlist .pin > img {
	opacity: 0;
	transform: translateY(-200px);
}
.jobmap_canvas:not(.is-loaded) .pinlist .marker {
	opacity: 0;
	transform: translateY(-120px);
}
.jobmap_canvas:not(.is-loaded) .pinlist .p-airplane > img {
	transform: translateY(40px);
}
.jobmap_canvas .pinlist .pin.is-anim > img,
.jobmap_canvas .pinlist .pin.is-anim .marker {
	transition: opacity .4s, transform .4s cubic-bezier(.7,0,.7,0);
}
.jobmap_canvas .pinlist .p-airplane.is-anim > img {
	transition-timing-function: cubic-bezier(.3,1,.7,1);
}
.jobmap_canvas .pinlist .pin.is-anim .marker {
	transition-duration: .3s;
}
.jobmap_canvas .pinlist .pin.is-anim.p-guidance > img   { transition-delay: .05s; }
.jobmap_canvas .pinlist .pin.is-anim.p-house > img      { transition-delay: .1s; }
.jobmap_canvas .pinlist .pin.is-anim.p-database > img   { transition-delay: .15s; }
.jobmap_canvas .pinlist .pin.is-anim.p-entrance > img   { transition-delay: .2s; }
.jobmap_canvas .pinlist .pin.is-anim.p-racecourse > img { transition-delay: .25s; }
.jobmap_canvas .pinlist .pin.is-anim.p-wins > img       { transition-delay: .3s; }
.jobmap_canvas .pinlist .pin.is-anim.p-jrass > img      { transition-delay: .35s; }
.jobmap_canvas .pinlist .pin.is-anim.p-jrass_s > img    { transition-delay: .4s; }
.jobmap_canvas .pinlist .pin.is-anim.p-airplane > img   { transition-delay: .45s; }

.jobmap_canvas .pinlist .pin.is-anim.p-guidance .marker   { transition-delay: .45s; }
.jobmap_canvas .pinlist .pin.is-anim.p-house .marker      { transition-delay: .5s; }
.jobmap_canvas .pinlist .pin.is-anim.p-database .marker   { transition-delay: .55s; }
.jobmap_canvas .pinlist .pin.is-anim.p-entrance .marker   { transition-delay: .6s; }
.jobmap_canvas .pinlist .pin.is-anim.p-racecourse .marker { transition-delay: .65s; }
.jobmap_canvas .pinlist .pin.is-anim.p-wins .marker       { transition-delay: .7s; }
.jobmap_canvas .pinlist .pin.is-anim.p-jrass .marker      { transition-delay: .75s; }
.jobmap_canvas .pinlist .pin.is-anim.p-jrass_s .marker    { transition-delay: .8s; }
.jobmap_canvas .pinlist .pin.is-anim.p-airplane .marker   { transition-delay: .85s; }


/* :::::: モーダルコンテンツ :::::: */
.p-jobmap_modal {
	text-align: center;
}
.p-jobmap_modal .modal_title {
	display: inline-grid;
	place-items: center;
	width: 340px;
	height: 159px;
	padding: 0 16px 74px;
	background: url(../../jobmap/img/modal_title.png) center / cover no-repeat;
}
.p-jobmap_modal .modal_section {
	margin-top: 64px;
}
.p-jobmap_modal .modal_section .title {
	padding-bottom: 8px;
	border-bottom-width: 3px;
	border-style: solid;
	border-image: url(../img/stripe_line.svg) 0 0 3 / 0 0 4px round;
	color: #27a23a;
	font-size: 18px;
	line-height: 1.4;
	font-family: "Midashi Go MB31", sans-serif;
}
.p-jobmap_modal .modal_section .image img {
	border-radius: 5px;
}
.p-jobmap_modal .modal_section p {
	margin-top: 8px;
	font-size: 14px;
}
.p-jobmap_modal .guidance_wrap .title .q {
	display: inline-block;
	position: relative;
	top: -.1em;
	width: 24px;
	height: 31px;
	margin-right: .3em;
	color: white;
	vertical-align: middle;
	background: url(../../jobmap/img/marker.svg) center / cover no-repeat;
}
.p-jobmap_modal .guidance_wrap .title .q img {
	width: 12px;
	margin-bottom: 6px;
}
@media screen and (min-width: 768px) {
	.p-jobmap_modal .modal_section {
		display: grid;
		grid-template: auto auto / 256px 1fr;
		align-items: center;
		column-gap: 40px;
		text-align: left;
	}
	.p-jobmap_modal .modal_section .title {
		grid-area: 1 / 2 / 2 / 3;
		align-self: flex-end;
	}
	.p-jobmap_modal .modal_section .image {
		grid-area: 1 / 1 / 3 / 2;
		align-self: flex-start;
	}
	.p-jobmap_modal .modal_section p {
		grid-area: 2 / 2 / 3 / 3;
		align-self: flex-start;
	}
	.p-jobmap_modal .guidance_wrap {
		display: flex;
		column-gap: 64px;
	}
	.p-jobmap_modal .guidance_wrap .modal_section {
		display: block;
	}
	.p-jobmap_modal .guidance_wrap .title {
		font-size: 22px;
		text-align: center;
	}
}
@media screen and (max-width: 767px) {
	.p-jobmap_modal .modal_section {
		display: flex;
		flex-direction: column;
		margin-top: 32px;
	}
	.p-jobmap_modal .modal_section .image {
		order: -1;
	}
	.p-jobmap_modal .modal_section .title {
		margin-top: .5em;
	}
	.p-jobmap_modal .modal_section p {
		font-size: 12px;
		text-align: left;
	}
	.p-jobmap_modal .guidance_wrap .title .q img {
		margin-bottom: 2px;
	}
}
@media screen and (max-width: 479px) {
	.p-jobmap_modal .modal_title {
		width: 260px;
		height: 122px;
		padding-bottom: 56px;
	}
}
@media screen and (max-width: 374px) {
	.p-jobmap_modal .modal_title {
		width: 224px;
		height: 104px;
		padding-bottom: 48px;
	}
}