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

/*
	仕事体験
-----------------------------------------------------------------------------------------------*/
.workExperiencePage #ctsWrapper{
	padding: 0;
}

/* KV
========================================*/
.workExperiencePage #cmnPageHead{
	height: 360px;
}
.workExperiencePage #cmnPageHead .enCategory{
	font-size: 14.8rem;
	left: max(calc(50% - 324px), 360px);
}

/* Table テーブル
========================================*/
.tblBase{
	border: 1px solid var(--clNavy);
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
/* テーブルが最後に来た時のアキ */
#coursesSelect02 .tblBase,
#coursesSelect03 .tblBase,
#coursesSelect04 .tblBase{
	margin-top: 60px;
}
.tblBase th{
	width: 180px;
	background:rgb(6 55 87 / 0.08);
	border-bottom: 1px solid rgb(6 55 87 / 0.5);
	color: var(--clNavy);
	font-size: 1.4rem;
	font-weight: 500;
}
.tblBase td{
	border-bottom: 1px solid rgb(6 55 87 / 0.5);
	font-size: 1.4rem;
	font-weight: 400;
	padding:20px;
}
.tblBase tr:last-child th,
.tblBase tr:last-child td {
  border-bottom: none;
}
/* リスト */
.listTblIn{
	margin-top: 10px;
}
.listTblIn li{
	position: relative;
	margin: 5px 0 0 0;
	padding: 0 0 0 15px;
}
.listTblIn li::before{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}
/* リスト※印 */
.listTblIn.notes li{
	font-size: 1.2rem;
}
.listTblIn.notes li::before{
	content: "※";
}
/* リスト●印　ベーシック */
.listTblIn.basic li.tit{
	font-weight: 700;
	padding: 0 0 0 20px;
}
#coursesSelect02 .listTblIn.basic .tit,
#coursesSelect03 .listTblIn.basic .tit{/* 細字 */
	font-weight: 400;
}

.listTblIn.basic li.tit::before{
	content: "●";
	color: var(--clGold);
}
.listTblIn.basic li{
	font-size: 1.4rem;
}
.listTblIn.basic li::before{
	content: "・";
}

/*　採用フロー
========================================*/
.workExperiencePage .flowArea{
	padding-top:40px;
}
.workExperiencePage .flowTit{
	font-size: 1.8rem;
	font-weight: 800;
	padding-left: 20px;
	margin-bottom: 20px;
	position: relative;
}
.workExperiencePage .flowTit::before{
	content: "";
	background: #000;
	display: inline-block;
	position: absolute;
	width: 3px;
	height: 30px;
	left: 0;
}
.workExperiencePage .flowArea .listFlow{
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.workExperiencePage .flowArea .listFlow li{
	flex: 1 1 0;
	background: rgb(255 255 255 / 0.25);
	border: 1px solid var(--clNavy);
	color: var(--clNavy);
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	padding-block: 20px;
	position: relative;
}
/* 黒三角 */
.workExperiencePage .flowArea .listFlow li::after{
	content: ' ';
	display: block;
	width: 6px;
	height: 9px;
	background: url(../images/ico_arrow_career_want.svg) left top no-repeat;
	background-size: 6px 9px;
	position: absolute;
	top: calc(50% - 3px);
	right: -15px;
}
.workExperiencePage .flowArea .listFlow li:last-child::after {
  content: none;
}

/* リード文
========================================*/
#workExperienceLied .txtLied{
	width: var(--col1WidthNarrow);
	margin: 0 auto;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 200%;
	letter-spacing: 0.07em;
	position: relative;
	z-index: 2;
	margin-bottom: 100px;
}
#workExperienceLied .txtLied .txtRed{
	color: var(--clRed);
}

/* ホリプロの仕事体験で得られるスキル
========================================*/
#workExpSkill{
	margin-bottom: 150px;
}
.workExperiencePage .mainTit{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 60px;
	margin-top: -6px;
	font-size: 2.6rem;
	font-weight: 900;
	letter-spacing: 0.15em;
	line-height: 150%;
	text-align: center;
	position: relative;
	top: -20px;
}
.workExperiencePage .mainTit::before,
.workExperiencePage .mainTit::after{
	content: " ";
	flex: 1 0 auto;
	height: 1px;
	background-color: rgb(0 0 0 / 0.5);
}
#workExpSkill .mainTit .mainSub{
	position: relative;
}
#workExpSkill .mainTit .mainSub::before,
#workExpSkill .mainTit .mainSub::after{
	content: " ";
	display: block;
	flex: 1 0 auto;
	width: 1px;
	height: 80px;
	background-color: #000;
	position: absolute;
	top: 0;
}
#workExpSkill .mainTit .mainSub::before{
	left: -30px;
	transform: rotate(-30deg);
}
#workExpSkill .mainTit .mainSub::after{
	right: -30px;
	transform: rotate(30deg);
}
.listSkill{
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 30px;
}
.listSkill li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	width: 170px;
}
.listSkill li .icoBox{
	background: #fff;
	border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
	width: 126px;
	aspect-ratio: 1 / 1;
}
.listSkill li .icoBox img{
	width: 65px;
}
/* ラストだけ位置変ええる */
.listSkill li:nth-child(4) .icoBox img{
	margin-left: 11px;
}

.listSkill li .tit{
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--clNavy);
	text-decoration: underline;
	text-underline-offset:8px;
}

/* 共通タイトル
========================================*/
.workExperiencePage #workExpProgram .mainTit .mainSubEn,
.workExperiencePage #workExpVoice .mainTit .mainSubEn{
	font-family: var(--ffEn);
	font-size: 5.0rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--clNavy);
	position: relative;
}
.workExperiencePage .mainTit .mainSubJp{
	font-size: 1.6rem;
	position: absolute;
	bottom:-40px ;
	letter-spacing: 0.1em;
	left: 50%;
	transform: translateX(-50%);
	width: 230px;
	}

/*　プログラム
========================================*/
#workExpProgram {
	margin-bottom: 50px;
}
#workExpProgram .ctsArea{
	width: var(--col1WidthNarrow);
	padding: 40px 30px 80px 30px;
}
/*タブ
-------------------- */
.programTabList{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 3px solid var(--clGold);
	gap:8px;
	height: 70px;
}
.programTab{
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((100% - 24px) / 4);
	appearance: none;
	border: 0;
	background: var(--clGray);
	color: #666;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 140%;
	cursor: pointer;
	transition: var(--trstCmn);
	text-align: center;
}
.programTab:hover{
	background: #BEBEBE;;
}
.programTab.is-active{
	background: var(--clGold);
	color: #fff;
}
/* パネル
-------------------- */
.program{
	position: relative;
}
.programPanel{
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	border: 1px solid var(--clGold);
}
.programPanel .programTitle{
	opacity: 0;
	transition: opacity 0.8s;
}
.programPanel .programBody{
	opacity: 0;
	transition: opacity 1.3s;
}

.programPanel.is-active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	position: relative;
	background: rgb(255 255 255 / 0.25);
}
.programPanel.is-active .programTitle,
.programPanel.is-active .programBody{
	opacity: 1;
}
/* タブヘッダー
-------------------- */
.programHead{
	background: var(--clNavy);
	color: #fff;
	padding: 40px 45px;
}
.programTitle{
	margin: 0;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 150%;
}

/* 本文
-------------------- */
.programBody{
	padding: 40px;
}
.programFlow{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 40px;
}
.programFlow li{
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
}
.programFlowRow{
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 22px;
	align-items: center;
}
.programStep{
	min-height: 62px;
	width: 246px;
	border: 1px solid var(--clNavy);
	background: rgb(255 255 255 / 0.25);
	display: flex;
	align-items: center;
  justify-content: center;
	padding: 10px 18px;
	position: relative;
}
.programStepNo{
	color: var(--clGold);
	font-family: var(--ffEn);
	font-size: 1.3rem;
	font-weight: 500;
	position: absolute;
	top: 5px;
	left: 8px;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset:5px;
}
.programStepText{
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--clNavy);
	line-height: 140%;
}
.programDesc{
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 180%;
}
.programDesc span{
	font-size: 1.2rem;
}
/* 黒三角 */
.programFlow li::after{
	content: " ";
	display: block;
	width: 13px;
	height: 10px;
	background: url(../images/ico_arrow_career_want.svg) left top no-repeat;
	background-size: 13px 10px;
	position: absolute;
	bottom:-20px;
	left: 120px;
	transform: rotate(90deg);
}
.programFlow li:last-child::after {
  content: none;
}

/* ボイス
========================================*/
#workExpVoice{
	background: url("../images/bg_work_exp_voice_pc.png") center / cover no-repeat;
}
#workExpVoice .voiceBox{
	position: relative;
	height: 620px;
}
/* 吹き出し */
[class *= "voiceTxt"]{
	color: #fff;
	font-weight: 700;
   width: fit-content;
	padding: 20px 30px;
	position: absolute;
	text-align: center;
	opacity: 0;
}
.voiceBox.jsAnmStart{
	opacity: 1;
}
.voiceBox.jsAnmStart [class *= "voiceTxt"]{
	animation: fadeInBtoT var(--anmDurationBase) 1 normal var(--anmDelayBase) var(--anmEasingBase) forwards;
}
.voiceBox.jsAnmStart .voiceTxt02{
	animation-delay: 0.5s;
}
.voiceBox.jsAnmStart .voiceTxt03{
	animation-delay: 0.6s;
}
.voiceBox.jsAnmStart .voiceTxt04{
	animation-delay: 0.7s;
}
.voiceBox.jsAnmStart .voiceTxt05{
	animation-delay: 0.8s;
}
[class *= "voiceTxt"]::before {
	content: " ";
	display: block;
	width: 40px;
	height: 22px;
	right: 45px;
	position: absolute;
	clip-path: polygon(37% 0, 100% 100%, 100% 0);
	bottom: -20px;
	z-index: 0;
}
[class *= "voiceTxt"].sizeS{
	font-size:1.4rem;
}
[class *= "voiceTxt"].sizeM{
	font-size:2.0rem;
}
[class *= "voiceTxt"].sizeL{
	font-size:2.4rem;
}
.voiceBox .voiceTxt01 {
	top: 50px;
	left: 140px;
	padding: 30px 40px;
}
.voiceBox .voiceTxt02 {
	bottom: 120px;
	left: 250px;
	padding: 30px 20px;
}
.voiceBox .voiceTxt02::before{
	left: 60px;
	bottom: -20px;
}
.voiceBox .voiceTxt03 {
	top: 95px;
	left: 413px;
	padding: 30px;
}
.voiceBox .voiceTxt03::before{
	width: 60px;
	height: 32px;
	right: 30px;
	bottom: -30px;
	clip-path: polygon(0 0, 0 100%, 48% 0);
}
.voiceBox .voiceTxt04 {
	bottom: 120px;
	right: 250px;
	padding: 30px 40px;
}
.voiceBox .voiceTxt04::before{
	width: 50px;
	height: 22px;
	right: 80px;
	bottom: -20px;
	clip-path: polygon(0 0, 0 100%, 48% 0);
}
.voiceBox .voiceTxt05 {
	top: 133px;
	right: 70px;
	padding: 40px 25px;
}
.voiceBox .voiceTxt05::before{
	width: 50px;
	height: 22px;
	right: 80px;
	bottom: -20px;
	clip-path: polygon(0 0, 0 100%, 48% 0);
}
.voiceBox .clrGld,
.voiceBox .clrGld::before{
	background: var(--clGold);
}
.voiceBox .clrGr,
.voiceBox .clrGr::before{
	background: var(--clGreen);
}
.voiceBox .clrRed,
.voiceBox .clrRed::before{
	background: var(--clRed);
}
.voiceBox .clrNavy,
.voiceBox .clrNavy::before{
	background: var(--clNavy);
}


/* エントリー
========================================*/
#workExpFlow{
	padding-bottom: 60px;
}
.ctsArea.flowArea{
	width: var(--col1WidthNarrow);
}
#workExpEntry{
	background: var(--clGray);
	padding-block: 50px;
	text-align: center;
	margin: 0 auto;
}
#workExpEntry a{
	color: #fff;
	background: var(--clRed);
	font-size: 1.8rem;
	font-weight: 400;
	padding: 20px 30px;
	width: 330px;
	display: block;
	margin: 0 auto;
	transition: var(--trstCmn);
}
#workExpEntry a .entryEn{
	font-family: var(--ffEn);
	font-size: 2.2rem;
	font-weight: 700;
	font-style: italic;
	padding-left: 20px;
}
@media (any-hover: hover){
	#workExpEntry a:hover{
		background-color: var(--clDRed);
	}
}

/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	/*
		仕事体験
	-----------------------------------------------------------------------------------------------*/
	.workExperiencePage #cmnPageHead .enCategory {
		font-size: 6.5rem;
		left: 3em;
	}
	/* KV
	========================================*/
	.workExperiencePage #cmnPageHead{
		height: 220px;
	}
	
	/* Table テーブル
	========================================*/
	/* テーブルが最後に来た時のアキ */
	#coursesSelect02 .tblBase,
	#coursesSelect03 .tblBase,
	#coursesSelect04 .tblBase{
		margin-top: 30px;
	}
	.tblBase th{
		width: 100%;
		display: block;
		padding-block: 10px;
	}
	.tblBase td{
		width: 100%;
		display: block;
		font-size: 1.3rem;
		padding:15px;
	}
	/* リスト */
	.listTblIn{
		margin-top: 5px;
	}
	.listTblIn.basic li{
		font-size: 1.3rem;
	}

	/*　採用フロー
	========================================*/
	.workExperiencePage .flowArea{
		padding-top:30px;
	}
	.workExperiencePage .flowTit{
		font-size: 1.6rem;
		padding-left: 15px;
	}
	.workExperiencePage .flowTit::before{
		height: 26px;
	}
	.workExperiencePage .flowArea .listFlow{
		flex-direction: column;
	}
	.workExperiencePage .flowArea .listFlow li{
		font-size: 1.3rem;
		padding-block: 8px;
	}
	/* 黒三角 */
	.workExperiencePage .flowArea .listFlow li::after{
		top: 44px;
		right: 50%;
		transform:rotate(90deg) translateX(-50%);
	}

	/* リード文
	========================================*/
	#workExperienceLied .txtLied{
		width: 100%;
		font-size: 1.4rem;
		line-height: 180%;
		letter-spacing: 0.07em;
		margin-bottom: 100px;
		padding-inline: 25px;
	}

	/* ホリプロの仕事体験で得られるスキル
	========================================*/
	#workExpSkill{
		margin-bottom: 90px;
	}
	.workExperiencePage .mainTit{
		gap: 0 30px;
		margin-top: -6px;
		font-size: 2.0rem;
		line-height: 140%;
		top: -15px;
	}
	#workExpSkill .mainTit .mainSub::before,
	#workExpSkill .mainTit .mainSub::after{
		height: 70px;
		top: -5px;
	}
	#workExpSkill .mainTit .mainSub::before{
		left: -15px;
	}
	#workExpSkill .mainTit .mainSub::after{
		right: -15px;
	}
	.listSkill{
		flex-wrap: wrap;
		gap:30px 0;
		padding-inline: 20px;
	}
	.listSkill li {
		gap: 10px;
		width: calc(50% - 20px); /* 2カラム */
	}
	.listSkill li .icoBox{
		width: 100px;
	}
	.listSkill li .icoBox img{
		width: 55px;
	}
	.listSkill li:nth-child(4) .icoBox img{
		margin-left:8px
	}
	.listSkill li .tit{
		font-size: 1.4rem;
	}
	/* 共通タイトル
	========================================*/
	.workExperiencePage #workExpProgram .mainTit .mainSubEn,
	.workExperiencePage #workExpVoice .mainTit .mainSubEn{
		font-size: 3.4rem;
	}
	.workExperiencePage .mainTit .mainSubJp{
		font-size: 1.3rem;
		bottom: -28px;
		width: 200px;
	}
	
	/*　プログラム
	========================================*/
	#workExpProgram .ctsArea {
		width: var(--col1WidthNarrow);
		padding: 40px 25px 40px 25px;
	}
	/*タブ
	-------------------- */
	.programTabList{
		height: auto;
		padding-bottom: 8px;
	}
	.programTab{
		width: calc((100% - 8px) / 2);
		font-size: 1.2rem;
		height: 70px;
	}
	/* タブヘッダー
	-------------------- */
	.programHead{
		padding: 20px 10px;
	}
	.programTitle{
		font-size: 1.8rem;
		text-align: center;
	}

	/* 本文
	-------------------- */
	.programBody{
		padding: 20px;
	}
	.programFlow{
		gap: 35px 0;
		margin-bottom: 40px;
	}
	.programFlow li{
		flex-direction: column;
		gap: 10px;
	}
	/* 黒三角 */
	.programFlow li::after{
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
	.programStep{
		width: 100%;
		min-height: 52px;
	}
	.programStepNo{
		font-size: 1.0rem;
	}
	.programStepText{
		font-size: 1.4rem;
	}
	.programDesc{
		font-size: 1.2rem;
		line-height: 140%;
	}
	.programDesc span{
		font-size: 1.0rem;
	}

	/* ボイス
	========================================*/
	#workExpVoice{
		min-height:650px;
		background: url("../images/bg_work_exp_voice_sp.png") center / cover no-repeat;
	}
	#workExpVoice .voiceBox{
		min-height:650px;
		height: 100%;
	}
	/* 吹き出し */
	[class *= "voiceTxt"]{
		padding: 10px 20px;
	}
	[class *= "voiceTxt"]::before {
		width: 28px;
		height: 22px;
	}
	[class *= "voiceTxt"].sizeS{
		font-size:1.2rem;
	}
	[class *= "voiceTxt"].sizeM{
		font-size:1.4rem;
	}
	[class *= "voiceTxt"].sizeL{
		font-size:1.6rem;
	}
	.voiceBox .voiceTxt01 {
		top: 40px;
		left: 25px;
		padding: 15px;
	}
	.voiceBox .voiceTxt02 {
		bottom: auto;
		top:160px;
		left: auto;
		right: 25px;		
		padding: 15px;
	}
	.voiceBox .voiceTxt03 {
		top: 287px;
		left: 25px;
		padding: 15px;
	}
	.voiceBox .voiceTxt03::before{
		width: 40px;
		height: 22px;
		bottom: -20px;
	}
	.voiceBox .voiceTxt04 {
		bottom: 155px;
		right: 25px;
		padding: 15px 20px;
	}
	.voiceBox .voiceTxt04::before{
		width: 40px;
		}
	.voiceBox .voiceTxt05 {
		top: auto;
		bottom:40px;
		right: auto;
		left: 25px;
		padding: 15px;
	}
	.voiceBox .voiceTxt05::before{
		width: 40px;
		height: 22px;
	}

	/* エントリー
	========================================*/
	#workExpFlow{
		padding-bottom: 60px;
	}
	.ctsArea.flowArea{
		width: var(--col1WidthNarrow);
	}
	#workExpEntry{
		padding: 40px 25px;
	}
	#workExpEntry a{
		font-size: 1.6rem;
		width: 270px;
		padding-block: 20px;
	}
	#workExpEntry a .entryEn{
		font-size: 1.9rem;
	}
	
}
@media only screen and (width <= 812px) and (orientation: landscape){
	
}