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

/*
	教科書出版の基礎知識
-----------------------------------------------------------------------------------------------*/
/* リード　2カラムエリア
============================== */
.informationPage #leadWrapper{
	margin-bottom: 140px;
}

/* grdBox */
.informationPage .grdBox .txt{
	text-align: justify;
}

/* listLead */
.informationPage .listLead{
	display: flex;
	flex-direction: column;
	gap: 40px 0;
	width: 460px;
}
.informationPage .listLead li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.informationPage .listLead li:nth-of-type(2){
	flex-direction: row-reverse;
}
.informationPage .listLead img{
	position: relative;
	z-index: 2;
}
.informationPage .listLead .txtArea{
	width: 350px;
	position: relative;
	z-index: 1;
}

/* listLead tit */
.informationPage .listLead .tit{
	border-bottom: 1px solid var(--clrDGray);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 100%;
	padding-bottom: 10px;
	margin-bottom: 10px;
	position: relative;
}
.informationPage .listLead .tit::before{
	content: " ";
	display: block;
	width: 1px;
	height: 50px;
	background-color: var(--clrDGray);
	position: absolute;
	bottom: -8px;
	left: -18px;
	transform: rotate(-45deg);
}
.informationPage .listLead li:nth-of-type(2) .tit::before{
	right: -18px;
	left: auto;
	transform: rotate(45deg);
}
.informationPage .listLead .tit span{
	display: inline-block;
	background-color: #333;
	color: #fff;
	font-size: 1rem;
	font-family: var(--fEn);
	line-height: 80%;
	padding: 7px 13px 5px 13px;
	margin-left: 15px;
	transform: translateY(-4px);
}

/* anm */
.informationPage .cmnClm2Area .grdBox .inBox{
	opacity: 0;
	animation: anmBlur 1.5s ease 1s forwards;
}
@media print, screen and (min-width:813px){
	.informationPage .cmnClm2Area .grayBox .inBox{
		animation: anmFadeIn 1.5s ease 2s forwards;
	}
}



/* 4年がかりで作る
============================== */
.informationPage #years4Wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* txtArea */
.informationPage #years4Wrapper .txtArea{
	width: 400px;
}

/* 図 */
.informationPage #years4Wrapper figure{
	position: relative;
}
.informationPage #years4Wrapper figure .tit{
	width: fit-content;
	background-color: #333;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 100%;
	padding: 10px 20px;
	position: absolute;
	transform: translateY(-50%);
}

/* 教科書ができるまで
============================== */
.informationPage #flowWrapper{
	padding: 120px 0 170px 0;
}

/* listFlow */
.informationPage .listFlow li{
	position: relative;
	padding-bottom: 60px;
}
.informationPage .listFlow li:last-of-type{
	padding-bottom: 0;
}
.informationPage .listFlow li:not(:last-of-type)::after{
	content: " ";
	display: block;
	width: 1px;
	height: 0;
	background-color: #333;
	position: absolute;
	top: 0;
	left: 60px;
	z-index: 1;
}

/* flowTitArea */
.informationPage .flowTitArea{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.informationPage .flowTitArea .ico{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	background-color: #fff;
	border: 1px solid #333;
	border-radius: 50%;
	margin-right: 30px;
}
@media print, screen and (min-width:813px){
	.informationPage .flowTitArea .tit{
		margin-bottom: 0;
	}
}
.informationPage .flowTitArea .txt{
	width: 830px;
	margin-left: auto;
}

/* jobArea */
.informationPage .jobArea,
.informationPage .jobArea .box{
	display: flex;
	justify-content: space-between;
}
.informationPage .jobArea{
	padding-left: 150px;
}
.informationPage .jobArea .box{
	width: 480px;
	background-color: #fff;
	padding: 30px;
	position: relative;
}
.informationPage .jobArea .tit{
	color: var(--clrBase);
	font-size: 2rem;
	font-weight: 700;
	line-height: 100%;
	position: absolute;
	top: 0;
	transform: translateY(-50%);
}
.informationPage .jobArea .box:nth-of-type(2) .tit{
	color: var(--clrDBlue);
}
.informationPage .jobArea .txtHS{
	width: 240px;
}

/* item */
.informationPage #flowWrapper .item{
	position: absolute;
}
.informationPage #flowWrapper li:nth-of-type(1) .item{
	bottom: -10px;
	left: 170px;
}
.informationPage #flowWrapper li:nth-of-type(3) .item{
	right: 90px;
	bottom: 50px;
}
.informationPage #flowWrapper li:nth-of-type(4) .item{
	bottom: -50px;
	left: 35px;
}

/* anm */
.informationPage .listFlow li.jsAnmStart::after{
	opacity: 0;
	animation: anmH100 1.5s ease 0.5s forwards;
}

/* INDEX
============================== */
.informationPage #indexWrapper{
	margin-top: -50px;
	position: relative;
}

/* item */
.informationPage #indexWrapper .item{
	position: absolute;
	bottom: 0;
}
.informationPage #indexWrapper .item:nth-of-type(1){
	left: 80px;
}
.informationPage #indexWrapper .item:nth-of-type(2){
	right: 80px;
}


/*
	営業職の仕事 / 編集開発職の仕事
-----------------------------------------------------------------------------------------------*/
/* リード
============================== */
.jobPage #leadWrapper{
	padding: 100px 0;
	margin-bottom: 120px;
}
.jobPage #leadWrapper .ctsArea{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* txtBox */
.jobPage #leadWrapper .txtBox{
	width: 400px;
}

/* 仕事内容
============================== */
.jobPage #jobPhWrapper{
	position: relative;
}
.jobPage .listJobPh{
	display: flex;
	flex-direction: column;
	gap: 100px 0;
}
.jobPage .listJobPh li{
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	padding-top: 130px;
	position: relative;
}
.jobPage .listJobPh li:nth-of-type(2n){
	justify-content: flex-end;
}

/* num */
.jobPage .listJobPh .num{
	height: 100%;
	writing-mode: vertical-rl;
	color: var(--clrBase);
	font-size: 1.3rem;
	font-family: var(--fEn);
	font-weight: 700;
	line-height: 80%;
	letter-spacing: 0;
	position: absolute;
	z-index: 3;
}
.jobPage .listJobPh .num::after{
	content: " ";
	display: block;
	width: 1px;
	height: calc(100% - 70px);
	background-color: currentColor;
	position: absolute;
	top: 70px;
	left: 5px;
}

/* txtBox */
.jobPage .listJobPh .txtBox{
	width: 600px;
	background-color: #fff;
	padding: 50px 60px 0 60px;
	position: relative;
	z-index: 2;
}

/* ph */
.jobPage .listJobPh img{
	object-fit: cover;
	width: 750px;
	height: 100%;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.jobPage .listJobPh li:nth-of-type(2n) img{
	right: auto;
	left: 0;
}

/* item */
.jobPage #jobPhWrapper .item{
	position: absolute;
	top: 620px;
	right: 100px;
	z-index: 4;
}

/* anm */
.jobPage .listJobPh .jsAnmStart > *{
	opacity: 0;
}
.jobPage .listJobPh .jsAnmStart .num{
	animation: anmFadeUp 1s ease 0.5s forwards;
}
@media print, screen and (min-width:813px){
	.jobPage .listJobPh .jsAnmStart .txtBox{
		animation: anmFadeLeft 1s ease 0.5s forwards;
	}
	.jobPage .listJobPh .jsAnmStart img{
		animation: anmFadeRight 1s ease 0.5s forwards, anmBlur 1.5s ease 0.5s forwards;
	}
	.jobPage .listJobPh li.jsAnmStart:nth-of-type(2n) .txtBox{
		animation: anmFadeRight 1s ease 0.5s forwards;
	}
	.jobPage .listJobPh li.jsAnmStart:nth-of-type(2n) img{
		animation: anmFadeLeft 1s ease 0.5s forwards, anmBlur 1.5s ease 0.5s forwards;
	}
}

/* 必須アイテム
============================== */
.jobPage #itemWrapper{
	padding: 80px 0 120px 0;
}
.jobPage #itemWrapper .ctsArea{
	position: relative;
}

/* item */
.jobPage #itemWrapper .item{
	position: absolute;
	top: -140px;
	right: -15px;
}

/* FLOW 入社後1年間の流れ
============================== */
.jobPage #flowWrapper{
	margin-top: -25px;
	position: relative;
}
@media print, screen and (min-width:813px){
	.jobPage .cmnFlowArea{
		padding-top: 50px;
	}
	.jobPage .cmnListFlow{
		gap: 0 30px;
	}
	.jobPage .cmnListFlow li{
		width: 290px;
	}
}

/* txtBg */
.jobPage .cmnListFlow .txtBg{
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(100% - 10px);
	height: 30px;
	background-color: var(--clrDBlue);
	text-align: center;
	color: #fff;
	font-weight: 700;
	position: absolute;
	top: -50px;
}
.jobPage .cmnListFlow .txtBg::after{
	content: " ";
	display: block;
	border: 15px solid transparent;
	border-right: 10px solid transparent;
	border-left: 10px solid var(--clrDBlue);
	position: absolute;
	top: 0;
	right: -20px;
}

/* tit */
.jobPage .cmnListFlow .tit{
	font-size: 1.8rem;
}

/* 配属 */
.jobPage .cmnListFlow li:nth-of-type(2){
	width: 500px;
}
.jobPage .cmnListFlow li:nth-of-type(2) .txtBg{
	background-color: var(--clrBase);
}
.jobPage .cmnListFlow li:nth-of-type(2) .txtBg::after{
	border-color: transparent transparent transparent var(--clrBase);
}

/* item */
.jobPage #flowWrapper .item{
	position: absolute;
	top: 90px;
	right: 60px;
}


/*
	営業職の仕事
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
============================== */
.salesPage #cmnTitWrapper .item{
	right: 30px;
	bottom: -50px;
}


/*
	編集開発職の仕事
-----------------------------------------------------------------------------------------------*/
/* ページタイトル
============================== */
.editorialPage #cmnTitWrapper .item{
	right: 30px;
	bottom: -70px;
}

/* 必須アイテム
============================== */
@media print, screen and (min-width:813px){
	.editorialPage .cmnListPhTxt li:nth-of-type(1) .tit{
		letter-spacing: 0;
	}
}


@media screen and (max-width:812px){
	/*
		教科書出版の基礎知識
	-----------------------------------------------------------------------------------------------*/
	/* リード　2カラムエリア
	============================== */
	.informationPage #leadWrapper{
		margin-bottom: 60px;
	}

	/* listLead */
	.informationPage .listLead{
		gap: 40px 0;
		width: 100%;
	}
	.informationPage .listLead li:nth-of-type(1) img{
		width: 50px;
	}
	.informationPage .listLead li:nth-of-type(2) img{
		width: 45px;
	}
	.informationPage .listLead .txtArea{
		width: calc(100% - 60px);
	}

	/* listLead tit */
	.informationPage .listLead .tit{
		font-size: 1.7rem;
	}
	.informationPage .listLead .tit::before{
		bottom: -41px;
		left: -19px;
		transform: rotate(-130deg);
	}
	.informationPage .listLead li:nth-of-type(2) .tit::before{
		right: -19px;
		transform: rotate(130deg);
	}
	.informationPage .listLead .tit span{
		letter-spacing: 0.1rem;
		padding: 7px 5px 5px 5px;
		margin-left: 10px;
		transform: translateY(-3px);
	}

	/* anm */
	.informationPage .cmnClm2Area .grayBox.jsAnmStart .inBox{
		animation: anmFadeIn 1.5s ease 1s forwards;
	}

	/* 4年がかりで作る
	============================== */
	.informationPage #years4Wrapper{
		flex-direction: column;
	}

	/* txtArea */
	.informationPage #years4Wrapper .txtArea{
		width: 100%;
		margin-bottom: 30px;
	}

	/* 図 */
	.informationPage #years4Wrapper figure .tit{
		font-size: 1.5rem;
		padding: 8px 15px;
		position: static;
		transform: translateY(0);
	}

	/* 教科書ができるまで
	============================== */
	.informationPage #flowWrapper{
		padding: 60px 0 120px 0;
	}

	/* listFlow */
	.informationPage .listFlow li{
		padding: 0 0 40px 80px;
	}
	.informationPage .listFlow li:not(:last-of-type)::after{
		left: 35px;
	}

	/* flowTitArea */
	.informationPage .flowTitArea{
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 30px;
	}
	.informationPage .flowTitArea .ico{
		flex-shrink: 0;
		width: 65px;
		height: 65px;
		margin-right: 0;
		position: absolute;
		left: -80px;
	}
	.informationPage .flowTitArea .ico img{
		width: 40px;
	}
	.informationPage .flowTitArea .txt{
		width: 100%;
	}

	/* jobArea */
	.informationPage .jobArea,
	.informationPage .jobArea .box{
		flex-direction: column;
	}
	.informationPage .jobArea{
		padding-left: 0;
		gap: 30px 0;
	}
	.informationPage .jobArea .box{
		gap: 20px 0;
		width: 100%;
		padding: 20px 15px 15px 15px;
	}
	.informationPage .jobArea .tit{
		font-size: 1.5rem;
	}
	.informationPage .jobArea .txtHS{
		width: 100%;
	}

	/* item */
	.informationPage #flowWrapper li:nth-of-type(1) .item{
		width: 45px;
		right: 10px;
		left: auto;
	}
	.informationPage #flowWrapper li:nth-of-type(3) .item{
		width: 130px;
		right: 0;
		bottom: -10px;
	}
	.informationPage #flowWrapper li:nth-of-type(4) .item{
		width: 130px;
		bottom: -5px;
		left: 0;
	}

	/* INDEX
	============================== */
	.informationPage #indexWrapper{
		margin-top: -25px;
	}

	/* item */
	.informationPage #indexWrapper .item{
		bottom: auto;
	}
	.informationPage #indexWrapper .item:nth-of-type(1){
		width: 50px;
		top: -60px;
		left: 50px;
	}
	.informationPage #indexWrapper .item:nth-of-type(2){
		width: 45px;
		top: -40px;
		right: 50px;
	}


	/*
		営業職の仕事 / 編集開発職の仕事
	-----------------------------------------------------------------------------------------------*/
	/* リード
	============================== */
	.jobPage #leadWrapper{
		padding: 60px 0;
		margin-bottom: 60px;
	}
	.jobPage #leadWrapper .ctsArea{
		flex-direction: column;
		gap: 30px 0;
	}

	/* txtBox */
	.jobPage #leadWrapper .txtBox{
		width: 100%;
	}

	/* 仕事内容
	============================== */
	.jobPage #jobPhWrapper .titBaseL{
		margin-bottom: 20px;
	}
	.jobPage .listJobPh{
		gap: 50px 0;
	}
	.jobPage .listJobPh li{
		flex-direction: column-reverse;
		min-height: initial;
		padding: 0 0 0 30px;
	}
	.jobPage .listJobPh li:nth-of-type(2n){
		align-items: flex-start;
		padding: 0 30px 0 0;
	}

	/* num */
	.jobPage .listJobPh .num{
		font-size: 1.2rem;
		left: 0;
	}
	.jobPage .listJobPh .num::after{
		left: 6px;
	}
	.jobPage .listJobPh li:nth-of-type(2n) .num{
		left: auto;
		right: 0;
	}
	.jobPage .listJobPh li:nth-of-type(2n) .num::after{
		left: auto;
		right: 3px;
	}

	/* txtBox */
	.jobPage .listJobPh .txtBox,
	.jobPage .listJobPh li:nth-of-type(2n) .txtBox{
		width: 100%;
		padding: 20px 0 0 0;
	}

	/* ph */
	.jobPage .listJobPh img{
		width: 100%;
		position: static;
	}

	/* item */
	.jobPage #jobPhWrapper .item{
		width: 80px;
		top: -30px;
		right: 30px;
	}

	/* anm */
	.jobPage .listJobPh .jsAnmStart .txtBox,
	.jobPage .listJobPh .jsAnmStart img{
		animation: anmFadeRight 1s ease 0.5s forwards;
	}
	.jobPage .listJobPh li.jsAnmStart:nth-of-type(2n) .txtBox,
	.jobPage .listJobPh li.jsAnmStart:nth-of-type(2n) img{
		animation: anmFadeLeft 1s ease 0.5s forwards;
	}

	/* 必須アイテム
	============================== */
	.jobPage #itemWrapper{
		padding: 60px 0 70px 0;
	}

	/* item */
	.jobPage #itemWrapper .item{
		width: 120px;
		top: -90px;
		right: 15px;
	}

	/* FLOW 入社後1年間の流れ
	============================== */
	.jobPage #flowWrapper{
		margin-top: -20px;
	}
	.cmnListFlow {
		margin-left: 45px;
	}
	.jobPage .cmnListFlow li{
		min-height: 120px;
	}
	.jobPage .cmnListFlow li.none{
		min-height: initial;
	}

	/* txtBg */
	.jobPage .cmnListFlow .txtBg{
		width: 30px;
		height: calc(100% - 18px);
		writing-mode: vertical-rl;
		line-height: 100%;
		margin-bottom: 0;
		top: 8px;
		left: -60px;
	}
	.jobPage .cmnListFlow .txtBg::after{
		border-width: 10px 15px;
		border-color: var(--clrDBlue) transparent transparent transparent;
		top: auto;
		right: 0;
		bottom: -20px;
	}

	/* tit */
	.jobPage .cmnListFlow .tit{
		font-size: 1.6rem;
	}

	/* 配属 */
	.jobPage .cmnListFlow li:nth-of-type(2){
		width: 100%;
	}
	.jobPage .cmnListFlow li:nth-of-type(2) .txtBg::after{
		border-color: var(--clrBase) transparent transparent transparent;
	}

	/* item */
	.jobPage #flowWrapper .item{
		width: 40px;
	}
	.jobPage #flowWrapper .item.sp:nth-of-type(2){
		top: -20px;
		left: 30px;
	}
	.jobPage #flowWrapper .item.sp:nth-of-type(3){
		top: -13px;
		right: 30px;
	}


	/*
		営業職の仕事
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.salesPage #cmnTitWrapper .item{
		width: 165px;
		right: 10px;
		bottom: -90px;
	}


	/*
		編集開発職の仕事
	-----------------------------------------------------------------------------------------------*/
	/* ページタイトル
	============================== */
	.editorialPage #cmnTitWrapper .item{
		width: 170px;
		right: -10px;
		bottom: -90px;
	}
}