@charset "utf-8";

#page-tower {
	display: grid;
	z-index: 0;
	position: relative;
	overflow-x: hidden;
	width: 100%;
	background: center bottom / 100% 100% no-repeat;
}
:where(#page-tower) > * {
	grid-column: 1;
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.jnr-tower_bg,
.jnr-tower_stars,
.jnr-tower_article {
	grid-row: 1;
}
.jnr-tower_intro {
	grid-row: 2;
}
@media (max-width: 767.98px) {
	#page-tower {
		--ratio: 3.75;
		background-image: url("../../content/images/careers/graduates/tower_bg_sp.svg");
	}
}
@media (min-width: 768px) {
	#page-tower {
		--ratio: 11.8;
		background-image: url("../../content/images/careers/graduates/tower_bg_pc.svg");
	}
}

/* :::::: standby :::::: */
#page-tower:not(.is-active) {
	pointer-events: none;
}
@media (max-width: 767.98px) {
	#page-tower:not(.is-active) .jnr-tower_future,
	#page-tower:not(.is-active) .jnr-tower_section {
		visibility: hidden;
	}
	.jnr-tower_article {
		min-height: calc(2887vw / var(--ratio));
	}
}
@media (min-width: 768px) {
	#page-tower:not(.is-active) .jnr-tower_future,
	#page-tower:not(.is-active) .jnr-tower_section,
	#page-tower:not(.is-active) .jnr-tower_bg img:not([src*="year"]) {
		display: none;
	}
}

/* :::::: intro :::::: */
.jnr-tower_intro {
	display: grid;
	align-items: center;
	height: max(100vh - var(--headerHeight) - 312vw / var(--ratio), 100vh - var(--headerHeight) - 312px);
	min-height: calc(240vw / var(--ratio));
	padding: 0 16px;
}
.jnr-tower_lead,
.jnr-tower_scroll {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
}
.jnr-tower_lead {
	align-items: start;
	gap: min(16vw / var(--ratio), 16px);
	width: fit-content;
}
.jnr-tower_lead span {
	position: relative;
}
.jnr-tower_lead span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: white;
}
.jnr-tower_scroll {
	justify-self: end;
	margin-right: -12px;
}
.jnr-tower_scroll [src*="scroll_1.svg"] {
	margin-top: 12px;
}
.jnr-tower_scroll [src*="scroll_3.svg"] {
	margin-top: 1px;
}
@media (hover) {
	.jnr-tower_scroll [src*="scroll_2.svg"] {
		transition: height .4s;
	}
	.jnr-tower_scroll [src*="scroll_2.svg"] {
		height: 20px;
	}
	.jnr-tower_scroll:hover [src*="scroll_2.svg"] {
		height: 51px;
		transition-duration: .2s;
	}
}
@media (max-width: 767.98px) {
	.jnr-tower_lead img {
		width: auto;
		height: calc(22vw / var(--ratio));
	}
	.jnr-tower_scroll {
		align-self: end;
		position: relative;
		top: calc(-24vw / var(--ratio));
		width: calc(24vw / var(--ratio));
	}
}
@media (min-width: 768px) {
	.jnr-tower_lead {
		margin: 0 auto;
	}
}
/* opening */
.jnr-tower_intro .jnr-tower_lead span,
.jnr-tower_intro .jnr-tower_lead span::after {
	clip-path: inset(0);
}
.jnr-tower_intro:not(.is-active) .jnr-tower_lead span {
	clip-path: inset(0 100% 0 0);
}
.jnr-tower_intro:not(.is-active) .jnr-tower_scroll {
	opacity: 0;
	transform: translateY(40px);
}
.jnr-tower_intro.is-active .jnr-tower_lead span::after {
	clip-path: inset(0 0 0 100%);
}
.jnr-tower_intro.is-anim .jnr-tower_lead span,
.jnr-tower_intro.is-anim .jnr-tower_lead span::after {
	transition: clip-path .4s var(--easeOut);
}
.jnr-tower_intro.is-anim .jnr-tower_lead span::after {
	transition-duration: .6s;
	transition-timing-function: var(--easeInOut);
}
.jnr-tower_intro.is-anim .jnr-tower_lead span:nth-child(2) { transition-delay: .1s; }
.jnr-tower_intro.is-anim .jnr-tower_lead span:nth-child(3) { transition-delay: .2s; }
.jnr-tower_intro.is-anim .jnr-tower_lead span:nth-child(1)::after { transition-delay: .3s; }
.jnr-tower_intro.is-anim .jnr-tower_lead span:nth-child(2)::after { transition-delay: .4s; }
.jnr-tower_intro.is-anim .jnr-tower_lead span:nth-child(3)::after { transition-delay: .5s; }
.jnr-tower_intro.is-anim .jnr-tower_scroll {
	transition: opacity .6s, transform .6s var(--easeOut);
	transition-delay: 1s;
}

/* :::::: article :::::: */
.jnr-tower_section {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: var(--top) 0 var(--bottom);
	border: 1px solid black;
	background: white;
}
#year-1995-1,
#year-1991,
#year-1982,
#year-1980 {
	margin-bottom: 0;
}
.jnr-tower_section[id] {
	scroll-margin-top: calc(var(--headerHeight) + var(--top));
}
.jnr-tower_section h2 {
	margin-top: calc(var(--top) * -1);
}
.jnr-tower_section p:first-of-type {
	font-size: calc(16vw / var(--ratio));
	line-height: 1;
}
.jnr-tower_section p:first-of-type img {
	--width: attr(width);
}
#year-2023 p:first-of-type img { --width: 281; }
#year-2022 p:first-of-type img { --width: 279; }
#year-2018 p:first-of-type img { --width: 216; }
#year-2013-2 p:first-of-type img { --width: 202; }
#year-2013-1 p:first-of-type img { --width: 202; }
#year-2008 p:first-of-type img { --width: 210; }
#year-2004 p:first-of-type img { --width: 240; }
#year-2003 p:first-of-type img { --width: 262; }
#year-1995-2 p:first-of-type img { --width: 198; }
#year-1995-1 p:first-of-type img { --width: 206; }
#year-1991 p:first-of-type img { --width: 166; }
#year-1982 p:first-of-type img { --width: 244; }
#year-1980 p:first-of-type img { --width: 183; }

.jnr-tower_section > svg {
	position: absolute;
	overflow: visible;
	height: auto;
	fill: white;
	stroke: black;
	stroke-miterlimit: 10;
}
@media (max-width: 767.98px) {
	.jnr-tower_section > svg {
		top: 48%;
		right: calc(100% - 4vw / var(--ratio));
	}
	.jnr-tower_section > svg[width="22"] {
		width: calc(22vw / var(--ratio));
	}
	.jnr-tower_section > svg[width="29"] {
		width: calc(29vw / var(--ratio));
	}
}
@media (min-width: 768px) {
	.jnr-tower_section > svg {
		top: 44%;
	}
	#year-2023 > svg,
	#year-2018 > svg,
	#year-2013-1 > svg,
	#year-2004 > svg,
	#year-1995-2 > svg,
	#year-1991 > svg {
		right: min(100% - 8vw / var(--ratio), 100% - 8px);
	}
	#year-2022 > svg,
	#year-2013-2 > svg,
	#year-2008 > svg,
	#year-2003 > svg,
	#year-1995-1 > svg,
	#year-1982 > svg,
	#year-1980 > svg {
		left: min(100% - 8vw / var(--ratio), 100% - 8px);
	}
}
.jnr-tower_section .jnr-paragraph {
	padding-top: 1em;
	border-top: 1px solid black;
	letter-spacing: .03em;
}
.jnr-tower_section .jnr-button {
	margin: 0 auto calc(var(--bottom) * -1);
}
/* effect */
.jnr-tower_section {
	transition: opacity .2s, transform .2s var(--easeOut);
}
.jnr-tower_section.is-active {
	transition-duration: .4s;
	transition-timing-function: var(--easeBack);
}
.jnr-tower_section:not(.is-active) {
	opacity: 0;
	transform: scale(.9);
}
@media (max-width: 767.98px) {
	.jnr-tower_article {
		--futureSize: calc(606vw / var(--ratio));
		display: flex;
		flex-direction: column-reverse;
		align-items: end;
		gap: calc(24vw / var(--ratio));
	}
	.jnr-tower_future {
		height: var(--futureSize);
	}
	.jnr-tower_section {
		--top: min(40vw / var(--ratio), 48px);
		--bottom: calc(20vw / var(--ratio));
		gap: min(16vw / var(--ratio), 16px);
		width: calc(216vw / var(--ratio));
		padding: 0 calc(16vw / var(--ratio));
		border-radius: calc(24vw / var(--ratio));
	}
	#year-1995-1,
	#year-1991,
	#year-1982,
	#year-1980 {
		padding-bottom: calc(24vw / var(--ratio));
	}
	#year-1980 {
		margin-bottom: calc(24vw / var(--ratio));
	}
	.jnr-tower_section h2 {
		margin-top: calc(var(--top) * -1);
	}
	.jnr-tower_section h2 img {
		width: min(160vw / var(--ratio), 246px);
	}
	.jnr-tower_section p:first-of-type img {
		width: min(var(--width) * .75vw / var(--ratio), var(--width) * 1px);
	}
	.jnr-tower_section .jnr-paragraph {
		font-size: min(12vw / var(--ratio), .9375rem);
	}
	.jnr-tower_section .jnr-button img {
		width: calc(96vw / var(--ratio));
	}
}
@media (min-width: 768px) {
	.jnr-tower_article {
		display: grid;
		grid-template-rows: min-content;
		grid-template-columns: min(336vw / var(--ratio), 336px) 1fr min(336vw / var(--ratio), 336px);
		align-items: end;
		gap: min(32vw / var(--ratio), 32px);
		padding-bottom: min(168vw / var(--ratio), 168px);
	}
	.jnr-tower_section {
		--top: min(56vw / var(--ratio), 56px);
		--bottom: min(24vw / var(--ratio), 24px);
		gap: min(16vw / var(--ratio), 16px);
		padding: 0 min(32vw / var(--ratio), 32px);
		border-radius: min(48vw / var(--ratio), 48px);
	}
	.jnr-tower_section:nth-of-type(2n) {
		grid-column: 1;
	}
	.jnr-tower_section:nth-of-type(2n+1) {
		grid-column: 3;
	}
	.jnr-tower_future {
		grid-column: 1 / 4;
	}
	#year-1995-1,
	#year-1991,
	#year-1982,
	#year-1980   { padding-bottom: min(40vw / var(--ratio), 40px); }
	#year-2013-1 { margin-bottom: max(-96vw / var(--ratio), -96px); }
	#year-2004   { margin-bottom: max(-120vw / var(--ratio), -120px); }
	#year-1995-2 { margin-bottom: max(-112vw / var(--ratio), -112px); }
	#year-2023   { grid-row: 2 / span 2; }
	#year-2018   { grid-row: 4 / span 2; }
	#year-2013-1 { grid-row: 6 / span 2; }
	#year-2004   { grid-row: 8 / span 2; }
	#year-1995-2 { grid-row: 10 / span 2; }
	#year-1991   { grid-row: 12 / span 2; }
	#year-2022   { grid-row: 3 / span 2; }
	#year-2013-2 { grid-row: 5 / span 2; }
	#year-2008   { grid-row: 7 / span 2; }
	#year-2003   { grid-row: 9 / span 2; }
	#year-1995-1 { grid-row: 11 / span 2; }
	#year-1982   { grid-row: 13 / span 2; }
	#year-1980   { grid-row: 15; grid-column: 1; }
	.jnr-tower_section p:first-of-type img {
		width: min(var(--width) * 1vw / var(--ratio), var(--width) * 1px);
	}
	.jnr-tower_section .jnr-paragraph {
		font-size: min(15vw  / var(--ratio), .9375rem);
	}
	.jnr-tower_section .jnr-button img {
		width: min(175vw / var(--ratio), 175px);
	}
}

/* :::::: 日本ノーベルのわくわくする未来たち :::::: */
.jnr-tower_future h2 {
	display: grid;
	place-items: center;
	position: relative;
	box-sizing: content-box;
}
.jnr-tower_future h2 > * {
	grid-area: 1 / 1;
}
.jnr-tower_future [src*="cloud_rear.png"] {
	z-index: -1;
	align-self: start;
}
.jnr-tower_future [src*="cloud_front.png"] {
	align-self: end;
}
.jnr-tower_future [src*="people.png"] {
	position: absolute;
	bottom: 50%;
}
.jnr-tower_future picture {
	z-index: 1;
	align-self: end;
}
.jnr-tower_future h2 > *,
.jnr-tower_future .jnr-future_topics li {
	transition: opacity .2s, transform .2s var(--easeOut);
}
.jnr-tower_future.is-active h2 > *,
.jnr-tower_future.is-active .jnr-future_topics li {
	transition-duration: .4s;
	transition-timing-function: var(--easeBack);
}
.jnr-tower_future.is-active h2 img[src*="people"] { transition-delay: .2s; }
.jnr-tower_future.is-active .jnr-future_topics li:nth-child(1) { transition-delay: .3s; }
.jnr-tower_future.is-active .jnr-future_topics li:nth-child(2) { transition-delay: .4s; }
.jnr-tower_future.is-active .jnr-future_topics li:nth-child(3) { transition-delay: .5s; }
.jnr-tower_future.is-active .jnr-future_topics li:nth-child(4) { transition-delay: .6s; }

.jnr-tower_future:not(.is-active) h2 > *,
.jnr-tower_future:not(.is-active) .jnr-future_topics li {
	opacity: 0;
	transform: scale(.9);
}
.jnr-tower_future:not(.is-active) h2 img[src*="people"] {
	--y: min(24vw / var(--ratio), 40px);
	transform: translateY(var(--y));
}

.jnr-future_topics a,
.jnr-future_topics li:not(:last-child) {
	display: grid;
	place-items: center;
}
.jnr-future_topics a > *,
.jnr-future_topics li:not(:last-child) > * {
	grid-area: 1 / 1;
}
.jnr-tower_future img {
	--width: attr(width);
}
.jnr-tower_future > img {
	position: absolute;
}
img[src*="people.png"] { --width: 139; }
img[src*="rocket.png"] { --width: 270; }
img[src*="ufo.png"]    { --width: 255; }
img[src*="mars.png"]   { --width: 201; }
img[src*="saturn.png"] { --width: 337; }
img[src*="crew.png"]   { --width: 78; }
img[src*="alien.png"]  { --width: 73; }
img[src*="topic1.svg"] { --width: 179; }
img[src*="topic2.svg"] { --width: 139; }
img[src*="topic3.svg"] { --width: 130; }
img[src*="message.svg"] { --width: 185; }
img[src*="more.svg"]   { --width: 109; }
.jnr-future_topics img[src*="topic1.svg"] { transform: translate(14%, -100%) rotate(-25deg); }
.jnr-future_topics img[src*="topic2.svg"] { transform: translate(-3%, 2%) rotate(-20deg); }
.jnr-future_topics img[src*="topic3.svg"] { transform: translate(5%, 2%) rotate(10deg); }
.jnr-future_topics img[src*="message.svg"] { transform: translate(0, -64%) rotate(-8deg); }
.jnr-future_topics img[src*="more.svg"] { transform: translate(40%, 40%) rotate(-8deg); }

@media (max-width: 767.98px) {
	.jnr-tower_future {
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		padding-top: calc(12vw / var(--ratio));
	}
	.jnr-tower_future h2 {
		order: 1;
		width: calc(453vw / var(--ratio));
		height: calc(138vw / var(--ratio));
		margin-top: calc(24vw / var(--ratio));
		margin-left: calc(-142vw / var(--ratio));
	}
	.jnr-tower_future picture {
		width: calc(226vw / var(--ratio));
		margin-bottom: calc(18vw / var(--ratio));
		margin-left: calc(64vw / var(--ratio));
	}
	.jnr-tower_future picture img {
		width: 100%;
	}
	.jnr-tower_future img {
		width: calc(var(--width) * .5vw / var(--ratio));
	}
	.jnr-tower_future [src*="people.png"] { bottom: 42%; right: 15%; }
	.jnr-tower_future [src*="people.png"]:last-of-type { display: none; }
	.jnr-tower_future img[src*="crew.png"] { top: 19%; right: 37%; }
	.jnr-tower_future img[src*="alien.png"] { top: 53%; right: 2%; }
	.jnr-future_topics {
		display: flex;
		flex-direction: column-reverse;
		width: 48%;
		margin-left: auto;
	}
	.jnr-future_topics > :nth-child(2n) { align-self: start; }
	.jnr-future_topics > :nth-child(2n+1) { align-self: end; }
	.jnr-future_topics > :nth-child(3) { margin-top: calc(16vw / var(--ratio)); }
}
@media (min-width: 768px) {
	.jnr-tower_future {
		position: relative;
		height: min(776vw / var(--ratio), 776px);
	}
	.jnr-tower_future h2 {
		position: absolute;
		inset: 0;
		top: auto;
		width: min(906vw / var(--ratio), 906px);
		height: min(276vw / var(--ratio), 276px);
		margin: 0 auto;
		padding-right: min(52vw / var(--ratio), 52px);
	}
	.jnr-tower_future picture {
		width: min(656vw / var(--ratio), 656px);
		margin-bottom: min(64vw / var(--ratio), 64px);
	}
	.jnr-tower_future img {
		width: min(var(--width) * 1vw / var(--ratio), var(--width) * 1px);
	}
	.jnr-tower_future [src*="people.png"]:not(:last-of-type) { left: 20%; }
	.jnr-tower_future [src*="people.png"]:last-of-type { right: 20%; }
	.jnr-tower_future img[src*="crew.png"] { top: 12%; right: 26%; }
	.jnr-tower_future img[src*="alien.png"] { top: 56%; right: 10%; }
	.jnr-future_topics li {
		position: absolute;
	}
	.jnr-future_topics li:nth-of-type(1) { left: 4%; top: 45%; }
	.jnr-future_topics li:nth-of-type(2) { left: -5%; top: 15%; }
	.jnr-future_topics li:nth-of-type(3) { left: 16%; top: 4%; }
	.jnr-future_topics li:nth-of-type(4) { right: -4%; top: 20%; }
}

/* :::::: illust :::::: */
.jnr-tower_bg {
	z-index: -1;
	display: flex;
	flex-direction: column-reverse;
	justify-content: end;
	padding-bottom: 3px;
}
.jnr-tower_stars img,
img[src*="illust"] {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.jnr-tower_bg img {
	--width: attr(width);
	position: absolute;
}
.jnr-tower_bg img[src*="1990.png"] { --width: 432; }
.jnr-tower_bg img[src*="2000.png"] { --width: 454; }
.jnr-tower_bg img[src*="2010.png"] { --width: 424; }
.jnr-tower_bg img[src*="2020.png"] { --width: 442; }

img[src*="parachute.png"] { --width: 374; }
img[src*="superman.png"] { --width: 274; }
img[src*="bird.png"] { --width: 120; }
img[src*="plane.png"] { --width: 272; }
img[src*="balloon.png"] { --width: 118; }
img[src*="cloud1.png"] { --width: 102; }
img[src*="cloud2.png"] { --width: 138; }
img[src*="cloud3.png"] { --width: 302; }
img[src*="cloud4.png"] { --width: 378; }
img[src*="cloud5.png"] { --width: 360; }

img[src*="beer.png"] { --width: 232; }
img[src*="cat.png"] { --width: 82; }
img[src*="cheer.png"] { --width: 187; }
img[src*="telescope.png"] { --width: 254; }
img[src*="cactus.png"] { --width: 78; }
img[src*="smartphone.png"] { --width: 174; }
img[src*="kanpai.png"] { --width: 300; }
img[src*="baby.png"] { --width: 92; }
img[src*="girl.png"] { --width: 102; }
img[src*="brother.png"] { --width: 76; }
img[src*="workman.png"] { --width: 108; }
img[src*="boy.png"] { --width: 138; }
img[src*="daiku1.png"] { --width: 138; }
img[src*="daiku2.png"] { --width: 162; }
img[src*="climb1.png"] { --width: 128; }
img[src*="climb2.png"] { --width: 94; }
img[src*="climb3.png"] { --width: 124; }
img[src*="climb4.png"] { --width: 84; }
img[src*="climb5.png"] { --width: 132; }

.jnr-tower_bg::before,
.jnr-tower_bg::after {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0 var(--breakout);
	margin: 0 auto;
	background: center bottom / contain no-repeat;
}
.jnr-tower_bg::before {
	background-image: url("../../content/images/careers/graduates/tower_town.svg");
}
.jnr-tower_bg::after {
	max-width: 1280px;
	background-image: url("../../content/images/careers/graduates/tower_ground.png");
}
.jnr-tower_floor {
	position: relative;
}
.jnr-tower_floor img[src*="2020.png"],
.jnr-tower_floor img[src*="2010.png"],
.jnr-tower_floor img[src*="2000.png"],
.jnr-tower_floor img[src*="1990.png"] {
	top: 72.3%;
	left: 14.3%;
}
.jnr-tower_floor img[src*="2020.png"] {
	top: 48%;
}
.jnr-tower_floor img[src*="1990.png"] {
	top: 48.2%;
}
.jnr-tower_floor div {
	position: absolute;
	inset: 0;
	background: url("../../content/images/careers/graduates/tower.png") center bottom / contain no-repeat;
}
.jnr-tower_floor[data-floor="entrance"] div {
	background-image: url("../../content/images/careers/graduates/tower_entrance.png");
}
@media (max-width: 767.98px) {
	.jnr-tower_bg {
		position: absolute;
		overflow: hidden;
		top: 0;
		left: calc(var(--sidegap) * -1);
		width: calc(100% + var(--sidegap));
		padding-inline: var(--sidegap);
	}
	.jnr-tower_bg::after {
		background-size: calc(640vw / var(--ratio)) auto;
		background-position: 80% bottom;
	}
	.jnr-tower_bg img {
		width: calc(var(--width) * .25vw / var(--ratio));
	}
	.jnr-tower_floor {
		height: calc(505vw / var(--ratio));
	}
	.jnr-tower_floor div {
		width: calc(160vw / var(--ratio));
		margin-left: 4.8%;
	}
	.jnr-tower_floor[data-floor="entrance"] {
		height: calc(157vw / var(--ratio));
	}
	.jnr-tower_floor[data-floor="future"] {
		height: calc(505vw / var(--ratio) * 1.4);
	}
	.jnr-tower_floor[data-floor="future"] div {
		background-repeat: repeat-y;
	}
}
@media (min-width: 768px) {
	.jnr-tower_bg::after {
		background-size: min(1280vw / var(--ratio), 1280px) auto;
	}
	.jnr-tower_bg img {
		width: min(var(--width) * .5vw / var(--ratio), var(--width) * .5px);
	}
	.jnr-tower_floor {
		height: min(1010vw / var(--ratio), 1010px);
	}
	.jnr-tower_floor[data-floor="future"] {
		margin-top: max(-56vw / var(--ratio), -56px);
	}
	.jnr-tower_floor[data-floor="entrance"] {
		height: min(314vw / var(--ratio), 314px);
	}
	.jnr-tower_floor div {
		width: min(308vw / var(--ratio), 308px);
		margin: 0 auto;
	}
}
.jnr-tower_floor[data-floor="future"] img[src*="beer.png"] { left: 0; }

.jnr-tower_floor[data-floor="2020"] img[src*="daiku2.png"]  { bottom: -.6%; left: 25%; }
.jnr-tower_floor[data-floor="2020"] img[src*="climb4.png"]  { top: 62%; left: -2%; }
.jnr-tower_floor[data-floor="2020"] img[src*="cheer.png"]   { top: 40.7%; right: 13%; }
.jnr-tower_floor[data-floor="2020"] img[src*="climb5.png"]  { top: 7%; right: -7%; }
.jnr-tower_floor[data-floor="2020"] img[src*="cat.png"]     { top: 17.8%; left: 23%; }
.jnr-tower_floor[data-floor="2020"] img[src*="cloud5.png"]:last-child { --width: 240; }
@media (max-width: 767.98px) {
	.jnr-tower_floor[data-floor="future"] img[src*="beer.png"] { bottom: calc(-17vw / var(--ratio)); }
	.jnr-tower_floor[data-floor="2020"] img[src*="parachute.png"] { top: -22%; right: 2%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="superman.png"] { top: -1%; left: 54%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud1.png"] { top: 10%; left: 60%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud5.png"] { top: 32%; left: -12%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud5.png"]:last-child { top: 58%; left: 44%; }
}
@media (min-width: 768px) {
	.jnr-tower_floor[data-floor="future"] img[src*="beer.png"] { bottom: max(-34vw / var(--ratio), -34px); }
	.jnr-tower_floor[data-floor="2020"] img[src*="parachute.png"] { top: -12%; left: 6%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="superman.png"] { top: 16%; left: 3%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud1.png"] { top: 10%; left: 20%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud5.png"] { top: 14%; left: 23%; }
	.jnr-tower_floor[data-floor="2020"] img[src*="cloud5.png"]:last-child { top: 96%; }
}
.jnr-tower_floor[data-floor="2010"] img[src*="climb3.png"]  { top: 77%; left: -6%; }
.jnr-tower_floor[data-floor="2010"] img[src*="smartphone.png"] { top: 62.8%; right: -5%; }
.jnr-tower_floor[data-floor="2010"] img[src*="daiku1.png"]  { top: 42.9%; left: 0; }
.jnr-tower_floor[data-floor="2010"] img[src*="cactus.png"]  { top: 42.9%; left: 24%; }
.jnr-tower_floor[data-floor="2010"] img[src*="telescope.png"] { top: 15.1%; right: 4%; }
@media (max-width: 767.98px) {
	.jnr-tower_floor[data-floor="2010"] img[src*="bird.png"]    { top: 28%; left: 50%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="plane.png"]   { top: 8%; right: 0; }
	.jnr-tower_floor[data-floor="2010"] img[src*="balloon.png"] { top: 60%; left: -2%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud1.png"] { top: 60%; left: 50%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud5.png"] { top: 8%; left: -8%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud4.png"] { top: 32%; right: 0; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud4.png"]:last-child { top: 85%; left: 32%; }
}
@media (min-width: 768px) {
	.jnr-tower_floor[data-floor="2010"] img[src*="bird.png"]    { top: 28%; right: 25%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="plane.png"]   { top: 30%; right: -5%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="balloon.png"] { top: 60%; left: -4%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud1.png"] { top: 62%; left: 20%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud5.png"] { top: 62%; left: 25%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud4.png"] { top: 32%; left: 55%; }
	.jnr-tower_floor[data-floor="2010"] img[src*="cloud4.png"]:last-child { top: 95%; left: 52%; }
}
.jnr-tower_floor[data-floor="2000"] img[src*="girl.png"]    { bottom: -.3%; left: 16%; }
.jnr-tower_floor[data-floor="2000"] img[src*="climb2.png"]  { top: 55.4%; right: -5%;}
.jnr-tower_floor[data-floor="2000"] img[src*="baby.png"]    { top: 41%; right: 24%; }
.jnr-tower_floor[data-floor="2000"] img[src*="daiku2.png"]  { top: 43%; left: 25%; }
.jnr-tower_floor[data-floor="2000"] img[src*="kanpai.png"]  { top: 14.1%; left: 25%; }
@media (max-width: 767.98px) {
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud4.png"] { top: 56%; left: -8%; }
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud1.png"] { top: 48%; right: 2%; }
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud5.png"] { top: 82%; left: 44%; }
}
@media (min-width: 768px) {
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud4.png"] { top: 31%; left: 24%; }
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud1.png"] { top: 83%; left: 66%; }
	.jnr-tower_floor[data-floor="2000"] img[src*="cloud5.png"] { top: 87%; left: 52%; }
}
.jnr-tower_floor[data-floor="1990"] img[src*="climb1.png"]  { top: 88%; right: -8%; }
.jnr-tower_floor[data-floor="1990"] img[src*="daiku1.png"]  { top: 68.3%; left: 13%; }
.jnr-tower_floor[data-floor="1990"] img[src*="workman.png"] { top: 40.2%; left: 22%; }
.jnr-tower_floor[data-floor="1990"] img[src*="boy.png"]     { top: 40.7%; right: 18%; }
.jnr-tower_floor[data-floor="1990"] img[src*="brother.png"] { top: 11.6%; right: 20%; }
@media (max-width: 767.98px) {
	.jnr-tower_floor[data-floor="1990"] img[src*="bird.png"]    { top: 8%; right: 0; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud2.png"] { top: 62%; left: 50%; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud1.png"] { top: 32%; left: 2%; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud5.png"] { top: 65%; left: 57%; }
}
@media (min-width: 768px) {
	.jnr-tower_floor[data-floor="1990"] img[src*="bird.png"]    { top: 82%; right: 8%; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud2.png"] { top: 62%; left: 28%; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud1.png"] { top: 90%; left: 68%; }
	.jnr-tower_floor[data-floor="1990"] img[src*="cloud5.png"] { top: 90%; left: 74%; }
}

/**
 * モーダルコンテンツ
 * ---------------------------------------- */
.jnr-modal,
.jnr-modal_overlay {
	z-index: 3;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
}
.jnr-modal {
	display: grid;
	place-items: center;
	overflow: hidden;
}
.jnr-modal:not(.is-open) {
	visibility: hidden;
	pointer-events: none;
}
.jnr-modal_overlay {
	z-index: -1;
	background: #ffffb1ee;
	backdrop-filter: blur(8px);
}
.jnr-modal_container {
	--bis: 24px;
	display: grid;
	position: relative;
}
.jnr-modal_container > * {
	grid-area: 1 / 1;
}
.jnr-modal_container .jnr-bis {
	z-index: 1;
	width: 12px;
	height: 12px;
}
.jnr-modal_container .jnr-modal_top,
.jnr-modal_container .jnr-modal_frame,
.jnr-modal_container .jnr-modal_btm {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 32px;
}
.jnr-modal_container .jnr-modal_top {
	bottom: auto;
}
.jnr-modal_container .jnr-modal_frame {
	height: calc(100% - 62px);
	margin: auto 0;
}
.jnr-modal_container .jnr-modal_btm {
	top: auto;
}
@media (max-width: 767.98px) {
	.jnr-modal_container {
		position: absolute;
		inset: 24px 24px 16px 24px;
		width: calc(100% - 48px);
		height: 560px;
		max-height: calc(100% - 40px);
		margin: auto 0;
	}
}
@media (min-width: 768px) {
	.jnr-modal_container {
		width: 696px;
		min-height: 456px;
	}
}

/* content */
.jnr-modal_content {
	display: grid;
	place-items: center;
	z-index: 1;
}
.jnr-modal_inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 64px 80px;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-image: url("../../content/images/careers/graduates/tower_modal.svg");
	mask-image: url("../../content/images/careers/graduates/tower_modal.svg");
}
.jnr-modal_content h2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	gap: 12px;
}
.jnr-modal_content h2 span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
}
.jnr-modal_content .jnr-paragraph {
	font-size: min(12vw / 3.75, .9375rem);
	letter-spacing: .05em;
}
.jnr-modal_content .jnr-paragraph img {
	margin-bottom: .5em;
}
.jnr-modal_content button {
	cursor: pointer;
	align-self: end;
}
.jnr-modal_content > img[src*=".png"] {
	pointer-events: none;
	width: calc(var(--width) * .5px);
	position: absolute;
}
.jnr-modal_content img[src*="brother.png"]    { top: 20%; left: max(-24vw / 7.68, -24px); }
.jnr-modal_content img[src*="girl.png"]       { top: min(40vw / 7.68, 40px); right: min(64vw / 7.68, 64px); }
.jnr-modal_content img[src*="climb2.png"]     { top: 30%; right: max(-17vw / 7.68, -17px); }
.jnr-modal_content img[src*="kanpai.png"]     { top: max(-48vw / 7.68, -48px); right: 12%; }
.jnr-modal_content img[src*="smartphone.png"] { bottom: 0; left: 10%; }
.jnr-modal_content img[src*="daiku1.png"]     { bottom: 0; left: 10%; }
.jnr-modal_content img[src*="telescope.png"]  { top: max(-32vw / 7.68, -32px); right: 10%; }
.jnr-modal_content img[src*="climb4.png"]     { top: 50%; left: max(-8vw / 7.68, -8px); }
.jnr-modal_content img[src*="climb5.png"]     { top: 20%; right: max(-32vw / 7.68, -32px); }
@media (max-width: 767.98px) {
	.jnr-modal_inner {
		gap: 16px;
		overflow: auto;
		position: absolute;
		inset: 1px 1px 0;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-inline: calc(40vw / 3.75);
	}
	.jnr-modal_inner > :first-child {
		margin-top: auto;
	}
	.jnr-modal_inner > :last-child {
		margin-bottom: auto;
	}
}
@media (max-width: 575.98px) {
	.jnr-modal_content > img[src*=".png"] {
		width: calc(var(--width) * .3vw / 3.75);
	}
}
/* スクロールバーを消す */
@media (hover) {
	.jnr-modal_inner {
		scrollbar-width: none;
		scrollbar-color: transparent;
	}
	.jnr-modal_inner::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
	.jnr-modal_inner::-webkit-scrollbar-thumb,
	.jnr-modal_inner::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* motion */
.jnr-modal_overlay:not(.is-open),
.jnr-modal_container:not(.is-open) {
	opacity: 0;
}
.jnr-modal_container:not(.is-open) {
	transform: scale(.9);
}
.jnr-modal_overlay.is-anim {
	transition: opacity .4s;
}
.jnr-modal_container.is-anim {
	transition: opacity .4s, transform .4s var(--easeBack);
}
.jnr-modal_container.is-anim:not(.is-open) {
	transition-timing-function: var(--easeOut);
}
.jnr-modal_overlay.is-anim:not(.is-open),
.jnr-modal_container.is-anim:not(.is-open) {
	transition-duration: .2s;
}
.jnr-modal_container.is-anim.is-open,
.jnr-modal_overlay.is-anim:not(.is-open) {
	transition-delay: .2s;
}

/**
 * お星さま
 * ---------------------------------------- */
.jnr-tower_stars {
	z-index: -2;
	max-width: 1200px;
}
.jnr-tower_stars > img {
	position: absolute;
}
.jnr-main.is-active .jnr-tower_stars img {
	animation: stars 5s infinite;
}
.jnr-main.is-active .jnr-tower_stars :nth-child(4n+1) { animation-duration: 6s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(4n+2) { animation-duration: 7s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(4n+3) { animation-duration: 8s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(6n+2) { animation-delay: -2s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(6n+3) { animation-delay: -1s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(6n+4) { animation-delay: 1s; }
.jnr-main.is-active .jnr-tower_stars :nth-child(6n+5) { animation-delay: 2s; }
@media (max-width: 767.98px) {
	.jnr-tower_stars {
		width: auto;
		height: calc(832vw / var(--ratio));
		margin-inline: calc(var(--sidegap) * -1);
	}
	.jnr-tower_stars > img {
		--width: 7;
		--height: 5;
		width: calc(var(--width) * 1vw / var(--ratio));
		height: calc(var(--height) * 1vw / var(--ratio));
	}
	.jnr-tower_stars > :nth-child(1)  { top: 8%;  left: 2%;  --width: 40; --height: 30; }
	.jnr-tower_stars > :nth-child(2)  { top: 6%;  left: 76%; --width: 52; --height: 38; }
	.jnr-tower_stars > :nth-child(3)  { top: 3%;  left: 55%; --width: 10; --height: 9; }
	.jnr-tower_stars > :nth-child(4)  { top: 16%; left: 72%; --width: 14; --height: 10; }
	.jnr-tower_stars > :nth-child(5)  { top: 20%; left: 58%; --width: 26; --height: 19; }
	.jnr-tower_stars > :nth-child(6)  { top: 23%; left: 1%;  --width: 23; --height: 17; }
	.jnr-tower_stars > :nth-child(7)  { top: 25%; left: 63%; --width: 20; --height: 15; }
	.jnr-tower_stars > :nth-child(8)  { top: 26%; left: 8%;  --width: 11; --height: 8; }
	.jnr-tower_stars > :nth-child(9)  { top: 44%; left: 56%; --width: 37; --height: 27; }
	.jnr-tower_stars > :nth-child(10) { top: 32%; left: 52%; --width: 20; --height: 15; }
	.jnr-tower_stars > :nth-child(11) { top: 34%; left: 2%;  --width: 12; --height: 8; }
	.jnr-tower_stars > :nth-child(12) { top: 31%; left: 88%; --width: 15; --height: 12; }
	.jnr-tower_stars > :nth-child(13) { top: 34%; left: 90%; --width: 30; --height: 28; }
	.jnr-tower_stars > :nth-child(14) { top: 48%; left: 3%;  --width: 20; --height: 15; }
	.jnr-tower_stars > :nth-child(15) { top: 50%; left: 92%; --width: 24; --height: 18; }
	.jnr-tower_stars > :nth-child(16) { top: 53%; left: 6%;  --width: 27; --height: 20; }
	.jnr-tower_stars > :nth-child(17) { top: 57%; left: 85%; --width: 15; --height: 11; }
	.jnr-tower_stars > :nth-child(18) { top: 67%; left: 94%; --width: 10; --height: 8; }
	.jnr-tower_stars > :nth-child(19) { top: 72%; left: 90%; --width: 9;  --height: 7; }
	.jnr-tower_stars > :nth-child(20) { top: 76%; left: 95%; --width: 13; --height: 10; }
	.jnr-tower_stars > :nth-child(21) { top: 87%; left: 7%;  --width: 16; --height: 12; }
	.jnr-tower_stars > :nth-child(22) { top: 52%; left: 78%; --width: 12; --height: 9; }
	.jnr-tower_stars > :nth-child(23) { top: 74%; left: 63%; --width: 9;  --height: 7; }
	.jnr-tower_stars > :nth-child(24) { top: 95%; left: 4%;  --width: 11; --height: 8; }
	
	.jnr-tower_stars > :nth-child(25) { top: 15%; left: 68%; }
	.jnr-tower_stars > :nth-child(26) { top: 47%; left: 8%; }
	
	.jnr-tower_stars > :nth-child(27) { top: 78%; left: 90%; }
	.jnr-tower_stars > :nth-child(28) { top: 73%; left: 59%; }
	.jnr-tower_stars > :nth-child(29) { top: 82%; left: 6%; }
	.jnr-tower_stars > :nth-child(30) { top: 89%; left: 97%; }
	.jnr-tower_stars > :nth-child(31) { top: 99%; left: 7%; }
	.jnr-tower_stars > :nth-child(32) { top: 74%; left: 5%; }
}
@media (min-width: 768px) {
	.jnr-tower_stars {
		height: min(1375vw / var(--ratio), 1375px);
	}
	.jnr-tower_stars > img {
		--width: 13;
		--height: 10;
		width: min(var(--width) * 1vw / var(--ratio), var(--width) * 1px);
		height: min(var(--height) * 1vw / var(--ratio), var(--height) * 1px);
	}
	.jnr-tower_stars > :nth-child(1)  { top: 3%;  left: 12%; --width: 67; --height: 55; }
	.jnr-tower_stars > :nth-child(2)  { top: 5%;  left: 76%; --width: 103; --height: 76; }
	.jnr-tower_stars > :nth-child(3)  { top: 8%;  left: 92%; --width: 41; --height: 30; }
	.jnr-tower_stars > :nth-child(4)  { top: 11%; left: 2%;  --width: 24; --height: 18; }
	.jnr-tower_stars > :nth-child(5)  { top: 15%; left: 74%; --width: 27; --height: 20; }
	.jnr-tower_stars > :nth-child(6)  { top: 20%; left: 65%; --width: 52; --height: 38; }
	.jnr-tower_stars > :nth-child(7)  { top: 20%; left: 30%; --width: 41; --height: 30; }
	.jnr-tower_stars > :nth-child(8)  { top: 26%; left: 32%; --width: 53; --height: 39; }
	.jnr-tower_stars > :nth-child(9)  { top: 28%; left: 70%; --width: 39; --height: 29; }
	.jnr-tower_stars > :nth-child(10) { top: 30%; left: 74%; --width: 19; --height: 17; }
	.jnr-tower_stars > :nth-child(11) { top: 39%; left: 0%;  --width: 59; --height: 57; }
	.jnr-tower_stars > :nth-child(12) { top: 39%; left: 92%; --width: 81; --height: 60; }
	.jnr-tower_stars > :nth-child(13) { top: 40%; left: 8%;  --width: 32; --height: 25; }
	.jnr-tower_stars > :nth-child(14) { top: 52%; left: 89%; --width: 45; --height: 33; }
	.jnr-tower_stars > :nth-child(15) { top: 55%; left: 93%; --width: 21; --height: 16; }
	.jnr-tower_stars > :nth-child(16) { top: 56%; left: 13%; --width: 48; --height: 35; }
	.jnr-tower_stars > :nth-child(17) { top: 63%; left: 2%;  --width: 30; --height: 22; }
	.jnr-tower_stars > :nth-child(18) { top: 65%; left: 31%; --width: 32; --height: 24; }
	.jnr-tower_stars > :nth-child(19) { top: 63%; left: 64%; --width: 23; --height: 17; }
	.jnr-tower_stars > :nth-child(20) { top: 68%; left: 7%;  --width: 21; --height: 16; }
	.jnr-tower_stars > :nth-child(21) { top: 69%; left: 65%; --width: 18; --height: 13; }
	.jnr-tower_stars > :nth-child(22) { top: 75%; left: 29%; --width: 22; --height: 16; }
	.jnr-tower_stars > :nth-child(23) { top: 76%; left: 99%; --width: 17; --height: 13; }
	.jnr-tower_stars > :nth-child(24) { top: 79%; left: 9%;  --width: 27; --height: 20; }
	
	.jnr-tower_stars > :nth-child(25) { top: 14%; left: 72%; }
	.jnr-tower_stars > :nth-child(26) { top: 19%; left: 34%; }
	
	.jnr-tower_stars > :nth-child(27) { top: 81%; left: 8%; }
	.jnr-tower_stars > :nth-child(28) { top: 83%; left: 98%; }
	.jnr-tower_stars > :nth-child(29) { top: 86%; left: 20%; }
	.jnr-tower_stars > :nth-child(30) { top: 92%; left: 3%; }
	.jnr-tower_stars > :nth-child(31) { top: 94%; left: 35%; }
	.jnr-tower_stars > :nth-child(32) { top: 99%; left: 64%; }
}