@charset "utf-8";

.work_head{
	display:flex;
	min-height:650px;
	align-items:center;
}
.work_h_txt{
	width:605px;
	padding:9% 0 0 113px;
}
.h_copy_small{
	font-size:2.2rem;
	letter-spacing:2.2px;
	line-height:4.3rem;
	margin:0 0 47px;
}
.h_copy_large{
	font-size:2.8rem;
	letter-spacing:2.8px;
	line-height:5rem;
	margin:0 0 125px;
}
.work_title{
	font-family:var(--font-notoserif);
	font-size:4rem;
	letter-spacing:4px;
	line-height:3rem;
	font-weight:500;
}
.work_title::after{
	display:block;
	content:attr(data-en);
	font-family:var(--font-roboto);
	font-size:1.6rem;
	letter-spacing:1.6px;
	line-height:7.8rem;
	font-weight:300;
}
.work_h_img{
	width:calc(100% - 605px);
	height:100%;
	padding:47px 0;
}
.work_h_img img{
	width:100%;
	height:100%;
	object-fit:cover;
	pointer-events:none;
}
.work_area{margin:0 auto 100px;}
.box_head{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	height:254px;
	margin:80px 0 54px;
}
.work_area > *:first-child{margin-top:30px;}
.box_head::before{
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	background:linear-gradient(180deg, rgba(49, 62, 88, 0) 0%, rgba(49, 62, 88, 1) 100%);
	bottom:0;
	left:0;
	mix-blend-mode:multiply;
	opacity:.9;
	z-index:-1;
}
.box_head h2{
	position:relative;
	font-size:2.8rem;
	letter-spacing:2.8px;
	line-height:4.5rem;
	color:#fff;
	text-align:center;
	margin:0;
	top:-2px;
}
.box_head h2::after{
	display:block;
	content:attr(data-en);
	font-family:var(--font-roboto);
	font-size:1.6rem;
	letter-spacing:1.6px;
	line-height:2.6rem;
	font-weight:300;
}
.box_head img{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
	top:0;
	left:0;
	z-index:-2;
}
.w1100_box,.w800_box{
	width:1100px;
	max-width:calc(100% - 80px);
	margin:0 auto;
}
.w800_box{width:800px;}
.work_area p{line-height:4rem;}
.mission_img{margin:36px 0 0;}
.col2_head{
	position:relative;
	display:flex;
	align-items:center;
	min-height:430px;
	margin:200px 0 65px;
}
.col2_h_txt{
	position:absolute;
	display:flex;
	align-items:center;
	width:800px;
	max-width:calc(100% - 80px);
	height:100%;
	margin:0 auto;
	left:0;
	right:0;
}
.col2_h_txt h2{
	position:relative;
	font-size:2.8rem;
	letter-spacing:12px;
	line-height:5.7rem;
	white-space:nowrap;
	writing-mode:vertical-rl;
	color:#4D464D;
	margin:0;
	padding:68px 0 0;
	left:-13px;
}
.left .col2_h_txt h2{
	margin-left:auto;
	left:auto;
	right:-10px;
}
.col2_h_txt h2 span{
	position:relative;
	display:block;
	font-size:1.8rem;
	letter-spacing:6px;
	line-height:2.4rem;
	color:#808990;
	padding-top:45px;
	margin-left:40px;
	top:-60px;
}
.col2_h_txt h2 span::before{
	position:absolute;
	content:'';
	width:1px;
	height:30px;
	background:#707070;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
}
.col2_h_img{
	width:calc(50% - 30px);
	margin-left:auto;
}
.left .col2_h_img{
	margin-right:auto;
	margin-left:0;
}
.col2_h_img img{width:100%;}
.img_list{
	display:grid;
	grid-template-columns:repeat(auto-fit,calc(calc(100% - 30px)/4));
	grid-gap:10px;
	padding:0;
	margin:70px 0 0;
}
.img_list li{
	list-style:none;
	margin:0 !important;
}
.inview{
	transform:translateY(50px) !important;
	opacity:0 !important;
}
.inview.on{
	transform:translateY(0) !important;
	opacity:1 !important;
	transition:transform 1s cubic-bezier(.3,.1,.3,1),opacity 1s cubic-bezier(.3,.1,.3,1);
}
.img_list li.inview.on:nth-child(2){transition-delay:.3s;}
.img_list li.inview.on:nth-child(3){transition-delay:.6s;}
.img_list li.inview.on:nth-child(4){transition-delay:.9s;}

.work_box h3{
	padding:0;
	margin:65px 0 20px;
	text-align:center;
}
.work_box h3::after{display:none;}
.work_box h3 + p{
	margin-bottom:20px;
	text-align:center;
}
.work_flow{
	padding-left:50px;
	margin:80px 0 0 35px;
	border-left:1px solid #333;
}
.work_flow_item{
	display:flex;
	align-items:flex-start;
	position:relative;
	margin-bottom:60px;
}
.work_flow_item::before{
	content:attr(data-num);
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:-1px;
	left:-81px;
	width:60px;
	height:60px;
	padding-bottom:2px;
	background:#F3EDE4;
	border-radius:50%;
	font-family:var(--font-notoserif);
	font-size:3rem;
	font-weight:100;
	letter-spacing:0;
}
.work_flow_item_in{
	width:100%;
	margin-right:30px;
}
.flow_img{
	flex-shrink:0;
	width:340px;
}
.flow_title{
	padding:0;
	margin:12px 0 30px;
	font-size:2.4rem;
	letter-spacing:2.4px;
	line-height:3.5rem;
}
.flow_title::after{display:none;}
.flow_txt{
	line-height:3rem !important;
	margin:0;
}


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

.work_h_txt{
	width:500px;
	padding:9% 0 0 30px;
}
.h_copy_small{
	font-size:1.9rem;
	letter-spacing:1.9px;
	line-height:3.9rem;
}
.h_copy_large{
	font-size:2.5rem;
	letter-spacing:2.5px;
}
.work_title{
	font-size:3.6rem;
	letter-spacing:3.6px;
}
.work_title::after{
	font-size:1.5rem;
	letter-spacing:1.5px;
	line-height:7rem;
}
.work_h_img{width:calc(100% - 410px);}
.box_head{
	height:195px;
	margin:60px 0 54px;
}
.box_head h2{
	font-size:2.4rem;
	letter-spacing:2.4px;
	line-height:3.5rem;
}
.box_head h2::after{
	font-size:1.5rem;
	letter-spacing:1.5px;
}
.col2_head{margin:120px 20px 50px;}
.col2_h_txt h2{
	font-size:2.4rem;
	letter-spacing:10px;
}

.work_box h3{
	font-size:2.2rem;
	letter-spacing:2.2px;
	line-height:3rem;
	margin:45px 0 15px;
}
.work_flow{
	padding-left:40px;
	margin:60px 0 0 25px;
}
.work_flow_item{margin-bottom:50px;}
.work_flow_item::before{
	top:-2px;
	left:-66px;
	width:50px;
	height:50px;
	font-size:2.3rem;
}
.flow_title{
	font-size:2.2rem;
	letter-spacing:2.2px;
	line-height:3.2rem;
	margin:6px 0 20px;
}
.flow_img{width:251px;}


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

.work_head{
	position:relative;
	align-items:flex-start;
	height:auto;
	min-height:600px;
}
.work_h_txt{
	position:absolute;
	width:100%;
	padding:0 0 0 30px;
	margin:0;
	z-index:3;
	bottom:40px;
}
.work_h_txt::before{
	position:absolute;
	content:'';
	width:191px;
	height:120px;
	background:#fff;
	top:-13px;
	left:21px;
	z-index:-1;
}
.h_copy_small{margin:0 0 17px;}
.h_copy_large{margin:0 0 45px;}
.work_h_img{
	width:calc(100% - 70px);
	height:calc(100% - 355px);
	padding:70px 0 0;
	margin:0 0 0 auto;
	z-index:1;
}

.work_flow_item{display:block;}
.work_flow_item::before{top:-8px;}
.work_flow_item_in{margin:0 0 10px;}
.flow_title{margin-top:0;}
.flow_img{
	width:340px;
	margin:auto;
}

}

}


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

.work_head{
	position:relative;
	align-items:flex-start;
	height:auto;
	min-height:600px;
	padding-top:60px;
}
.work_h_txt{
	position:absolute;
	width:100%;
	padding:0 0 0 30px;
	margin:0;
	bottom:67px;
	z-index:3;
}
.work_h_txt::before{
	position:absolute;
	content:'';
	width:171px;
	height:120px;
	background:#fff;
	top:-7px;
	left:21px;
	z-index:-1;
}
.h_copy_small{
	font-size:1.7rem;
	letter-spacing:1.7px;
	line-height:3.4rem;
	margin:4px 0 0;
}
.h_copy_large{
	font-size:2.1rem;
	letter-spacing:2.1px;
	margin:14px 0 25px;
}
.work_title{
	font-size:3rem;
	letter-spacing:3px;
}
.work_title::after{
	font-size:1.2rem;
	letter-spacing:1.2px;
	line-height:5.5rem;
}
.work_h_img{
	width:calc(100% - 75px);
	height:calc(100% - 89px - 236px);
	padding:60px 0 0 0;
	margin:0 0 0 auto;
	z-index:1;
}
.work_area{margin-top:-60px;}
.work_area > :first-child{margin-top:0;}
.work_area p{line-height:3rem;}
.box_head{
	height:135px;
	margin:60px 0 27px;
}
.box_head h2{
	font-size:2rem;
	letter-spacing:2px;
	line-height:3rem;
}
.box_head h2::after{
	font-size:1.4rem;
	letter-spacing:1.4px;
}
.col2_head{
	display:block;
	min-height:0;
	margin:100px 20px 16px;
}
.col2_h_txt{
	position:relative;
	justify-content:center;
	max-width:100%;
	margin:0 auto 38px;
}
.col2_h_txt h2{
	font-size:2.4rem;
	letter-spacing:10px;
	padding:73px 0 0;
	left:0;
}
.left .col2_h_txt h2{
	margin-left:0;
	right:0;
}
.col2_h_txt h2 span{
	font-size:1.6rem;
	letter-spacing:4px;
	padding-top:42px;
	margin-left:26px;
	top:-73px;
}
.col2_h_img{width:100%;}
.w1100_box, .w800_box{max-width:calc(100% - 40px);}
.img_list{margin:17px 0 0;}

.work_box h3{
	font-size:2rem;
	letter-spacing:2px;
	line-height:3rem;
	margin:30px 0 10px;
}
.work_box picture img{max-width:335px;}
.work_flow{
	padding-left:35px;
	margin:35px 0 0 15px;
}
.work_flow_item{
	display:block;
	margin-bottom:45px !important;
}
.work_flow_item::before{
	top:-5px;
	left:-55px;
	width:40px;
	height:40px;
	font-size:1.7rem;
}
.work_flow_item_in{margin:0 0 10px;}
.flow_title{
	font-size:2rem;
	letter-spacing:2px;
	line-height:3rem;
	margin:0 0 10px;
}

}


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

.img_list{grid-template-columns:repeat(auto-fit, calc(calc(100% - 10px)/2));}

}


@media screen and (max-height:499px){

.work_head{min-height:750px;}

}