@charset "utf-8";

/**
 * visual
 * ---------------------------------------- */
.jnr-staff_visual {
	display: grid;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
}
.jnr-staff_title {
	z-index: 0;
	position: relative;
	margin-bottom: -40px;
}
.jnr-staff_title svg {
	z-index: -1;
	position: absolute;
	overflow: visible;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: yellow;
	stroke: black;
}
.jnr-staff_data {
	display: grid;
	justify-items: center;
}
.jnr-staff_data dt {
	line-height: 0;
}
.jnr-staff_data dt > * {
	vertical-align: baseline;
}
.jnr-staff_data dt img {
	position: relative;
	margin-right: calc(8vw / var(--ratio));
}
.jnr-staff_data dt svg {
	height: auto;
}
.jnr-staff_data dd {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .1em;
}
.jnr-staff_data dd:first-of-type {
	display: grid;
	place-items: center;
	z-index: 0;
	position: relative;
	height: 27px;
	padding: 0 28px;
}
.jnr-staff_data dd:first-of-type svg {
	z-index: -1;
	position: absolute;
	inset: 0;
	width: 27px;
	height: 27px;
	fill: yellow;
}
.jnr-staff_data dd:first-of-type svg:first-of-type {
	right: auto;
}
.jnr-staff_data dd:first-of-type svg:last-of-type {
	left: auto;
}
.jnr-staff_data dd:first-of-type svg[preserveAspectRatio] {
	right: 26px;
	left: 26px;
	width: calc(100% - 26px * 2);
}
@media (max-width: 575.98px) {
	.jnr-staff_visual {
		--ratio: 3.75;
		justify-items: end;
		grid-template: 3fr 2fr / 45% 55%;
		padding-top: calc(16vw / var(--ratio));
	}
	.jnr-staff_visual figure {
		grid-area: 1 / 1 / 3 / 3;
		margin-inline: calc(var(--sidegap) * -1);
	}
	.jnr-staff_title {
		--pt: 24; --pr: 48; --pb: 24; --pl: 88;
		grid-area: 1 / 2;
		align-self: start;
		top: calc(-16vw / var(--ratio) + 1px);
		padding-top: calc(var(--pt) * 1vw / var(--ratio));
		padding-right: calc(var(--pr) * 1vw / var(--ratio));
		padding-bottom: calc(var(--pb) * 1vw / var(--ratio));
		padding-left: calc(var(--pl) * 1vw / var(--ratio));
	}
	.jnr-staff_title img {
		max-width: none;
		width: calc(68vw / var(--ratio));
		max-height: calc(184vw / var(--ratio));
	}
	#page-staff6 .jnr-staff_title img {
		width: calc(93vw / var(--ratio));
	}
	#page-staff1 .jnr-staff_title { --pt: 28; --pr: 40; --pl: 72; }
	#page-staff2 .jnr-staff_title { --pr: 52; --pl: 84; }
	#page-staff3 .jnr-staff_title { --pt: 20; --pr: 60; --pb: 20; }
	#page-staff4 .jnr-staff_title { --pl: 84; }
	#page-staff5 .jnr-staff_title { --pt: 20; --pr: 50; --pl: 90; }
	#page-staff6 .jnr-staff_title { --pt: 32; }
	#page-staff2 .jnr-staff_title { right: calc(var(--sidegap) * -.5); }
	#page-staff6 .jnr-staff_title { right: calc(var(--sidegap) * -1); }
	
	.jnr-staff_data {
		grid-area: 2 / 2;
		align-self: end;
		row-gap: calc(8vw / var(--ratio));
		position: relative;
		max-width: 80%;
		top: calc(-12vw / var(--ratio));
	}
	.jnr-staff_data dt img {
		top: calc(-8vw / var(--ratio));
	}
	.jnr-staff_data dt img {
		width: calc(64vw / var(--ratio));
		
	}
	.jnr-staff_data dt svg {
		width: calc(40vw / var(--ratio));
	}
	.jnr-staff_data dd {
		font-size: calc(10vw / var(--ratio));
	}
	.jnr-staff_data dd:first-of-type {
		height: calc(16vw / var(--ratio));
	}
	.jnr-staff_data dd:first-of-type img {
		width: auto;
		height: calc(10vw / var(--ratio));
	}
	.jnr-staff_data dd:first-of-type svg {
		width: calc(16vw / var(--ratio));
		height: calc(16vw / var(--ratio));
	}
	.jnr-staff_data dd:first-of-type svg[preserveAspectRatio] {
		right: calc(15vw / var(--ratio));
		left: calc(15vw / var(--ratio));
		width: calc(100% - 15vw / var(--ratio) * 2);
	}
}
@media (min-width: 576px) {
	.jnr-staff_visual {
		--ratio: 10.6;
		place-items: center;
		grid-template-columns: 5fr 8fr;
	}
	.jnr-staff_visual figure {
		grid-area: 1 / 1 / 2 / 3;
	}
	.jnr-staff_title {
		--pt: 40; --pr: 104; --pb: 48; --pl: 160;
		grid-area: 1 / 2;
		align-self: start;
		justify-self: end;
		top: 16px;
		right: calc(var(--sidegap) * -1);
		padding-top: min(var(--pt) * 1vw / var(--ratio), var(--pt) * 1px);
		padding-right: min(var(--pr) * 1vw / var(--ratio), var(--pr) * 1px);
		padding-bottom: min(var(--pb) * 1vw / var(--ratio), var(--pb) * 1px);
		padding-left: min(var(--pl) * 1vw / var(--ratio), var(--pl) * 1px);
	}
	.jnr-staff_title img {
		width: min(116vw / var(--ratio), 116px);
	}
	#page-staff6 .jnr-staff_title img {
		width: min(161vw / var(--ratio), 161px);
	}
	#page-staff1 .jnr-staff_title { --pb: 32; --pl: 168; }
	#page-staff2 .jnr-staff_title { --pb: 40; --pl: 168; }
	#page-staff3 .jnr-staff_title { --pr: 112; }
	#page-staff4 .jnr-staff_title { --pt: 48; --pr: 96; --pb: 32; }
	#page-staff5 .jnr-staff_title { --pr: 112; --pl: 192; }
	#page-staff6 .jnr-staff_title { --pt: 64; --pr: 80; }
	#page-staff3 .jnr-staff_title { top: -8px; right: max(-16vw / var(--ratio), -16px); }
	#page-staff4 .jnr-staff_title { top: 24px; }
	#page-staff5 .jnr-staff_title { top: 8px; right: max(-32vw / var(--ratio), -32px); }
	#page-staff6 .jnr-staff_title { right: max(-8vw / var(--ratio), -8px); }
	
	.jnr-staff_data {
		grid-area: 1 / 1;
		row-gap: min(16vw / var(--ratio), 16px);
		margin-top: -20%;
		padding: 0 calc(16vw / var(--ratio));
	}
	.jnr-staff_data dt > * {
		height: auto;
	}
	.jnr-staff_data dt img {
		top: max(-16vw / var(--ratio), -16px);
		width: min(96vw / var(--ratio), 96px);
	}
	.jnr-staff_data dt svg {
		width: min(70vw / var(--ratio), 70px);
	}
	.jnr-staff_data dd:first-of-type {
		min-width:  min(216vw / var(--ratio), 216px);
		margin-top: min(16vw / var(--ratio), 16px);
	}
	.jnr-staff_data dd:first-of-type img {
		width: auto;
		height: min(20vw / var(--ratio), 16px);
	}
}


/**
 * article
 * ---------------------------------------- */
.jnr-staff_article {
	z-index: 0;
	position: relative;
	max-width: 920px;
	margin: 48px auto 0;
}
.jnr-staff_section + .jnr-staff_section {
	margin-top: 48px;
}
.jnr-staff_section:last-of-type {
	padding-bottom: 64px;
}
.jnr-staff_section h2 {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid black;
	text-align: center;
}
.jnr-staff_article .jnr-paragraph {
	line-height: 2;
	letter-spacing: .08em;
	text-indent: 1em;
}
.jnr-staff_photo img {
	width: 363px;
}
.jnr-staff_photo figcaption {
	margin-top: .5em;
	font-size: 12px;
}
@media (max-width: 767.98px) {
	.jnr-staff_article {
		padding: 80px calc(24vw / 3.75);
	}
	.jnr-staff_photo {
		text-align: center;
	}
}
@media (min-width: 768px) {
	.jnr-staff_article {
		padding: 80px min(112vw / 10.6, 112px);
	}
	.jnr-staff_photo {
		float: left;
		margin-left: max(-112vw / 10.6 - var(--sidegap) / 2, -136px);
	}
	.jnr-staff_photo figcaption {
		margin-right: -3em;
	}
}
#page-staff1 #section1 figure { max-width: 280px; }
#page-staff1 #section2 figure { max-width: 340px; }
#page-staff1 #section3 figure { max-width: 280px; }
#page-staff2 #section1 figure { max-width: 300px; }
#page-staff2 #section2 figure { max-width: 320px; }
#page-staff2 #section3 figure { max-width: 350px; }
#page-staff3 #section1 figure { max-width: 340px; }
#page-staff3 #section2 figure { max-width: 280px; }
#page-staff3 #section3 figure { max-width: 340px; }
#page-staff4 #section1 figure { max-width: 270px; }
#page-staff4 #section2 figure { max-width: 280px; }
#page-staff4 #section3 figure { max-width: 280px;  }
#page-staff5 #section1 figure { max-width: 270px; }
#page-staff5 #section2 figure { max-width: 260px; }
#page-staff5 #section3 figure { max-width: 250px; }
#page-staff6 #section1 figure { max-width: 280px; }
#page-staff6 #section2 figure { max-width: 300px; }
#page-staff6 #section3 figure { max-width: 300px; }
@media (min-width: 768px) {
	#page-staff1 #section2 figure { margin-left: -1em; }
	#page-staff2 #section2 figure { margin-left: -1em; }
	#page-staff2 #section3 figure { margin-top: 1em; margin-right: -1em; }
	#page-staff3 #section1 figure { margin-top: 1em; margin-right: -1em; }
	#page-staff3 #section2 figure { margin-top: 1em; margin-left: -1em; }
	#page-staff3 #section3 figure { margin-top: 1em; margin-right: -1em; }
	#page-staff4 #section1 figure { margin-left: 1.5em; }
	#page-staff4 #section2 figure { margin-top: 1.5em; margin-left: -1em; }
	#page-staff4 #section3 figure { margin-top: .5em; }
	#page-staff5 #section1 figure { margin-right: -1em; margin-left: .5em; }
	#page-staff5 #section2 figure { margin-left: -1em; }
	#page-staff5 #section3 figure { margin-top: .5em; }
	#page-staff6 #section1 figure { margin-right: -1em; }
	#page-staff6 #section2 figure { margin-left: -1em; }
	#page-staff6 #section3 figure { margin-top: 2em; margin-right: -1em; }
}


/**
 * 他のメンバーを見る
 * ---------------------------------------- */
.jnr-staff_other {
	clear: both;
	max-width: 940px;
	margin: 0 auto;
	padding-top: 48px;
}
.jnr-staff_other h2 {
	z-index: 1;
	position: relative;
	line-height: 1;
	text-align: center;
}
.jnr-staff_list {
	z-index: 0;
	position: relative;
	margin-top: -14px;
}
.jnr-staff_list > svg:first-of-type {
	z-index: -1;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: #ffffcd;
}
.jnr-staff_list > svg:not(:first-of-type) {
	position: absolute;
	width: calc(50% - 120px);
	fill: none;
	stroke: black;
}
.jnr-staff_list > svg:nth-of-type(2) {
	top: 0;
	left: 0;
}
.jnr-staff_list > svg:nth-of-type(3) {
	top: 0;
	right: 0;
}
.jnr-staff_list > svg:nth-of-type(4) {
	bottom: 0;
	left: 0;
	width: 100%;
}
.jnr-staff_list ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, 128px);
	justify-content: center;
	gap: min(16vw / 3.75, 24px);
	max-width: 800px;
	margin: 0 auto;
	padding: 48px 24px 40px;
}
.jnr-staff_list ul svg[preserveAspectRatio] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.jnr-staff_list a {
	display: grid;
	justify-items: center;
}
.jnr-staff_list figure {
	position: relative;
	max-width: 115px;
}
.jnr-staff_list figure img {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-image: url("../../content/images/careers/graduates/home_maruwakari_mask1.svg");
	mask-image: url("../../content/images/careers/graduates/home_maruwakari_mask1.svg");
}
.jnr-staff_list figure svg {
	overflow: visible;
	fill: none;
	stroke: black;
}
.jnr-staff_list li p {
	line-height: 1.2;
}
.jnr-staff_list li p:first-of-type {
	z-index: 0;
	position: relative;
	margin-top: .4em;
	padding: 0 1em;
}
.jnr-staff_list li p:first-of-type img {
	width: 80px;
	margin-right: 4px;
}
.jnr-staff_list li p:first-of-type svg:first-of-type {
	overflow: visible;
	top: -3px;
	position: relative;
	width: 10px;
	height: auto;
	stroke-width: .5;
}
.jnr-staff_list li p:first-of-type svg[preserveAspectRatio] {
	z-index: -1;
	top: auto;
	height: 20px;
	fill: yellow;
}
.jnr-staff_list li p:last-of-type {
	margin-top: .8em;
	font-size: 11px;
}
.jnr-staff_list li:nth-of-type(2) .jnr-inview { animation-delay: .05s; transition-delay: .05s; }
.jnr-staff_list li:nth-of-type(3) .jnr-inview { animation-delay: .1s; transition-delay: .1s; }
.jnr-staff_list li:nth-of-type(4) .jnr-inview { animation-delay: .15s; transition-delay: .15s; }
.jnr-staff_list li:nth-of-type(5) .jnr-inview { animation-delay: .2s; transition-delay: .2s; }


/**
 * frame
 * ---------------------------------------- */
.jnr-staff_article {
	--bis: 40px;
	--endWidth: 80px;
}
.jnr-staff_top,
.jnr-staff_frame,
.jnr-staff_bottom {
	z-index: -1;
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
}
.jnr-staff_top,
.jnr-staff_bottom {
	overflow: visible;
	height: calc(var(--endWidth) + 1px);
}
.jnr-staff_top {
	top: 0;
}
.jnr-staff_frame {
	top: var(--endWidth);
	bottom: var(--endWidth);
	height: calc(100% - var(--endWidth) * 2);
}
.jnr-staff_bottom {
	bottom: 0;
}
@media (max-width: 767.98px) {
	.jnr-staff_article {
		--bis: 24px;
		padding-block: calc(48vw / 3.75);
	}
	.jnr-staff_article .jnr-note {
		margin-top: 32px;
		text-align: center;
	}
	.jnr-staff_article .jnr-bis[data-bis="3"] {
		bottom: calc(var(--bis) * 1.1);
	}
}
@media (max-width: 575.98px) {
	.jnr-staff_article {
		--endWidth: calc(40vw / 3.75);
	}
}
@media (min-width: 768px) {
	.jnr-staff_article .jnr-note {
		float: right;
		position: relative;
		bottom: -24px;
	}
}