@charset "UTF-8";

/*===================================
	共通
===================================*/
h3{
	margin-bottom:40px;
	display:flex;
	color:#212476;
	font-size:2.6rem;
	line-height:4rem;
	font-weight:700;
	align-items:center;
}
h3:before{
	content:"";
	min-width:10px;
	min-height:10px;
	margin-right:30px;
	border-radius:50%;
	background:#e60012;
}
h4{
	margin-bottom:40px;
	font-size:2.4rem;
	line-height:4rem;
	color:#212476;
	padding-bottom:20px;
	border-bottom:1px solid #212476;
}
* + h4{ margin-top:80px; }

h5{
	color:#212476;
	font-size:2rem;
	line-height:3rem;
	padding-bottom:15px;
}
h5:after{
	content:"";
	width:24px;
	height:4px;
	margin-top:10px;
	display:block;
	background:#e60012;
}
strong{ color:#212476; }

.titleArea{
	background:#f4f4f4;
	padding-top: 150px;
	padding-left: 70px;
	padding-bottom: 15px;
}
.titleArea h1{
	font-size:4.8rem;
	line-height:6.8rem;
	letter-spacing:0.12em;
	color:#1d2088;
}

.titleArea .bread{margin-top: 95px;}
.titleArea .bread li{ display:inline-block; font-size:1.4rem; font-weight:500; }
.titleArea .bread li + li:before{
	content:"";
	width:7px;
	height:12px;
	margin:0 10px;
	display:inline-block;
	background:url(../img/arrow-gray.svg)100% / 100% no-repeat;
}
.titleArea .bread li a{color:#666666;text-decoration:none;}
.titleArea .bread li a:hover{ text-decoration:underline!important; }



/*イメージ + h3*/
.titleImage{ margin-bottom:40px; position:relative; }
.titleImage h3{ position:absolute; padding:30px 40px 20px 0; margin-bottom:0; background:#ffffff; bottom:0; }
.titleImage img{ width:100%; }

@media print, screen and (max-width:1080px) {
	.titleArea h1{
		font-size:4rem;
		line-height:6rem;
	}
	.titleArea {
		padding-top:140px;
		padding-left:20px;
		padding-right:20px;
	}
	.titleArea .bread {
		margin-top:80px;
	}
}
@media print, screen and (max-width:600px) {
	.titleArea { padding-top:120px; }
	.titleArea .bread {margin-top: 50px;}
	.titleArea h1{
		font-size: 3.2rem;
		line-height:4rem;
	}
	h3{
		font-size:2.2rem;
		line-height:3.4rem;
	}
	h3:before{ margin-right:20px; }
	.titleImage { margin-bottom:20px; }

	h4{
		margin-bottom:20px;
		font-size:2rem;
		line-height:3.6rem;
	}
	.titleImage img {
		width:100%;
		object-fit:cover;
		height: 160px;
	}
	.titleImage h3{ font-size:2rem; padding:15px 20px 10px 0; }
	* + h4{ margin-top:60px; }
}


/*コンテンツ枠*/
.page-flex{ display:flex; }
.js-locationNav{
	width:20%;
	min-width:200px;
	margin-left: 70px;
	padding:80px 50px 120px 0;
}
.js-locationNav > div{ position:sticky; top:130px; }
.js-locationNav ul > li + li{
	margin-top:25px;
}
.js-locationNav ul > li a{
	width:100%;
	display:block;
	text-decoration:none;
	padding-left: 30px;
	color: #666666;
	font-weight: 500;
}
.js-locationNav a:hover{
	font-weight:700;
	color:#1d2088;
	position:relative;
}
@media print, screen and (max-width:1500px) {
	.js-locationNav{ width:200px; }
	.content-wrap {width: calc(100% - 200px);}
}

@media print, screen and (min-width:1081px) {
	.js-locationNav a:before{
		content:"";
		display:block;
		width:8px;
		height:8px;
		border-radius:50%;
		background:#e60012;
		position:absolute;
		top:50%;
		left: 0;
		transform:translateY(-50%);
		opacity:0;
		visibility:hidden;
		transition:opacity 0.3s ease;
	}
	.js-locationNav .is-current:before{
		opacity:1;
		visibility:visible;
	}
	.js-locationNav .is-current{
		font-weight:700;
		color:#1d2088;
		position:relative;
	}
}
.js-locationNav > div > p{
	display:block;
	width:156px;
	margin-bottom: 30px;
	padding:10px 20px;
	text-align:center;
	color:#212476;
	border:1px solid #212476;
	font-weight:700;
}

/*横並びコンテンツ幅*/
.page-flex .content-wrap{
	width:80%;
	margin-right:60px;
}
.page-flex .content-wrap > section{
	margin:80px 0 100px;
}

@media print, screen and (max-width:1080px) {
	.page-flex{ display:block; }

	.js-locationNav{ margin:0; padding: 60px 20px 0; }

	.js-locationNav ul{ position:static; display:flex; flex-wrap:wrap ;border-bottom:1px solid #888888; padding-bottom:15px; }
	.js-locationNav ul > li{ position:relative; }
	.js-locationNav ul > li + li{
		margin-top:0;
		margin-left:60px;
	}
	.js-locationNav ul > li a{ padding-left:0; padding-right:30px; }
	.js-locationNav ul > li:after {
		content:"";
		width:12px;
		height:7px;
		display:block;
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		right:0;
		background:url(../img/arrow-down-gray.svg) 100% / 100% no-repeat;
		transition:.2s;
	}
	.js-locationNav,
	.page-flex .content-wrap{ width:100%; min-width:100%; margin:0; }
	.page-flex .content-wrap > section{
		margin: 60px 0 80px;
		padding:0 20px;
	}
	.sideBox{ display:none; }
}

@media print, screen and (max-width:900px) {
	.js-locationNav ul > li{width:calc((100% - 40px) / 2);margin-right:40px;margin-bottom: 15px;}
	.js-locationNav ul > li:nth-of-type(2n){ margin-right:0; }
	.js-locationNav ul > li + li{ margin-left:0; }
}
.page-flex .content-wrap > section > section + section{ margin-top:100px; }

@media print, screen and (max-width:600px) {
	.page-flex .content-wrap > section > section + section {margin-top: 80px;}
}
.flex-wrap{ display:flex; align-items:flex-start; }
.image img{ width:100%; }

.linebreak{ display:inline-block; }

/*===================================
	採用情報
===================================*/
#next-content.recruit h2 + p{ margin-bottom:50px; }

@media print, screen and (max-width:900px) {
	#next-content.recruit h4 br{ display:none; }
}
/*=======* 仕事を知る *=======*/

/*モデル社員の1日*/
.support > ul,
.support > div{
	width:calc((100% - 60px) / 2);
}
.support > ul{ margin-right:60px; }
.support > ul li{
	color:#212476;
	font-size:2rem;
	line-height:4rem;
	font-weight:700;
}
.support > ul li > p{
	margin-top:10px;
	color:#222222;
	font-size:1.6rem;
	line-height:3.2rem;
	font-weight:400;
	margin-left:1rem;
}
.support > div{ margin-left:70px; }
.support > div *{ width:100%; }

.support > div dt{ margin-bottom:15px; }
.support > div .place-name{
	margin-bottom:10px;
	color:#212476;
	font-weight:700;
	font-size:1.8rem;
}
.support > div dd:not(.place-name){
	line-height:3.2rem;
}
.support > div dl + dl{
	margin-top:40px;
}
@media print, screen and (max-width:900px) {
	.support{ display:block; }
	.support > ul, .support > div{ width:100%; }
	.support > ul{ margin-right:0; margin-bottom:40px; }
	.support > div{ margin-left:0; }
}
@media print, screen and (max-width:600px) {
	.support > ul li{
		font-size:1.8rem;
		line-height:3.8rem;
	}
}

/*スケジュール*/
.schedule .flex-wrap > div{ width:calc((100% - 60px) / 2); }
.schedule .flex-wrap > div + div{ margin-left:60px; }

.schedule dl{ display:flex; padding-bottom:60px; position:relative; }
.schedule dl dt{
	width:100px;
	height:100px;
	margin-right:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	color:#fff;
	font-size:2.2rem;
	font-weight:500;
	font-family:'Outfit';
}
.schedule dl dd{ width:calc(100% - 120px); margin-top:20px; }
.schedule dl dd span{
	margin-bottom:15px;
	display:block;
	color:#212476;
	font-weight:700;
	font-size:2rem;
}
.schedule > div > div{ position:relative; }
.schedule dl:not(:last-of-type):after{
	content:"";
	height:100%;
	width:2px;
	display:block;
	position:absolute;
	top:0;
	left:50px;
	z-index:-1;
}
.schedule.blue dl dt,
.schedule.blue dl:not(:last-of-type):after{
	background:#234d99;
}
.schedule.green dl dt,
.schedule.green dl:not(:last-of-type):after{
	background:#017d6e;
}
@media print, screen and (max-width:900px) {
	.schedule .flex-wrap{ display:block; }
	.schedule .flex-wrap > div + div { margin-left:0; }
	.schedule .flex-wrap > div { width:100%; }
	.schedule dl{ padding-bottom:40px; }
	.schedule dl:last-of-type:after{
		content:"";
		height:100%;
		width:2px;
		display:block;
		position:absolute;
		top:0;
		left:50px;
		z-index:-1;
	}
	.schedule.blue dl:last-of-type:after{ background:#234d99; }
	.schedule.green dl:last-of-type:after{ background:#017d6e; }
	.schedule .flex-wrap > div:last-of-type dl:last-of-type:after{ content:none; }
	.schedule dl dt{
		width:80px;
		height:80px;
		font-size:2rem;
	}
	.schedule dl:last-of-type:after,
	.schedule dl:not(:last-of-type):after{ left:40px; }
	.schedule dl dd { width:calc(100% - 100px); }
}
/*魅力*/
.charm{ display:flex; align-items:flex-start; }
.charm + .charm{ margin-top:50px; }
.charm dt{ width:120px; margin-right:40px; padding:5px; text-align:center; color:#fff; font-size:1.8rem; font-weight:700; background:#017d6e; }
.charm dd{ width:calc(100% - 160px); line-height:3.2rem; }
.charm dd strong{ display:block; margin-bottom:20px; font-size:2rem; }

@media print, screen and (max-width:600px) {
	.charm{ display:block; }
	.charm dt,
	.charm dd{ width:100%; margin-right:0; }
	.charm dt{ margin-bottom:20px; }
}

/*=======* 働く環境 *=======*/

/*河村産業所の働き方*/
.careerBox{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-rows:repeat(5, 1fr);
	grid-column-gap:30px;
	grid-row-gap:30px;
}
.careerBox li{ box-shadow:0 0 10px rgba(0, 0, 0, .1); }
.careerBox li img{
	width:100%;
	height:100%;
}
.careerBox li:nth-of-type(1){ grid-area:1 / 1 / 3 / 2; }
.careerBox li:nth-of-type(2){ grid-area:1 / 2 / 2 / 3; }
.careerBox li:nth-of-type(3){ grid-area:2 / 2 / 3 / 3; }
.careerBox li:nth-of-type(4){ grid-area:3 / 1 / 4 / 2; }
.careerBox li:nth-of-type(5){ grid-area:4 / 1 / 5 / 2; }
.careerBox li:nth-of-type(6){ grid-area:3 / 2 / 5 / 3; }
.careerBox li:nth-of-type(7){ grid-area:5 / 1 / 6 / 3; }

@media print, screen and (max-width:900px) {
	.careerBox .spOnly{ display:block; }
	.careerBox .pcOnly{ display:none; }
	.careerBox{ display:block; }
	.careerBox li + li{ margin-top:20px;}

}
@media print, screen and (min-width:901px) {
	.careerBox .spOnly{ display:none; }
	.careerBox .pcOnly{ display:block; }
}


/*研修・教育制度紹介*/
.training{ flex-wrap:wrap; }
.training > li{ width:calc((100% - 60px) / 2); margin-right:60px; }
.training > li:nth-of-type(2n){ margin-right:0; }

@media print, screen and (max-width:900px) {
	.training > li{ width:calc((100% - 30px) / 2); margin-right:30px; }
}
@media print, screen and (max-width:400px) {
	.training{ display:block; }
	.training > li{ width:100%; margin-right:0; }
	.training > li + li{ margin-top:30px; }
}
.benefitsArea ul li > p:first-of-type{
	height:246px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 0 10px rgba(0, 0, 0, .1);
}
.benefitsArea .flex-wrap{ flex-wrap:wrap; }
.benefitsArea .flex-wrap > li{
	width:calc((100% - 80px) / 3);
	margin-right:40px;
	margin-bottom:40px;
}
.benefitsArea .flex-wrap > li:nth-of-type(3n){ margin-right:0; }
.benefitsArea .flex-wrap > li h4{
	color:#212476;
	font-size:2rem;
	line-height:3rem;
	padding-bottom:15px;
	margin:30px 0 0;
	border:0;
}
.benefitsArea .flex-wrap > li h4:after{
	content:"";
	width:24px;
	height:4px;
	margin-top:10px;
	display:block;
	background:#e60012;
}
@media print, screen and (max-width:900px) {
	.benefitsArea .flex-wrap{ display:block; }
	.benefitsArea .flex-wrap > li{
		width:100%;
		margin-right:0;
	}
	.benefitsArea .flex-wrap > li + li{ margin-top:20px; }
	.benefitsArea ul li > p:first-of-type { height:200px; }
	.benefitsArea img{ height:100px; }
}


/*=======* 選考フロー *=======*/
#flowArea > ul li{
	position:relative;
}
#flowArea > ul li img{
	width:100%;
	box-shadow:0 0 10px rgba(0, 0, 0, .1);
}
#flowArea > ul li + li{margin-top:50px;}
#flowArea > ul li:after{
	content:"";
	display:block;
	width:26px;
	height:10px;
	background:url(../img/flow-arrow.svg)100% / 100% no-repeat;
	position:absolute;
	bottom:-30px;
	left:50%;
	transform:translateX(-50%);
}
#flowArea > ul li:last-of-type:after{ content:none; }

@media print, screen and (min-width:1081px) {
	#flowArea > ul li .spOnly{
		display:none;
	}
	#flowArea > ul li .pcOnly{
		display:block;
	}
}
@media print, screen and (max-width:1080px) {
	#flowArea > ul li .spOnly{
		display:block;
	}
	#flowArea > ul li .pcOnly{
		display:none;
	}
	#flowArea > ul li:after{
		width:16px;
		height:6px;
	}
}
@media print, screen and (max-width:900px) {
	#flowArea > ul li + li { margin-top:30px; }
	#flowArea > ul li:after{ bottom:-20px; }
}

/*=======* よくある質問 *=======*/
#next-content.recruit .qaArea .accordion{ margin-bottom:25px; border-bottom:1px solid #888888; }
#next-content.recruit .qaArea .accordion dd{ display:none; }
#next-content.recruit .qaArea .accordion dt button{ width:100%; border:0; padding:0; padding-bottom:30px; font-weight:700; }
#next-content.recruit .qaArea .accordion dt button,
#next-content.recruit .qaArea .accordion dd .accordion-items{ display:flex; padding-right:60px; position:relative; text-align:left; padding-bottom:25px; }
#next-content.recruit .qaArea .accordion button > span:first-of-type,
#next-content.recruit .qaArea .accordion dd .accordion-items > span{
	width:70px;
	display:block;
	color:#1d2088;
	font-size:2.2rem;
	font-weight:700;
	font-family:'Outfit';
}
#next-content.recruit .qaArea .accordion button > span + span,
#next-content.recruit .qaArea .accordion dd .accordion-items > p{
	width:calc(100% - 70px);
}
#next-content.recruit .qaArea .accordion button > span + span{ font-size:1.8rem; }

.accordion .acco-trigger:after{
	content:"";
	width:12px;
	height:7px;
	display:block;
	position:absolute;
	top:14px;
	right:0;
	background:url(../img/arrow-down-gray.svg)100% / 100% no-repeat;
	transition:.2s;
}
/* 開いている時 */
.accordion.open .acco-trigger:after{
	transform:rotate(180deg);
}



/*===================================
	募集要項
===================================*/
.messageBlock {
	line-height:3.2rem;
}
.messageBlock h2{
	color:#1d2088;
	font-size:2.6rem;
	line-height: 4.2rem;
	font-weight:700;
}
.messageBlock h2:first-letter{ color:inherit; }

.messageBlock ul{
	margin:20px 0;
	color:#212476;
	font-weight:700;
}
.messageBlock ul li{
	display:flex;
}
.messageBlock ul li:before{
	content:"・";
	display:inline-block;
}
/*アンカーリンク*/
.detail .btnList{ margin-bottom:60px; }
.detail .btnList li{
	width:calc((100% - 60px) / 3);
	margin-right:30px;
}
.detail .btnList li:nth-of-type(3n){ margin-right:0; }


.btnList.down a:after { transform: rotate(90deg); }


@media print, screen and (max-width: 700px) {
	/*アンカーリンク*/
	.detail .btnList{ display:block;margin-bottom: 40px; }
	.detail .btnList li{
		width:100%;
		margin-right:0;
	}
	.detail .btnList li + li{ margin-top:20px; }
}

.detail.ironworks .btn a{
	background-image:linear-gradient(135deg, #E60012 50%, #164394 50%);
	background-position:100%;
	background-size:300%;
background:#164394;
}
.detail.construction .btn a{
	background-image:linear-gradient(135deg, #E60012 50%, #017d6e 50%);
	background-position:100%;
	background-size:300%;
	background:#017d6e;
}
.detail.ironworks li a:hover,
.detail.construction .btn a:hover{
	background-position:0;
}
.entryLink{
	margin-top:70px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.entryLink li + li{ margin-left:40px; }

@media print, screen and (max-width:900px) {
	.entryLink{display:block;margin-top: 35px;}
	.entryLink li + li {
		margin-left:0;
		margin-top:20px;
	}
}

.recruitData dl{ display:flex; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #888888; }
.recruitData dt{ width:200px; font-weight:700; color:#212476; }
.recruitData dd{ width:calc(100% - 200px); }

@media print, screen and (max-width:900px) {
	.recruitData dl{ display:block; }
	.recruitData dt,
	.recruitData dd{ width:100%; }
	.recruitData dt{ margin-bottom:5px; }
}



/*===================================
	エントリーフォーム
===================================*/
#next-content > .content-wrap{
	width:1200px;
	margin:80px auto 100px;
}
@media print, screen and (max-width:1700px) {
	#next-content > .content-wrap{
		margin:80px 0 100px;
		padding: 0 70px;
	}
}
@media print, screen and (max-width:1080px) {
	#next-content > .content-wrap{
		width:100%;
		margin:80px auto 100px;
		padding: 0 20px;
	}
}
.form-wrapper {
	height: 100vh;
	overflow-y: auto;
	padding: 20px;
	box-sizing: border-box;
}
.form-wrapper iframe {
	width: 100%;
/*	height: 2260px;*/
	height: 4060px;
	border: none;
}