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



#main{
	width: 100%;
	overflow: hidden;
}

	
	
/* list
--------------------- */
#list {
    width: 100%;
    padding: 0 0 50px 0;
}
	#list a.linkbox {
		display: block;
		width: 48%;
		margin-right: 4%;
		margin-bottom: 50px;
	}
	#list a.linkbox:nth-child(2n) {
		margin-right: 0;
	}
		#list a.linkbox .pht {
			position: relative;
			width: 100%;
			overflow: hidden;
			border-radius: 10px;
		}
		#list a.linkbox .pht:before{
			content:"";
			display: block;
			padding-top: 65%; /* 高さを幅の75%に固定 */
		}
		#list a.linkbox .pht img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
			#list a.linkbox .pht img {
				-moz-transition: -moz-transform 0.2s linear;
				-webkit-transition: -webkit-transform 0.2s linear;
				-o-transition: -o-transform 0.2s linear;
				-ms-transition: -ms-transform 0.2s linear;
				transition: transform 0.2s linear;
			}
			#list a.linkbox:hover .pht img {
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-o-transform: scale(1.05);
				-ms-transform: scale(1.05);
				transform: scale(1.05);
			}

		#list a.linkbox h2 {
			margin: 20px 0 15px 0;
			font-size: 2.2rem;
			font-weight: 600;
			line-height: 1;
		}
			#list a.linkbox h2 .en_name {
				font-size: 1.2rem;
				line-height: 1;
				color: #C1C1C1;
				padding-left: 15px;
			}

	
	
/* introduction
--------------------- */
#introduction {
    width: 100%;
    padding: 120px 0 0 0;
}
	#introduction .title {
		margin-bottom: 0;
	}
	#introduction .bgbox {
		margin-bottom: 0;
		padding: 0 60px;
		background: #fff;
	}
	#introduction .bgbox ul{
		margin-top: 40px;
	}
	
.mainitem-sec{
	width: 100%;
	height: auto;
	padding: 20px 60px 0;
}
.mainitem-sec .ttl{
	font-size: 2.4rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: -20px;
}
.mainitem-sec ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(32,156,255,0.1),rgba(104,201,224,0.1),rgba(104,224,207,0.1));
	padding: 26px 0 20px;
}
.mainitem-sec ul li{
	margin:0 10px;
}

	
/* work
--------------------- */
#work {
	position: relative;
    width: 100%;
    padding: 120px 0;
}
	#work .motif03 {
		width: 250px;
		height: 250px;
		position: absolute;
		bottom: -80px;
		left: -7%;
		z-index: -1;
	}

.bgbox ul.twoclmn{
	width: 66%;
	margin: 0 auto;
	justify-content: space-between;
}
	.bgbox ul.twoclmn li{
		width: 48%;
		margin-right: 4%;
	}	
	.bgbox ul.twoclmn li:nth-child(2n){
		margin-right: 0%;
	}
	.bgbox ul.twoclmn li:nth-child(n+3){
		margin-top: 40px;
	}
.bgbox ul.oneclmn{
	width: 32%;
	margin: 0 auto;
	justify-content: space-between;
}
	.bgbox ul.oneclmn li{
		width: 100%;
	}

.bgbox.wh ul li h4 {
	padding-top: 15px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.0em;
}
	.bgbox.wh ul li h4 span {
		font-size: 1.2rem;
	}

.kyoten{
	position: relative;
}

.kyoten .motif04 {
    width: 190px;
    height: 190px;
	position: absolute;
    top: 30%;
    right: -7%;
    z-index: -1;
}
.kyoten .motif05 {
    width: 190px;
    height: 190px;
	position: absolute;
    bottom: 10%;
    left: -7%;
    z-index: -1;
}


/*------------------------------------------

   work-place

------------------------------------------ */



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* モーダル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* モーダル全体(背景＋本体) */
.modal{
	display: none;
	position: fixed;
	top: 0;
	left:0;
	height: 100vh;
	width: 100%;
	z-index: 150;
}
/* モーダル背景 */
.modal-bg{
	position: absolute;
	height: 100vh;
	width: 100%;
    background: linear-gradient(135deg, #2E008B,#209CFF,#0075C2);
    background-size: 200% 200%;
    animation: bggradient 10s ease infinite;
}

/* モーダル本体 */
.modal-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 950px;
  width: 80%;/* これが無いと「overflow:scroll」が利かない */
  padding: 0px;
}

/* モーダルウィンドウ表示中に記事本体を固定 */
body.fixed {
  overflow: hidden;
}

	.modal a.js-modal-close{
		position: absolute;
		top:50px;
		right:50px;
		display: block;
		width: 40px;
		height: 40px;
		background: url("/career/manufacture/work-place/img/modal_close.svg") no-repeat;
		background-size: contain;
	}


.bgbox ul li p.img{
	position: relative;
    width: 100%;
}
.bgbox ul li .content_area p.img{
	position: relative;
    width: 400px;
}
.bgbox ul li p.img:after{
    content:"";
    display: block;
    padding-top: 65%; /* 高さを幅の75%に固定 */
}
	.bgbox ul li p.img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

.bgbox ul {
    flex-wrap: wrap;
	margin-top: 50px;
	justify-content: center;
}
.bgbox ul li{
	margin-right: 2%;
}
.bgbox ul li:nth-child(3n){
	margin-right: 0;
}
.bgbox ul li:last-child{
	margin-right: 0;
}
	.bgbox ul li.list-item:nth-child(n+4){
		margin-top: 40px;
	}
		.bgbox ul li.list-item a.js-modal-open{
			transition:all .4s;
		}
		.bgbox ul li.list-item a.js-modal-open:hover{
			opacity: 0.7;
		}
		.bgbox ul li.list-item a.js-modal-open .img{
			position: relative;
		}
		.bgbox ul li.list-item a.js-modal-open .img:before{
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%,50%);
			width: 40px;
			height: 40px;
			background: url("/career/manufacture/work-place/img/meganeicon.svg") no-repeat;
			-webkit-background-size: contain;
			background-size: contain;
			transition: all .4s;
			z-index: 2;
		}
		.list .list-item .js-modal-open .txtarea{
			text-align: center;
			margin-top: 30px;
		}
			.list .list-item .js-modal-open .txtarea .name{
				font-size: 2rem;
				font-weight: 600;
				line-height: 1.4;
			}
			.list .list-item .js-modal-open .txtarea .subname{
				font-size: 1.5rem;
				line-height: 1;
				margin-top: 8px;
			}
.content_area {
	display: flex;
	flex-wrap: wrap;
}
	.modal-content .img{
		position: relative;
		display: block;
		width: 400px;
		height: 280px;
		margin-right: 50px;
		border-radius: 20px;
		overflow: hidden;
	}
		.modal-content .img img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	.modal-content .txt_area{
		color:#fff;
		width: calc(100% - 450px);
	}
		.modal-content .txt_area h3{
			font-size: 2.8rem;
			line-height: 1.4;
		}
		.modal-content .txt_area .job{
			font-size: 1.6rem;
			margin-top: 10px;
		}
		.modal-content .txt_area .sub{
			font-size: 1.5rem;
			line-height: 1.6;
			margin-top: 15px;			
		}
		.modal-content .txt_area .cmnt{
			font-size: 1.5rem;
			line-height: 1.9;
			margin-top: 15px;			
		}


.modal a.next {
    position: absolute;
    top: 50%;
    right: -80px;
	transform:translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    background: url(/career/manufacture/work-place/img/next_icon.svg) no-repeat;
    background-size: contain;
}
.modal a.back {
    position: absolute;
    top: 50%;
    left: -80px;
	transform:translateY(-50%);
    display: block;
    width: 40px;
    height: 40px;
    background: url(/career/manufacture/work-place/img/return_icon.svg) no-repeat;
    background-size: contain;
}




.blue_bg{
	width: 100%;
    background: linear-gradient(135deg, rgba(32,156,255,0.1),rgba(104,201,224,0.1),rgba(104,224,207,0.1));
    background-size: 200% 200%;
    animation: bggradient 10s ease infinite;
	padding: 120px 0;
}

.blue_bg .bgbox.wh{
	background: #fff;
}
	.bgbox .flex .txtarea{
		width: 50%;
		padding-right: 40px;
	}
		.bgbox .flex h3{
			font-size: 3rem;
			margin-bottom: 15px;
		}
			.bgbox .flex .txt p:nth-child(n+2){
				margin-top: 20px;
			}
		.bgbox .flex .img{
			width: 50%;
			height: 360px;
			border-radius: 10px;
			overflow: hidden;
		}
			.bgbox .flex .img img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

.bgbox.ibaraki{
	padding: 0;
	background: transparent;
}
.bgbox.ibaraki ul li{
	height: auto;
	background: #fff;
	border-radius: 10px;
	padding: 45px 30px;
}
	.bgbox.ibaraki ul li .h3_tit{
		font-size: 2.4rem;
		margin-top: -64px;
	}




.ibaraki-ryo ul li {
	text-align: center;
}
.ibaraki-ryo ul li img {
	margin: 15px 0 10px 0;
}
.ibaraki-ryo ul li .sub_txt {
	display: block;
	font-size: 1.5rem;
	line-height: 1.2em;
	text-align: center;
}
.ibaraki-ryo ul li .sub_txt span {
	font-size: 1.2rem;
}

.ibaraki-ryo ul li p span {
	font-size: 1.2rem;
}


.bgbox ul.column04 li {
	width: 23.5%;
	margin-right: 2%;
}
.bgbox ul.column04 li:nth-child(4n) {
	margin-right: 0;
}
	.bgbox ul.column04 li p.img:after {
		display: none;
	}
		.bgbox ul.column04 li p.img img {
			position: relative;
		}



/* 1200px */
@media screen and (max-width: 1200px) {

	


}












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


#work .bgbox ul li {
    width: 49%;
}
	#work .bgbox ul li.list-item:nth-child(n+3) {
		margin-top: 40px;
	}
	.bgbox ul.twoclmn{
		width: 100%;
	}
		.bgbox ul.twoclmn li{
			margin-right: 2%;
		}	
	.bgbox ul.oneclmn{
		width: 49%;
	}
		.bgbox ul.oneclmn li{
			width: 100%!important;
		}
.bgbox ul li:nth-child(3n){
	margin-right: 2%;
}
.bgbox ul li:nth-child(2n){
	margin-right: 0;
}
.bgbox ul li:last-child{
	margin-right: 0;
}	
.bgbox.ibaraki ul li{
	padding: 35px 20px;
}
	.bgbox.ibaraki ul li .h3_tit{
		font-size: 2.0rem;
		margin-top: -44px;
	}	




.ibaraki-ryo ul li img {
	margin: 15px 0 10px 0;
}
.ibaraki-ryo ul li .sub_txt {
	font-size: 1.4rem;
}
.ibaraki-ryo ul li .sub_txt span {
	font-size: 1.0rem;
}

.ibaraki-ryo ul li p span {
	font-size: 1.0rem;
}

.bgbox ul.column04 li:nth-child(2) {
	margin-right: 2%;
}

}

	

/* 900px */
@media screen and (max-width: 900px) {
	
	
	.flex.rilt{
		flex-direction: row-reverse;
	}
		.flex.rilt .img{
			width: 100%;
			order: -1;
		}	
			.bgbox .flex h3 {
				font-size: 3rem;
				margin-bottom: 5px;
			}
			.flex.rilt .txtarea{
				width: 100%;
				margin-top: 20px;
			}	
			.bgbox .flex .txt p:nth-child(n+2) {
				margin-top: 10px;
			}	
	.bgbox .h3_tit {
		margin-top: -60px;
	}
	.modal-content {
		position: absolute;
		top: 120px;
		left: 50%;
		transform: translate(-50%, 0);
		max-width: 950px;
		width: 80%;
		padding: 0px;
	}
	.bgbox ul li .content_area p.img {
		position: relative;
		width: 100%;
	}
		.modal-content .img {
			width: 100%;
			height: auto;
			margin-right: 00px;
			border-radius: 20px;
		}
		.modal-content .txt_area {
			width: 100%;
		}	
		.modal-content .txt_area h3 {
			font-size: 2rem;
			margin-top: 15px;
		}
		.modal-content .txt_area .job{
			font-size: 1.4rem;
			margin-top: 4px;
		}
		.modal-content .txt_area .sub{
			font-size: 1.3rem;
			line-height: 1.6;
			margin-top: 10px;			
		}
		.modal-content .txt_area .cmnt{
			font-size: 1.3rem;
			line-height: 1.9;
			margin-top: 10px;			
		}

.bgbox ul.oneclmn{
	width: 100%;
	justify-content: center;
}	
	


.bgbox.wh ul li h4 {
	padding-top: 10px;
	font-size: 1.4rem;
}
	.bgbox.wh ul li h4 span {
		font-size: 1.0rem;
	}
	
	
}





/* max 768px */
@media screen and (max-width: 768px) {


	
	
/* list
--------------------- */
#list {
    width: 100%;
    padding: 0 0 50px 0;
}
	#list .inner {
		display: block;
	}
	#list a.linkbox {
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}
		#list a.linkbox h2 {
			font-size: 2.0rem;
		}
			#list a.linkbox h2 .en_name {
				font-size: 1.0rem;
				padding-left: 10px;
			}


	
	
	
/* introduction
--------------------- */
#introduction {
    padding: 80px 0 0 0;
}
	#introduction h3{
		text-align: left;
	}
	
.mainitem-sec{
	padding: 10px 0px 0;
}
.mainitem-sec .ttl{
	font-size: 2rem;
	margin-bottom: -20px;
}
.mainitem-sec ul li{
	font-size: 1.5rem;
	margin:0 10px;
}
	
	
	
/* work
--------------------- */
#work {
    padding: 80px 0;
}

#work .title {
    margin-bottom: 20px;
}	
#introduction .bgbox {
	padding: 0px 20px 0;
}	
#introduction .bgbox ul{
	margin-top: 20px;
}
	
.blue_bg {
    padding: 80px 0;
}
.bgbox ul {
    margin-top: 20px;
}	
.kyoten .title {
    margin-bottom: 20px;
}
	.bgbox .flex h3 {
		font-size: 2rem;
		margin-bottom: 5px;
	}
	.bgbox .flex .txtarea {
		width: 100%;
		padding-right: 0px;
	}	

.bgbox ul li {
    width: 100%;
	margin-right: 0;
}	
.bgbox ul li:nth-child(3n){
	margin-right: 0;
}
.bgbox ul li:nth-child(n+2) {
    margin-top: 15px;
}		
	.bgbox .h3_tit {
		margin-top: -32px;
		transform: translateY(0px);
		margin-bottom: 10px;
	}	
	.list .list-item .js-modal-open .txtarea {
		margin-top: 26px;
	}
	
.bgbox .flex .img {
	height: 220px;
}
	
	
#work .bgbox ul li {
    width: 100%;
}	
#work .bgbox ul li:nth-child(n+2) {
    margin-top: 25px;
}	
#work .bgbox ul li.list-item:nth-child(n+3) {
    margin-top: 25px;
}
	.bgbox ul li.list-item a.js-modal-open .img:before {
		content: '';
		width: 34px;
		height: 34px;
	}	
		.list .list-item .js-modal-open .txtarea .name {
			font-size: 1.8rem;
		}
			.list .list-item .js-modal-open .txtarea .subname {
				font-size: 1.4rem;
				line-height: 1;
				margin-top: 8px;
			}
	.bgbox ul.twoclmn {
		width: 100%;
		margin-top: 15px;
	}
		.bgbox ul.twoclmn li{
			margin-right: 0%;
		}	
	.bgbox ul.oneclmn{
		width: 100%;
		margin-top: 0px;
	}
.bgbox.ibaraki ul{
	margin-top: 30px;
}
	.bgbox.ibaraki ul li:nth-child(n+2){
		margin-top: 30px;
	}

	
	
	
#work .motif03 {
    width: 160px;
    height: 160px;
    position: absolute;
    bottom: -70px;
    left: -12%;
}	

.kyoten .motif04 {
    width: 140px;
    height: 140px;
    position: absolute;
    top: 30%;
    right: -7%;
    z-index: -1;	
}
.kyoten .motif05 {
    width: 140px;
    height: 140px;
    position: absolute;
    bottom: 1%;
    left: -7%;
    z-index: -1;
}	
	
	
.modal a.next {
    position: absolute;
    top: 24%;
    right: -20px;
	transform:translateY(-50%);
    display: block;
    width: 30px;
    height: 30px;
    background: url(/career/manufacture/work-place/img/next_icon.svg) no-repeat;
    background-size: contain;
}
.modal a.back {
    position: absolute;
    top: 24%;
    left: -20px;
	transform:translateY(-50%);
    display: block;
    width: 30px;
    height: 30px;
    background: url(/career/manufacture/work-place/img/return_icon.svg) no-repeat;
    background-size: contain;
}	
.modal a.js-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 30px;
    height: 30px;
    background: url(/career/manufacture/work-place/img/modal_close.svg) no-repeat;
    background-size: contain;
}
	
	
	



.bgbox ul.column04 li {
	width: 49%;
	margin-right: 2%;
	margin-top: 0;
}
.bgbox ul.column04 li:nth-child(2n) {
	margin-right: 0;
}
.bgbox ul.column04 li:nth-child(1),
.bgbox ul.column04 li:nth-child(1) {
	margin-bottom: 20px;
}
.bgbox ul.column04 li:nth-child(4n) {
	margin-right: 0;
}
	.bgbox ul.column04 li p.img:after {
		display: none;
	}
		.bgbox ul.column04 li p.img img {
			position: relative;
		}	
	
	
}