@charset "utf-8";

.history .title_area{background-image:url(/recruit/newgrads/img/common/h1_history.jpg);}
.history_head{
	padding:140px 0 136px;
	margin:0;
	font-family:var(--font-NotoSerif);
	font-size:4.8rem;
	letter-spacing:0;
	line-height:6.9rem;
	text-align:center;
}
.history_head.first_head{margin-top:60px;}
.history_head::before{
	z-index:-1;
	top:0;
	bottom:auto;
	left:calc(50% - var(--vw-50));
	width:var(--vw-100);
	height:100%;
}
.history_head.first_head::before{background:url(/recruit/newgrads/img/history/pic_1.jpg) no-repeat center/cover;}
.history_head.next_head::before{background:url(/recruit/newgrads/img/history/pic_2.jpg) no-repeat center/cover;}
.history_head.future_head::before{background:url(/recruit/newgrads/img/history/pic_3.jpg) no-repeat center/cover;}
.history_box{
	position:relative;
	display:flex;
	flex-wrap:wrap;
	padding:75px 0 65px;
}
.history_box::before{
	content:'';
	position:absolute;
	top:0;
	left:290px;
	width:1px;
	height:100%;
	background:var(--color-darkgreen);
}
.history_year{
	position:relative;
	width:290px;
	padding:3px 40px 0 0;
	margin-bottom:35px;
	font-size:1.6rem;
	font-weight:500;
	letter-spacing:1.28px;
	line-height:2.4rem;
	text-align:right;
}
.history_year_txt{
	display:block;
	color:var(--color-darkgreen);
	font-family:var(--font-Syncopate);
	font-size:3rem;
	font-weight:bold;
	letter-spacing:0;
	line-height:2.9rem;
}
.history_pickup .history_year_txt{
	font-size:7rem;
	line-height:6.8rem;
}
.history_year::after{
	content:'';
	position:absolute;
	top:10px;
	right:-6px;
	width:11px;
	height:11px;
	background:var(--color-darkgreen);
	border-radius:50%;
}
.history_year.history_pickup::after{top:26px;}
.history_event, .history_works{
	width:calc(100% - 290px);
	padding-left:45px;
	margin-bottom:5px;
}
.history_year.history_pickup, .history_event{margin:70px 0;}
.history_year.history_pickup:first-of-type, .history_event:first-of-type{margin-top:0;}
.history_title{
	padding:0;
	margin:8px 0 12px;
	border:none;
	color:#004D11;
	font-family:var(--font-NotoSerif);
	font-size:3rem;
	letter-spacing:0;
	line-height:4.4rem;
}
.history_works p{
	margin-bottom:8px;
	font-size:1.6rem;
	letter-spacing:1.28px;
	line-height:2.9rem;
}
.history .gallery{grid-gap:15px;}
.history .gallery-caption{
	margin:12px 0;
	font-size:1.2rem;
	letter-spacing:0.96px;
	line-height:1.8rem;
}
.history_event .gallery-columns-2{
	grid-template-columns:repeat(auto-fit, calc((100% - 15px) / 2));
	margin-top:20px;
}
.history_event .gallery-columns-3, .history_works .gallery{
	grid-template-columns:repeat(auto-fit, calc((100% - 30px) / 3));
	margin-top:20px;
}
.history_head.future_head{
	padding:120px 0 113px;
	margin-bottom:45px;
	font-size:4.2rem;
	line-height:4.6rem;
}
.future_head_in{
	display:block;
	margin-top:8px;
	font-size:3.2rem;
}
.future_intro{
	margin-bottom:60px;
	text-align:center;
}
.future_box{
	display:flex;
	flex-wrap:wrap;
	position:relative;
	margin-bottom:40px;
}
.future_box:nth-of-type(even){flex-direction:row-reverse;}
.point_box_in{
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:calc(100% - 605px);
	min-height:346px;
}
.point_head{
	padding:0;
	margin:0 0 18px;
	font-family:var(--font-NotoSerif);
	letter-spacing:0;
}
.point_head::before{display:none;}
.point_head_in{
	display:block;
	margin-bottom:5px;
	font-family:var(--font-Syncopate);
	font-size:1.4rem;
	font-weight:bold;
	line-height:1.8rem;
}
.point_count{color:#018C33;}
.point_img{
	position:absolute;
	top:0;
	bottom:0;
	width:575px;
	margin:auto;
}
.future_box:nth-of-type(odd) .point_img{right:0;}
.future_box:nth-of-type(even) .point_img{left:0;}
.point_desc{margin:0;}
.future_msg{
	margin-top:50px;
	font-family:var(--font-NotoSerif);
	font-size:2.6rem;
	font-weight:500;
	letter-spacing:0;
	line-height:5.4rem;
	text-align:center;
}


@media screen and (max-width:1024px){

.history_box{display:block;}
.history_box::before{left:0;}
.history_year{
	width:auto;
	padding:0;
	text-align:left;
}
.history_year_txt br{display:none;}
.history_event, .history_works{
	width:auto;
	padding:0;
}

}


@media screen and (min-width:768px) and (max-width:1024px){

.history_head{
	padding:116px 0 120px;
	font-size:3.8rem;
	line-height:5.4rem;
}
.history_box{
	padding:50px 0 30px 45px;
	margin:0 10px 0 15px;
}
.history_year{margin-bottom:25px;}
.history_year::after{
	top:8px;
	left:-50px;
}
.history_year.history_pickup{margin-bottom:25px;}
.history_year.history_pickup::after{top:24px;}
.history_pickup .history_year_txt{
	font-size:6.5rem;
	line-height:6.3rem;
}
.history_event{margin-top:25px;}
.history_title{
	margin-bottom:12px;
	font-size:2.9rem;
	line-height:4.1rem;
}
.history_works{margin-bottom:60px;}
.history_works p{line-height:2.7rem;}
.history_head.future_head{
	padding:100px 0 96px;
	margin-bottom:35px;
	font-size:3.7rem;
	line-height:3.8rem;
}
.future_head_in{font-size:2.5rem;}
.future_box{margin-bottom:45px;}
.point_box_in{
	width:calc(100% - 375px);
	min-height:210px;
}
.point_img{width:349px;}
.future_msg{
	font-size:2.2rem;
	line-height:4.3rem;
}

}


@media screen and (max-width:767px){

.history_head{
	padding:90px 0 100px;
	font-size:2.8rem;
	line-height:4rem;
}
.history_box{
	padding:30px 0 10px 30px;
	margin:0 7px 0 12px;
}
.history_year{margin-bottom:20px;}
.history_year::after{
	top:8px;
	left:-35px;
}
.history_year.history_pickup{margin-bottom:20px;}
.history_year.history_pickup::after{top:22px;}
.history_pickup .history_year_txt{
	padding:0;
	font-size:6rem;
	line-height:5.8rem;
	text-align:left;
}
.history_event{margin-top:20px;}
.history_title{
	margin:10px 0 20px;
	font-size:2.4rem;
	line-height:3.5rem;
}
.history_works{margin-bottom:50px;}
.history_works p{line-height:2.4rem;}
.history .gallery{grid-gap:20px;}
.history_event .gallery-columns-2, .history_event .gallery-columns-3, .history_works .gallery{grid-template-columns:repeat(auto-fit, calc((100% - 20px) / 2));}
.history .gallery-caption{margin:8px 0;}
.history_head.future_head{
	padding:87px 0 77px;
	margin-bottom:25px;
	font-size:3.2rem;
	line-height:3rem;
}
.future_head_in{
	margin-top:6px;
	font-size:1.8rem;
}
.future_box{
	display:block;
	margin-bottom:50px;
}
.point_box_in{
	width:auto;
	min-height:0;
}
.point_head{
	margin-bottom:20px;
	font-size:3rem;
	letter-spacing:0.3px;
	line-height:3.2rem;
}
.point_head_in{margin-bottom:10px;}
.point_img{
	position:static;
	width:100%;
	margin-bottom:15px;
}
.future_msg{
	font-size:1.8rem;
	line-height:3.2rem;
}

}


@media screen and (max-width:600px){

.history_event .gallery-columns-2, .history_event .gallery-columns-3, .history_works .gallery{grid-template-columns: repeat(auto-fit, 100%);}

}


@media screen and (max-width:550px){

.history_year_txt br{display:block;}

}