@charset "UTF-8";
/* CSS Document */

/*
	ホリプロの仕事
-----------------------------------------------------------------------------------------------*/
.careerPathPage .ctsArea:nth-last-of-type(n+2){
	padding-bottom: 90px;
}
/* アンカー
========================================*/
.listJobAnchor{
	display: flex;
	flex-wrap: wrap;
	gap: 21px 8px;
	width: var(--col1Width);
	padding-inline: 30px;
	margin: 0 auto 65px auto;
}
.listJobAnchor li{
	width: 279px;
}
.listJobAnchor li a{
	display: flex;
	align-items: center;
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
	border: 1px solid #000000;
	position: relative;
	transition: var(--trstCmn);
}
.listJobAnchor li a .num{
	align-content: center;
	flex: 0 0 52px;
	min-height: 52px;
	font-family: var(--ffEn);
	font-weight: 500;
	line-height: 100%;
	background-color: var(--clGray);
	transition: var(--trstCmn);
}
.listJobAnchor li a .txt{
	flex: 1 0 auto;
}
.listJobAnchor li a::after{
	content: ' ';
	display: block;
	width: 1px;
	height: 20px;
	background-color: rgb(0 0 0 / 0.3);
	position: absolute;
	top: 42px;
	left: 162px;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.listJobAnchor li a:hover{
		color: #FFFFFF;
		background-color: var(--clGold);
	}
	.listJobAnchor li a:hover .num{
		color: var(--clGray);
		background-color: #000000;
	}
	.listJobAnchor li a:hover::after{
		height: 0;
		bottom: -14px;
		top: auto;
	}
}

/* KV
========================================*/
.jobKvArea{
	padding-top: 80px;
	position: relative;
	z-index: 0;
}
/* 職種名 */
.jobKvArea .tit .job{
	display: block;
	width: fit-content;
	padding: 10px calc(15px - 0.1em) 15px 15px;
	font-size: 3.6rem;
	font-weight: 700;
	color: #FFFFFF;
	letter-spacing: 0.1em;
	line-height: 100%;
	background-color: var(--clNavy);
}
.jobKvArea .tit .num{
	font-family: var(--ffEn);
	font-size: 20.8rem;
	font-weight: 600;
	color: rgb(6 55 87 / 0.1);
	letter-spacing: -0.025em;
	line-height: 100%;
	position: absolute;
	top: 0;
	left: -70px;
	z-index: -1;
}
/* 写真 */
.jobKvArea .ph{
	position: absolute;
	top: 0;
	right: -70px;
	z-index: -1;
	opacity: 0;
}
@media screen and (812px < width){
	.jobKvArea .ph{
		width: 574px;
	}
}
.jobKvArea:has(.job.jsAnmStart) .ph{
	animation: fadeInBlur var(--anmDurationBase) 1 normal var(--anmDelayBase) var(--anmEasingBase) forwards;
}
/* キャッチ */
.jobKvArea .catch{
	margin: 40px 0 60px 15px;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 155%;
	letter-spacing: 0.125em;
	opacity: 0;
}
.jobKvArea:has(.job.jsAnmStart) .catch{
	animation: fadeInRtoL var(--anmDurationBase) 1 normal 0.65s var(--anmEasingBase) forwards;
}

/* 詳細
========================================*/
.jobDetailArea{
	opacity: 0;
}
/* animation */
.jobKvArea:has(.job.jsAnmStart) + .jobDetailArea{
	animation: fadeInRtoL var(--anmDurationBase) 1 normal 0.65s var(--anmEasingBase) forwards;
}

/* 相関図
========================================*/
.jobPicBox{
	padding-block: 45px 40px;
	background: var(--patGridGray) #FFFFFF;
	position: relative;
}
.jobPicBox figcaption{
	padding-block: 4px 5px;
	width: 110px;
	font-size: 1.4rem;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	line-height: 100%;
	background-color: #000000;
	position: absolute;
	top: -11px;
	left: 0;
}
@media screen and (812px < width){
	.jobPicBox .pic{
		width: 100%;
	}
}

/* リード
========================================*/
.jobLeadead{
	margin-block: 30px 32px;
	font-feature-settings: 'pkna';
	letter-spacing: 0;
	line-height: 190%;
	text-align: justify;
}

/* POINT
========================================*/
.jobPointArea{
	padding-block: 31px 36px;
	background-color: rgb(210 210 210 / 0.5);
	border-bottom: 1px solid rgb(0 0 0 / 0.3);
}
/* タイトル */
.jobPointArea > .tit{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 10px;
	margin-top: -6px;
	font-family: var(--ffEn);
	font-size: 1.3rem;
	font-weight: 500;
	color: var(--clGold);
	letter-spacing: 0.1em;
	line-height: 100%;
	text-align: center;
	position: relative;
	top: -31px;
}
.jobPointArea > .tit::before, .jobPointArea > .tit::after{
	content: ' ';
	flex: 1 0 auto;
	height: 1px;
	background-color: rgb(0 0 0 / 0.3);
}
/* リスト */
.listJobPoint{
	display: flex;
	justify-content: space-between;
}
.listJobPoint li{
	width: 300px;
	padding: 30px;
	background-color: var(--clNavy);
}
.listJobPoint li .tit{
	margin: 0 -10px 13px -10px;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clGray);
	text-align: center;
	letter-spacing: 0.1em;
}
.listJobPoint li .txt{
	font-size: 1.3rem;
	color: #FFFFFF;
	text-align: justify;
	letter-spacing: 0.05em;
	line-height: 180%;
}

/* この仕事のインタビュー
========================================*/
.jobItvArea{
	display: flex;
	align-items: center;
	gap: 0 45px;
	padding-block: 30px 27px;
	border-bottom: 1px solid rgb(0 0 0 / 0.3);
}
/* タイトル */
.jobItvArea > .tit{
	padding: 0 0 10px 30px;
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--clNavy);
	letter-spacing: 0.175em;
}
.jobItvArea > .tit .ffEn{
	display: block;
	padding-top: 4px;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 100%;
}
/* リスト */
.listJobItv{
	display: flex;
	gap: 0 35px;
}
.listJobItv li a{
	display: block;
	font-size: 1.1rem;
	text-align: center;
	pointer-events: none;
}
.listJobItv li a .phBox, .listJobItv li a .name, .listJobItv li a .view{
	width: fit-content;
	margin-inline: auto;
	pointer-events: all;
}
.listJobItv li a .phBox{
	background-color: #FFFFFF;
	border-radius: 50%;
	overflow: hidden;
	transition: all 0.35s;
}
.listJobItv li a .phBox img{
	mix-blend-mode: multiply;
}
@media screen and (812px < width){
	.listJobItv li a .phBox img{
		width: 100px;
	}
}
.listJobItv li a .name{
	margin-block: 5px;
	letter-spacing: 0.05em;
	line-height: 145%;
}
.listJobItv li a .view{
	padding-inline: 8px;
	font-family: var(--ffEn);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 100%;
	position: relative;
}
.listJobItv li a .view::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgb(0 0 0 / 0.3);
	position: absolute;
	bottom: 5px;
	left: 0;
	transition: var(--trstCmn);
}
@media (any-hover: hover) {
	.listJobItv li a:hover .view::after{
		width: 0;
		right: 0;
		left: auto;
	}
	.listJobItv li a:hover .phBox{
		background-color: var(--clGray);
	}
}


/*
	切り拓くキャリア
-----------------------------------------------------------------------------------------------*/
.cpCtsArea:nth-of-type(n+2){
	margin-top: 125px;
}
/* 各KV
========================================*/
.cpKvArea{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: calc(50% + 570px);
	height: 364px;
	color: var(--clGray);
	position: relative;
	z-index: 1;
}
/* キャッチ / 写真 */
.cpKvArea .catchArea{
	width: 920px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
}
.cpKvArea .catchArea .catch{
	display: flex;
	flex-direction: column;
	gap: 5px 0;
	font-size: 3.6rem;
	font-weight: 800;
	color: var(--clNavy);
	letter-spacing: 0.1em;
	line-height: 100%;
}
.cpKvArea .catchArea .catch .bgW{
	width: fit-content;
	padding: 2px 2px 5px 5px;
	background-color: #FFFFFF;
}
@media screen and (812px < width){
	.cpCtsArea.cp01 .cpKvArea .phBox img{
		width: 398px;
	}
	.cpCtsArea.cp02 .cpKvArea .phBox img{
		width: 344px;
	}
	.cpCtsArea.cp03 .cpKvArea .phBox img{
		width: 315px;
	}
	.cpCtsArea.cp04 .cpKvArea .phBox img{
		width: 386px;
	}
	.cpCtsArea.cp05 .cpKvArea .phBox img{
		width: 322px;
	}
}
/* CASE */
.cpKvArea .caseBox{
	width: 220px;
	padding: 35px 15px 15px 15px;
	text-align: center;
	background-color: var(--clNavy);
	position: absolute;
	bottom: 250px;
	right: 0;
	opacity: 1;
	overflow: hidden;
}
.cpKvArea .caseBox .case{
	padding-bottom: 4px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--clGold);
	line-height: 100%;
	border-bottom: 1px solid var(--clGold);
	position: absolute;
	top: 15px;
	left: 15px;
}
.cpKvArea .caseBox .num{
	font-family: var(--ffEn);
	font-size: 7.8rem;
	font-weight: 600;
	color: var(--clGold);
	letter-spacing: 0;
	line-height: 100%;
}
.cpKvArea .caseBox .department{
	margin-block: 0px 5px;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 135%;
}
.cpKvArea .caseBox .name{
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 100%;
}
.cpKvArea .caseBox .name .ffEn{
	font-size: 1.9rem;
	font-weight: 600;
}
.cpKvArea .caseBox .name .fsS{
	font-size: 1.2rem;
}
@media screen and (812px < width){
	/* 偶数 */
	.cpCtsArea:nth-of-type(even) .cpKvArea{
		flex-direction: row-reverse;
		margin: 0 0 0 auto;
	}
	.cpCtsArea:nth-of-type(even) .cpKvArea .catchArea{
		flex-direction: row;
	}
	.cpCtsArea:nth-of-type(even) .cpKvArea .caseBox{
		right: auto;
		left: 0;
	}
}
/* 略歴 */
.cpKvArea .dlistCP{
	width: 220px;
	height: 100%;
	padding: 135px 13px 20px 13px;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	background-color: rgb(6 55 87 / 0.8);
	opacity: 1;
}
.cpKvArea .dlistCP > div:nth-of-type(n+2){
	margin-top: 10px;
}
.cpKvArea .dlistCP dt{
	padding-left: 8px;
	margin-bottom: 3px;
	color: var(--clGold);
	line-height: 100%;
	position: relative;
}
.cpKvArea .dlistCP dt::before{
	content: ' ';
	display: block;
	width: 4px;
	height: 1px;
	background-color: var(--clGold);
	position: absolute;
	top: 6px;
	left: 0;
}
.cpKvArea .dlistCP dd{
	padding-left: 8px;
}
/* animation */
.cpKvArea{
	opacity: 1;
}
.cpKvArea .caseBox .num,
.cpKvArea .caseBox .department,
.cpKvArea .caseBox .name,
.cpKvArea .dlistCP > div,
.cpKvArea .catchArea .catch{
	opacity: 0;
}
.cpKvArea.jsAnmStart  .caseBox .num,
.cpKvArea.jsAnmStart .caseBox .department,
.cpKvArea.jsAnmStart .caseBox .name,
.cpKvArea.jsAnmStart .dlistCP > div,
.cpKvArea.jsAnmStart .catchArea .catch{
	animation: fadeInBtoT var(--anmDurationBase) 1 normal var(--anmDelayBase) var(--anmEasingBase) forwards;
}
.cpKvArea.jsAnmStart .dlistCP > div{
	animation-delay: 0.55s;
}
@media screen and (812px < width){
	/* 01 */
	.cp01 .cpKvArea{
		background:
			url(../images/bg_career01_pc.png) right top / 1270px 364px no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp01 .cpKvArea .catch{
		margin-left: -50px;
	}
	/* 02 */
	.cp02 .cpKvArea{
		background:
			url(../images/bg_career02_pc.png) left top / 1270px 364px no-repeat,
			linear-gradient(-45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp02 .cpKvArea .catch{
		margin-right: 50px;
	}
	/* 03 */
	.cp03 .cpKvArea{
		background:
			url(../images/bg_career03_pc.png) right top / 1270px 364px no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp03 .cpKvArea .catch{
		margin-left: -10px;
	}
	/* 04 */
	.cp04 .cpKvArea{
		background:
			url(../images/bg_career04_pc.png) left top / 1270px 364px no-repeat,
			linear-gradient(-45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp04 .cpKvArea .catch{
		margin-right: -20px;
	}
	/* 05 */
	.cp05 .cpKvArea{
		background:
			url(../images/bg_career05_pc.png) right top / 1270px 364px no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp05 .cpKvArea .catch{
		margin-left: -35px;
	}
}

/* 詳細
========================================*/
.cpCtsArea .cpDetailArea{
	width: calc(50% + 570px);
	padding: 100px 30px 50px 50px;
	margin: -100px 0 0 auto;
	background-color: var(--clGray);
	animation-duration: 0.55s;
}
@media screen and (812px < width){
	/* 偶数 */
	.cpCtsArea:nth-of-type(even) .cpDetailArea{
		padding: 100px 50px 50px 30px;
		margin: -100px auto 0 0;
	}
	.cpCtsArea:nth-of-type(even) .cpDetailArea .cpArea{
		padding-left: 50px;
	}
	.cpCtsArea:nth-of-type(even) .cpDetailArea .cpArea,
	.cpCtsArea:nth-of-type(even) .cpDetailArea .wantToArea{
		margin-inline: auto 0;
	}
}
/* キャリアパス */
.cpDetailArea .cpArea{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 1090px;
}
.olistCP{
	display: flex;
	flex-direction: column;
	gap: 0 40px;
	width: 100%;
	padding: 30px 23px 20px 23px;
	margin-bottom: 50px;
	background: var(--patGridW);
	position: relative;
}
.olistCP li::before{
	content: ' ';
	display: block;
	width: 1px;
	height: 100%;
	background-color: #000000;
	position: absolute;
	top: 0;
	left: -23px;
}
.olistCP li:first-of-type::before{
	background: linear-gradient(to bottom, transparent 2px, #000000 2px) left top / 100% 4px repeat-y;
}
.olistCP li:last-of-type::before{
height: calc(100% + 40px);
}
.olistCP::after{
	content: ' ';
	display: block;
	width: 15px;
	height: 15px;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	position: absolute;
	bottom: -37px;
	left: -15px;
	transform-origin: right top;
	transform: scaleX(0.7) rotate(135deg);
}
.olistCP li{
	padding-bottom: 50px;
	position: relative;
}
.olistCP li:last-of-type{
	padding-bottom: 0;
}
.olistCP li::after{
	content: ' ';
	display: block;
	width: 7px;
	aspect-ratio: 1 / 1;
	background-color: var(--clRed);
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: -26px;
}
/* 年 */
.olistCP li .yearBox{
	display: flex;
	align-items: flex-start;
	gap: 0 6px;
	margin-top: -6px;
	white-space: nowrap;
}
.olistCP li .year{
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 100%;	
}
.olistCP li .year .num{
	font-family: var(--ffEn);
	font-size: 2.4rem;
	letter-spacing: 0;
}
.olistCP li .year .fsS{
	font-size: 1.5rem;
}
/* 職種 */
.olistCP li .job{
	width: fit-content;
	padding: 4px 4px 5px 4px;
	margin-top: -10px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #FFFFFF;
	letter-spacing: 0.05em;
	line-height: 100%;
	background-color: #000000;
	position: relative;
}
.olistCP li .job::before{
	content: ' ';
	display: block;
	width: 8px;
	height: 6px;
	background: url(../images/ico_career_job.svg) left top / contain no-repeat;
	position: absolute;
	bottom: -4px;
	left: -2px;
}
/* 見出し */
.olistCP li .catch{
	margin-block: 5px 7px;
	font-size: 1.9rem;
	font-weight: 800;
	color: var(--clNavy);
	letter-spacing: 0.05em;
	line-height: 160%;
}
.olistCP li .catch .markerW{
	display: inline-block;
	background: linear-gradient(to top, transparent 3px, #FFFFFF 3px, #FFFFFF 6px, transparent 6px);
}
/* 本文 */
.olistCP li .txt{
	text-align: justify;
	font-feature-settings: 'pkna';
	letter-spacing: 0;
	line-height: 165%;
}
/* ボタン */
a.btnJobLink{
	display: block;
	width: fit-content;
	min-height: 24px;
	padding: 4px 28px 0 5px;
	margin-top: 12px;
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 100%;
	white-space: nowrap;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	position: relative;
	transition: var(--trstCmn);
}
a.btnJobLink::after{
	content: ' ';
	display: block;
	width: 23px;
	height: 100%;
	background: url(../images/ico_arrow_w60.svg) left 7px top 5px no-repeat #000000;
	position: absolute;
	top: 0;
	right: 0;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	a.btnJobLink:hover{
		color: #FFFFFF;
		background-color: var(--clGold);
	}
	a.btnJobLink:hover::after{
		background-position: left 9px top 5px;
	}
}
/* 動画 */
.cpDetailArea .labelMovie{
	display: grid;
	place-content: center;
	width: 74px;
	aspect-ratio: 1 / 1;
	font-size: 1rem;
	color: #FFFFFF;
	letter-spacing: 0.1em;
	line-height: 145%;
	background: url(../images/ico_career_movie.svg) left top / contain no-repeat;
	position: absolute;
	top: -34px;
	left: -14px;
	z-index: 1;
	pointer-events: none;
}
.cpDetailArea .labelMovie .ffEn{
	font-size: 1.2rem;
	font-weight: 500;
}
.cpDetailArea .icoPlay{
	bottom: 4px;
}
@media screen and (812px < width){
	.cpDetailArea .thumbModal > img{
		width: 450px;
	}
}
/* モーダル */
.careerPathPage .modalContainer .mvBox{
	width: 800px;
	aspect-ratio: 560 / 315;
}
.careerPathPage .modalContainer .mvBox iframe{
	display: block;
	width: 100%;
	height: 100%;
}
/* やりたいこと */
.wantToArea{
	display: flex;
	gap: 0 50px;
	width: 1090px;
	margin-top: 20px;
}

.wantToBox{
	flex: 1 0 auto;
}
.wantToBox .tit{
	padding: 2px 0 8px 18px;
	margin-top: -28px;
	font-size: 1.3rem;
	font-weight: 500;
	position: relative;
}
.wantToBox .tit::before{
	content: ' ';
	width: 3px;
	height: 36px;
	background-color: var(--clNavy);
	position: absolute;
	top: 0;
	left: 8px;
	z-index: 1;
}
.wantToBox:last-of-type .tit::before{
	background-color: var(--clRed);
}
.wantToBox .txt{
	display: grid;
	place-content: center;
	height: 100%;
	padding: 20px 30px 30px 30px;
	font-size: 1.8rem;
	text-align: center;
	color: var(--clNavy);
	line-height: 180%;
	background-color: rgb(255 255 255 / 0.25);
	border: 1px solid var(--clNavy);
	position: relative;
}
.wantToBox:first-of-type .txt::after{
	content: ' ';
	display: block;
	width: 10px;
	height: 13px;
	background: url(../images/ico_arrow_career_want.svg) left top no-repeat;
	position: absolute;
	top: calc(50% - 8px);
	right: -26px;
}


/*
	仕掛け人たちのストーリー
-----------------------------------------------------------------------------------------------*/
/* アンカー
========================================*/
.listStoryAnchor{
	display: flex;
	justify-content: center;
	border-top: 1px solid var(--clGold);
	position: relative;
}
.listStoryAnchor::before{
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--patSlash);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.2;
}
.listStoryAnchor li{
	width: 380px;
	position: relative;
}
.listStoryAnchor li a{
	display: flex;
	align-items: center;
	gap: 0 50px;
	padding-top: 20px;
	transition: var(--trstCmn);
}
.listStoryAnchor li a::after {
	content: ' ';
	display: block;
	width: 1px;
	height: 20px;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0.3) 50%, rgb(255 255 255 / 0.5) 50%);
	position: absolute;
	top: calc(100% - 9px);
	left: 190px;
	transition: var(--trstCmn);
}
@media (any-hover: hover){
	.listStoryAnchor li a:hover{
		color: #FFFFFF;
		background-color: var(--clGold);
	}
	.listStoryAnchor li a:hover::after{
		height: 0;
		bottom: -14px;
		top: auto;
	}
}
/* サムネイル */
.listStoryAnchor li a .thumb{
	flex: 0 0 auto;
}
@media screen and (812px < width){
	.listStoryAnchor li a .thumb{
		width: 80px;
	}
}
/* テキスト */
.listStoryAnchor li a .txt{
	flex: 1 0 auto;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.075em;
	line-height: 145%;
}
.listStoryAnchor li a .txt .num{
	display: grid;
	place-content: center;
	width: 90px;
	min-height: 16px;
	padding-top: 1px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 100%;
	background-color: #000000;
	position: absolute;
	top: -9px;
	left: calc(50% - 45px);
}

/* KV
========================================*/
.storyKvArea{
	background: url(../images/bg_story_blue_pc.png) center bottom / auto 100% no-repeat #000000;
}
#story02 .storyKvArea{
	background-image: url(../images/bg_story_red_pc.png);
}
.storyKvCtsArea{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0 65px;
	width: 1040px;
	min-height: 490px;
	padding-block: 70px 30px;
	margin: 0 auto;
}
.storyKvCtsArea .outlineBox{
	display: flex;
	flex-direction: column;
	color: var(--clGold);
}
.storyKvCtsArea .outlineBox.jsAnmStart{
	animation-delay: 0.55s;
}
/* タイトル */
.storyKvCtsArea .outlineBox .titMain{
	display: flex;
	align-items: center;
	gap: 0 10px;
	order: -1;
	font-weight: 800;
	color: var(--clGray);
}
.storyKvCtsArea .outlineBox .titMain .label{
	width: 100px;
	padding: 5px 5px 3px 5px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 100%;
	background-color: var(--clNavy);
}
/* キャッチ */
.storyKvCtsArea .outlineBox .catch{
	margin-block: 28px 25px;
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 125%;
}
/* 概要 */
.storyKvCtsArea .outlineBox .titOutline{
	display: flex;
	align-items: center;
	gap: 0 10px;
	margin-bottom: 10px;
	font-size: 1.3rem;
	font-weight: 700;
}
.storyKvCtsArea .outlineBox .titOutline::after{
	content: ' ';
	flex: 1 0 auto;
	height: 1px;
	background-color: var(--clGold);
	opacity: 0.6;
}
.storyKvCtsArea .outlineBox .lead{
	text-align: justify;
	font-feature-settings: 'pkna';
	letter-spacing: 0.05em;
	line-height: 180%;
}
/* 画像 */
.storyKvCtsArea .phBox{
	align-self: flex-end;
}
@media screen and (812px < width){
	.storyKvCtsArea .phBox img{
		width: 240px;
	}
}

/* 詳細
========================================*/
.storyDetailArea{
	padding: 45px 0 30px 60px;
	margin-top: 45px;
	border-top: 1px solid rgb(0 0 0 / 0.3);
	border-left: 1px solid rgb(0 0 0 / 0.3);
	position: relative;
}
.storyDetailArea:last-of-type {
    padding-bottom: 30px;
}
/* EPISODEタイトル */
.storyDetailArea .tit{
	padding: 0 10px;
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 100%;
	background-color: var(--clLGray);
	position: absolute;
	top: 10px;
	left: 5px;
}
.storyDetailArea.profile .tit{
	padding: 10px 0;
	writing-mode: vertical-rl;
	left: -7px;
}
.storyDetailArea:not(.profile) .tit{
	transform-origin: left top;
	transform: rotate(90deg);
}
/* プロフィール */
.storyProfArea{
	display: flex;
	align-items: center;
	gap: 0 30px;
}

@media screen and (812px < width){
	.storyProfArea .ph{
		width: 480px;
	}
}
.storyProfArea .name{
	font-family: var(--ffEn);
	font-size: 2.7rem;
	font-weight: 600;
	line-height: 100%;
}
.storyProfArea .department{
	margin-top: 7px;
	font-size: 1.3rem;
	letter-spacing: 0.05em;
}
.storyProfArea .profBox{
	opacity: 0;
}
.storyProfArea:has(.jsAnmStart) .profBox{
	animation: fadeInRtoL var(--anmDurationBase) 1 normal 0.55s var(--anmEasingBase) forwards;
}
/* 詳細 */
.storyDetailArea .catch{
	margin-bottom: 20px;
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 150%;
}
.storyDetailArea .txt{
	text-align: justify;
	font-feature-settings: 'pkna';
	letter-spacing: 0;
	line-height: 200%;
	opacity: 0;
}
.storyDetailArea .txt:not(.tit + .txt){
	margin-top: 15px;
}
.storyDetailArea .txt.ti-05{
	text-indent: -0.5em;
}
.storyDetailArea:has(.jsAnmStart) .txt{
	animation: fadeInRtoL var(--anmDurationBase) 1 normal 0.55s var(--anmEasingBase) forwards;
}

/* EPISODE 02 */
.storyDetail2Col{
	display: grid;	
	grid-template-columns: 660px 290px;
	/* grid-template-rows: 365px auto; 写真縦積み2枚用 */
	grid-auto-flow: column;
	gap: 20px 50px;
	padding-inline: 0;
}
.storyDetail2Col .storyDetailArea{
	/* grid-row: span 2; 写真縦積み2枚用 */
	width: auto;
}
.phStoryDetail01{
	margin-top: 20px;
}
@media screen and (812px < width){
	.phStoryDetail01, .phStoryDetail02{
		width: 100%;
	}
}
/* コラム */
.storyColumnArea{
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	margin-block: 45px 80px;
	position: relative;
}
.storyColumnArea::before{
	content: ' ';
	width: 100%;
	height: 384px;
	background-color: var(--clGray);
	position: absolute;
	top: 0;
	left: 0;
}
.storyColumnArea .detailBox{
	padding: 40px 40px 40px 70px;
	margin: 50px 0 0 -30px;
	color: #FFFFFF;
	background-color: var(--clGold);
	position: relative;
}
.storyColumnArea .detailBox .tit{
	font-family: var(--ffEn);
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--clGold);
	position: absolute;
	top: -33px;
	left: 45px;
}
.storyColumnArea .detailBox .catch{
	margin-bottom: 13px;
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 150%;
}
.storyColumnArea .detailBox .txt{
	text-align: justify;
	letter-spacing: 0.1em;
	line-height: 180%;
	opacity: 0;
}
.storyColumnArea .detailBox:has(.jsAnmStart) .txt{
	animation: fadeInRtoL var(--anmDurationBase) 1 normal 0.55s var(--anmEasingBase) forwards;
}
.storyColumnArea .phColumn{
	position: relative;
}
@media screen and (812px < width){
	.storyColumnArea .phColumn{
		width: 440px;
	}
}



/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	/*
		ホリプロの仕事
	-----------------------------------------------------------------------------------------------*/
	.careerPathPage .ctsArea:nth-last-of-type(n+2){
		padding-bottom: 60px;
	}
	/* アンカー
	========================================*/
	.listJobAnchor{
		flex-wrap: wrap;
		gap: 13px 5px;
		padding-inline: 25px;
		margin: 0 auto 25px auto;
	}
	.listJobAnchor li{
		width: calc((100% - 5px)/2);
	}
	.listJobAnchor li a{
		font-size: 1.1rem;
	}
	.listJobAnchor li a .num{
		flex: 0 0 30px;
		min-height: 40px;
	}
	.listJobAnchor li a .txt{
		line-height: 125%;
	}
	.listJobAnchor li a::after{
		height: 10px;
		top: 36px;
		left: calc(50% + 15px);
	}
	@media (any-hover: hover){
		.listJobAnchor li a:hover::after{
			height: 0;
			bottom: -6px;
			top: auto;
		}
	}

	/* KV
	========================================*/
	.jobKvArea{
		padding-top: 42px;
	}
	/* 職種名 */
	.jobKvArea .tit .job{
		padding: 6px calc(10px - 0.1em) 10px 10px;
		margin: 0 auto -17px auto;
		font-size: 1.8rem;
		letter-spacing: 0.1em;
		position: relative;
		z-index: 1;
	}
	.jobKvArea .tit .num{
		font-size: 5rem;
		left: 50%;
		z-index: 1;
		translate: -50% 0;
	}
	/* 写真 */
	.jobKvArea .ph{
		width: calc(100% + 50px);
		margin: 0 -25px 0 -25px;
		position: static;
	}
	/* キャッチ */
	.jobKvArea .catch{
		margin: 24px auto 34px auto;
		font-size: 1.6rem;
		text-align: center;
	}
	.jobKvArea:has(.job.jsAnmStart) .catch{
		animation-name: fadeInBtoT;
	}

	/* 詳細
	========================================*/
	.jobDetailArea{
		opacity: 0;
	}
	/* animation */
	.jobKvArea:has(.job.jsAnmStart) + .jobDetailArea{
		animation-name: fadeInBtoT;
	}

	/* 相関図
	========================================*/
	.jobPicBox{
		padding-block: 30px 25px;
	}
	.jobPicBox figcaption{
		padding-block: 4px 5px;
		width: 100px;
		font-size: 1.2rem;
	}

	/* リード
	========================================*/
	.jobLeadead{
		margin-block: 20px 32px;
	}

	/* POINT
	========================================*/
	.jobPointArea{
		padding-block: 15px 21px;
	}
	/* タイトル */
	.jobPointArea > .tit{
		gap: 0 8px;
		font-size: 1.2rem;
		top: -15px;
	}
	/* リスト */
	.listJobPoint{
		flex-direction: column;
		justify-content: flex-start;
		gap: 5px 0;
	}
	.listJobPoint li{
		width: 100%;
		padding: 25px;
	}
	.listJobPoint li .tit{
		margin: 0 -10px 10px -10px;
		font-size: 1.5rem;
	}

	/* この仕事のインタビュー
	========================================*/
	.jobItvArea{
		flex-direction: column;
		gap: 10px 0;
		padding-block: 20px;
	}
	/* タイトル */
	.jobItvArea > .tit{
		padding: 0;
		font-size: 1rem;
		text-align: center;
		letter-spacing: 0.05em;
	}
	.jobItvArea > .tit .ffEn{
		padding-top: 4px;
		font-size: 1.7em;
	}
	/* リスト */
	.listJobItv{
		gap: 0 30px;
	}
	.listJobItv li a{
		font-size: 1rem;
	}
	.listJobItv li a .phBox img{
		width: 64px;
	}
	.listJobItv li a .name{
		margin-block: 5px;
		letter-spacing: 0.05em;
		line-height: 135%;
	}
	.listJobItv li a .view{
		padding-inline: 8px;
		font-family: var(--ffEn);
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 100%;
		position: relative;
	}
	.listJobItv li a .view::after{
		content: ' ';
		display: block;
		width: 100%;
		height: 1px;
		background-color: rgb(0 0 0 / 0.3);
		position: absolute;
		bottom: 5px;
		left: 0;
		transition: var(--trstCmn);
	}
	@media (any-hover: hover) {
		.listJobItv li a:hover .view::after{
			width: 0;
			right: 0;
			left: auto;
		}
		.listJobItv li a:hover .phBox{
			background-color: var(--clGray);
		}
	}


	/*
		切り拓くキャリア
	-----------------------------------------------------------------------------------------------*/
	.cpCtsArea {
		max-width: 500px;
		margin: 0 auto;
	}
	.cpCtsArea:nth-of-type(n+2){
		margin-top: 95px;
	}
	/* 各KV
	========================================*/
	.cpKvArea{
		flex-direction: column;
		width: 100%;
		height: auto;
	}
	/* キャッチ / 写真 */
	.cpKvArea .catchArea{
		flex-direction: column-reverse;
		width: 100%;
		min-height: 225px;
		padding-top: 40px;
		position: relative;
	}
	.cpKvArea .catchArea .catch{
		gap: 4px 0;
		font-size: 1.8rem;
		position: absolute;
		bottom: -40px;
		left: 25px;
	}
	/* CASE */
	.cpKvArea .caseBox{
		display: flex;
		align-items: flex-end;
		width: fit-content;
		padding: 12px 10px 5px 10px;
		gap: 0 12px;
		text-align: left;
		top: -26px;
		right: 50%;
		bottom: auto;
		translate: 50% 0;
		order: -1;
	}
	.cpKvArea .caseBox .case{
		padding-bottom: 2px;
		font-size: 1rem;
		top: 11px;
		left: 11px;
	}
	.cpKvArea .caseBox .num{
		font-size: 2.5rem;
		white-space: nowrap;
	}
	.cpKvArea .caseBox .department{
		margin-block: 0 5px;
		font-size: 1rem;
		white-space: nowrap;
	}
	.cpKvArea .caseBox .department span.sp{
		display: inline-block;
	}
	.cpKvArea .caseBox .name{
		padding-bottom: 5px;
		font-size: 1.5rem;
		font-weight: 800;
		line-height: 100%;
		white-space: nowrap;
	}
	.cpKvArea .caseBox .name .fsS{
		font-size: 1.2rem;
	}
	/* 略歴 */
	.cpKvArea .dlistCP{
		width: 100%;
		height: auto;
		padding: 58px 25px 25px 25px;
		font-size: 1.2rem;
		background-color: var(--clNavy);
	}
	.cpKvArea .dlistCP dt{
		margin-bottom: 5px;
	}
	.cpKvArea .dlistCP dt::before{
		content: ' ';
		display: block;
		width: 4px;
		height: 1px;
		background-color: var(--clGold);
		position: absolute;
		top: 6px;
		left: 0;
	}
	.cpKvArea .dlistCP dd{
		padding-left: 8px;
	}
	/* 01 */
	.cp01 .catchArea{
		background:
			url(../images/bg_career01_sp.png) right top / cover no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp01 .cpKvArea .phBox img{
		width: 219px;
	}
	/* 02 */
	.cp02 .catchArea{
		background:
			url(../images/bg_career02_sp.png) left top / cover no-repeat,
			linear-gradient(-45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp02 .cpKvArea .phBox img{
		width: 189px;
	}
	/* 03 */
	.cp03 .catchArea{
		background:
			url(../images/bg_career03_sp.png) right top / cover no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp03 .cpKvArea .phBox img{
		width: 174px;
	}
	/* 04 */
	.cp04 .catchArea{
		background:
			url(../images/bg_career04_sp.png) left top / cover no-repeat,
			linear-gradient(-45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp04 .cpKvArea .phBox img{
		width: 219px;
	}
	/* 05 */
	.cp05 .catchArea{
		background:
			url(../images/bg_career05_sp.png) right top / cover no-repeat,
			linear-gradient(45deg, #063757 0%, #021521 30%, #000000 80%);
	}
	.cp05 .cpKvArea .phBox img{
		width: 177px;
	}

	/* 詳細
	========================================*/
	.cpCtsArea .cpDetailArea{
		width: 100%;
		padding: 0 25px 50px 25px;
		margin: 0;
	}
	/* キャリアパス */
	.cpDetailArea .cpArea{
		flex-direction: column;
		width: 100%;
	}
	.olistCP{
		flex-direction: column;
		gap: 0;
		width: 100%;
		padding: 20px 15px 20px 25px;
		margin-bottom: 30px;
	}
	.olistCP::before{
		width: 1px;
		height: calc(100% + 5px);
	}
	.olistCP li{
		width: 100%;
		position: relative;
	}
	.olistCP li::before{
		top: 0;
		left: -25px;
	}
	.olistCP li::after{
		left: -28px;
	}
	/* 年 */
	.olistCP li .yearBox{
		top: -28px;
		left: 0;
		white-space: nowrap;
	}
	.olistCP li .year{
		font-size: 1.7rem;
	}
	.olistCP li .year .num{
		font-size: 2rem;
		letter-spacing: 0;
	}
	.olistCP li .year .fsS{
		font-size: 1.5rem;
	}
	/* 見出し */
	.olistCP li .catch{
		margin-bottom: 7px;
		font-size: 1.5rem;
	}
	/* ボタン */
	a.btnJobLink{
		font-size: 1.2rem;
	}
	/* モーダル */
	.careerPathPage .modalContainer .mvBox{
		width: 90vw;
	}
	.careerPathPage .btnModalClose,
	.careerPathPage .btnModalClose:focus{
		right: -10px;
	}
	/* やりたいこと */
	.wantToArea{
		flex-direction: column;
		gap: 50px 0;
		width: 100%;
		margin-top: 30px;
	}
	.wantToBox{
		width: 100%;
	}
	.wantToBox .tit{
		padding: 2px 0 8px 18px;
		font-size: 1.2rem;
		font-weight: 500;
		position: relative;
	}
	.wantToBox .txt{
		padding: 28px 15px 30px 15px;
		font-size: 1.5rem;
		line-height: 160%;
	}
	.wantToBox:first-of-type .txt::after{
		top: auto;
		bottom: -28px;
		right: calc(50% - 6px);
		rotate: 90deg;
	}
	/* animation */
	.cpDetailArea.jsAnmStart{
		opacity: 1;
		animation: none;
	}


	/*
		仕掛け人たちのストーリー
	-----------------------------------------------------------------------------------------------*/
	.storyPage #cmnPageHead .tit{
		line-height: 115%;
	}
	.storyPage #cmnPageHead .lead{
		padding-right: 20px;
	}

	/* アンカー
	========================================*/
	.listStoryAnchor{
		flex-direction: column;
		gap: 20px 0;
		border-top: none;
		position: relative;
	}
	.listStoryAnchor::before{
		display: none;
	}
	.listStoryAnchor li{
		width: 100%;
	}
	.listStoryAnchor li::before{
		content: ' ';
		display: block;
		width: 100%;
		height: 100%;
		background: var(--patSlash);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.2;
	}
	.listStoryAnchor li a{
		gap: 0 20px;
		height: 78px;
		padding: 10px 25px 0 25px;
		border-top: 1px solid var(--clGold);
		border-bottom: 1px solid var(--clGold);
		position: relative;
	}
	.listStoryAnchor li:last-of-type a{
		border-bottom: none;
	}
	.listStoryAnchor li a::after{
		height: 10px;
		background: rgb(0 0 0 / 0.3) 50%;
		top: 72px;
		left: 50%;
	}
	@media (any-hover: hover){
		.listStoryAnchor li a:hover::after{
			height: 0;
			bottom: -6px;
			top: auto;
		}
	}
	/* サムネイル */
	.listStoryAnchor li a .thumb{
		width: 40px;
	}
	/* テキスト */
	.listStoryAnchor li a .txt{
		padding-bottom: 4px;
		font-size: 1.2rem;
		letter-spacing: 0.05em;
		line-height: 145%;
	}
	.listStoryAnchor li a .txt .num{
		width: 74px;
		min-height: 13px;
		font-size: 1rem;
		top: -7px;
		left: calc(50% - 37px);
	}

	/* KV
	========================================*/
	.storyKvArea{
		background: url(../images/bg_story_blue_sp.png) left top / auto 100% no-repeat #000000;
	}
	#story02 .storyKvArea{
		background-image: url(../images/bg_story_red_sp.png);
	}
	.storyKvCtsArea{
		flex-direction: column-reverse;
		align-items: center;
		gap: 30px 0;
		width: 100%;
		min-height: auto;
		padding: 35px 25px;
	}
	.storyKvCtsArea .outlineBox.jsAnmStart{
		animation-name: fadeInBtoT;
		animation-delay: var(--anmDelayBase);
	}
	/* タイトル */
	.storyKvCtsArea .outlineBox .titMain{
		gap: 0 10px;
		font-size: 1.2rem;
		line-height: 135%;
	}
	.storyKvCtsArea .outlineBox .titMain .label{
		width: 85px;
		font-size: 1.1rem;
	}
	/* キャッチ */
	.storyKvCtsArea .outlineBox .catch{
		margin-block: 17px 15px;
		font-size: 2rem;
		line-height: 145%;
	}
	/* 概要 */
	.storyKvCtsArea .outlineBox .titOutline{
		gap: 0 5px;
		margin-bottom: 5px;
		font-size: 1rem;
		letter-spacing: 0.1em;
	}
	/* 画像 */
	.storyKvCtsArea .phBox{
		align-self: center;
	}
	.storyKvCtsArea .phBox img{
		width: 230px;
	}

	/* 詳細
	========================================*/
	.storyDetailArea{
		padding: 25px 0 18px 24px;
		margin-top: 25px;
	}
	.storyDetailArea:last-of-type{
		padding-bottom: 30px;
	}
	/* EPISODEタイトル */
	.storyDetailArea .tit{
		padding: 0 5px;
		font-size: 1rem;
		top: 10px;
		left: 5px;
	}
	.storyDetailArea.profile .tit{
		padding: 5px 0;
	}
	/* プロフィール */
	.storyProfArea{
		display: flex;
		align-items: center;
		gap: 0 17px;
	}
	.storyProfArea .name{
		padding-top: 4px;
		font-size: 1.7rem;
	}
	.storyProfArea .department{
		margin-top: 5px;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	.storyProfArea .ph{
		width: 105px;
	}
	/* 詳細 */
	.storyDetailArea .catch{
		padding-top: 3px;
		margin-bottom: 12px;
		margin-right: -10px; /* iPhoneSE 文字落ち対策 */
		font-size: 1.6rem;
		letter-spacing: 0.075em;
	}
	.storyDetailArea .txt{
		line-height: 190%;
	}
	.storyDetailArea .txt:not(.tit + .txt){
		margin-top: 10px;
	}
	/* EPISODE 02 */
	.storyDetail2Col{
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.storyDetail2Col .storyDetailArea{
		width: auto;
	}
	.phStoryDetail01{
		order: -1;
		margin-top: 25px;
	}
	.phStoryDetail02{
		margin-top: 25px;
	}
	/* コラム */
	.storyColumnArea{
		flex-direction: column;
		align-items: flex-end;
		margin-block: 30px 60px;
	}
	.storyColumnArea::before{
		height: calc(100% - 40px);
	}
	.storyColumnArea .detailBox{
		padding: 25px 25px 60px 25px;
		margin: 30px auto 0 auto;
	}
	.storyColumnArea .detailBox .tit{
		font-size: 1.1rem;
		top: -24px;
		left: 10px;
	}
	.storyColumnArea .detailBox .catch{
		margin-bottom: 10px;
		font-size: 1.6rem;
		letter-spacing: 0.075em;
	}
	.storyColumnArea .phColumn{
		width: 220px;
		margin-top: -40px;
	}
}
@media only screen and (width <= 812px) and (orientation: landscape){
	
}