@charset "UTF-8";

/* ▼▼▼ トップ
======================================================*/

.title01 + p{
	margin: 0 0 30px;
	font-size: 18px;
	text-align: center;
}
.top_read{
	font-family: 'Noto Serif JP', serif;
	font-weight: normal;
	line-height: 2;
}

#mainVisual{
	position: relative;
	z-index: -1;
}
	#mainVisual .txt{
		width: 35vw;
		position: absolute;
		transform: translate(-50%,-50%);
		top: 54%;
		left: 50%;
	}

	/* wow フェード調整 */
	@-webkit-keyframes fadeInUp_main {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 8%, 0);
			transform: translate3d(0, 8%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes fadeInUp_main {
		from {
			opacity: 0;
			-webkit-transform: translate3d(0, 8%, 0);
			transform: translate3d(0, 8%, 0);
		}
		to {
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	.fadeInUp_main {
		-webkit-animation-name: fadeInUp_main;
		animation-name: fadeInUp_main;
	}
	/* wow フェード調整 */


/* ▼ 求人情報一覧 #recruit
---------------------------------------- */
#recruit{
	background: #FDEDF2;
	padding: 90px 0;
}
.recruit_list{
	max-width: 1128px;
	padding: 0 20px;
}

/* 新着情報 #topics
---------------------------------------- */
#topics{
	padding: 90px 0;
}
.topics_list{
	max-width: 1128px;
	padding: 0 20px;
}
	.topics_list li a{
		padding: 20px 45px 20px 0;
	}


/* #other
---------------------------------------- */
#other{
	padding-top: 60px;
}
#other .item{
	display: flex;
	max-width: 1128px;
	padding: 25px 20px 80px;
	margin: 0 auto 60px;
	position: relative;
}

	#other .item .photo_area{
		max-width: 697px;
		width: 65%;
		flex-shrink: 0;
		position: relative;
	}
	#other .item .photo_area::before{
		content: "";
		background: #88ECE8;
		max-height: 465px;
		height: 41.3vw;
		width: 100vw;
		position: absolute;
		bottom: -80px;
		z-index: -1;
	}
	#other .item:nth-of-type(odd) .photo_area{
		margin: 0 20px 0 -80px;
	}
	#other .item:nth-of-type(even) .photo_area{
		order: 2;
		margin: 0 -80px 0 20px;
	}
	#other .item:nth-of-type(odd) .photo_area::before{
		right: 124px;
	}
	#other .item:nth-of-type(even) .photo_area::before{
		left: 124px
	}

	#other .item .txt_area{
		width: 428px;
		padding-top: 40px;
	}
	#other .item:nth-of-type(odd) .txt_area{
		margin-left: auto;
	}
	#other .item:nth-of-type(even) .txt_area{
		order: 1;
		margin-right: auto;
	}
	#other .item .txt_area::before{
		content: "";
		background: #F5FEFF;
		max-height: 465px;
		height: 41.3vw;
		width: 100vw;
		position: absolute;
		top: 0;
		z-index: -1;
	}
	#other .item:nth-of-type(odd) .txt_area::before{
		left: calc(100% - 615px);
	}
	#other .item:nth-of-type(even) .txt_area::before{
		right: calc(100% - 615px);
	}
	#other .item .txt_area p{
		margin: 0 0 30px;
	}
	#other .item .txt_area .btn{
		margin: 0;
	}

/* bg イラスト */
#other .item:nth-of-type(1)::before,
#other .item:nth-of-type(1)::after,
#other .item:nth-of-type(2)::before,
#other .item:nth-of-type(2)::after{
	content: "";
	position: absolute;
}
#other .item:nth-of-type(1)::before{
	background: url(../img/top/ill_01.png) no-repeat center/100%;
	width: 174px;
	height: 174px;
	top: -100px;
	right: 275px;
}
#other .item:nth-of-type(1)::after{
	background: url(../img/top/ill_02.png) no-repeat center/100%;
	width: 206px;
	height: 206px;
	bottom: 0;
	right: -30px;
}
#other .item:nth-of-type(2)::before{
	background: url(../img/top/ill_03.png) no-repeat center/100%;
	width: 194px;
	height: 194px;
	top: -75px;
	left: -30px;
}
#other .item:nth-of-type(2)::after{
	background: url(../img/top/ill_04.png) no-repeat center/100%;
	width: 166px;
	height: 166px;
	bottom: 0;
	left: 275px;
}
#other .item:nth-of-type(1) .photo_area::after,
#other .item:nth-of-type(2) .photo_area::after{
	content: "";
	width: 566px;
	height: 260px;
	position: absolute;
}
#other .item:nth-of-type(1) .photo_area::after{
	background: url(../img/top/txt_about.png) no-repeat center/452px;
	top: -140px;
	left: -100px;
}
#other .item:nth-of-type(2) .photo_area::after{
	background: url(../img/top/txt_voice.png) no-repeat center/100%;
	top: -150px;
	left: -50px;
}


/* 施設紹介 #factory
---------------------------------------- */
#factory{
	max-width: 1128px;
	width: 100%;
	padding: 120px 20px 0;
	margin: 0 auto 40px;
	position: relative;
}
#factory .item_list{
	overflow: hidden;
	margin-top: -200px;
}
	#factory .item_list li{
		background: url(../img/top/bg_01.png) no-repeat center/94%;
		width: 50%;
		height: 500px;
	}
		#factory .item_list li:nth-child(2){
			background: url(../img/top/bg_02.png) no-repeat center/88%;
			margin: 260px 0 0;
		}
		#factory .item_list li:nth-child(3){
			background: url(../img/top/bg_03.png) no-repeat center/94%;
		}
		#factory .item_list li:nth-child(4){
			background: url(../img/top/bg_04.png) no-repeat center/94%;
			margin: 100px 0 0;
		}

	#factory .item_list li:nth-child(odd){
		float: right;
		margin: 0 0 100px;
	}
	#factory .item_list li:nth-child(even){
		float: left;
	}
	#factory .item_list li a{
		display: block;
		width: 100%;
		height: 100%;
		padding: 65px 95px 0;
		color: #fff;
	}
	#factory .item_list li h3{
		background: #EF9F20;
		border-radius: 20px;
		display: table;
		max-width: 290px;
		width: 100%;
		height: 51px;
		margin: 0 auto 15px;
		font-size: 22px;
		line-height: 1;
	}
		#factory .item_list li:nth-child(2) h3{background: #BE8643;}
		#factory .item_list li:nth-child(3) h3{background: #448E4D;}
		#factory .item_list li:nth-child(4) h3{background: #DB7437;}

	#factory .item_list li h3 span{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
	#factory .item_list li h3 small{
		display: block;
		margin: 0 0 5px;
		font-size: 15px;
		text-align: center;
		font-weight: normal;
	}
	#factory .item_list li p{
		font-weight: bold;
	}
	#factory .item_list li p.more{
		display: inline-block;
		position: relative;
		margin-top: 5px;
	}
	#factory .item_list li p.more::before,
	#factory .item_list li p.more::after{
		background: #fff;
		content: "";
		position: absolute;
	}
	#factory .item_list li p.more::before{
		width: 15px;
		height: 1px;
		top: 13px;
		right: -20px;
	}
	#factory .item_list li p.more::after{
		width: 6px;
		height: 1px;
		transform: rotate(45deg);
		top: 11px;
		right: -21px;
	}

	#factory .item_list li:hover{
		opacity: .7;
	}

/* bg　イラスト */
#factory::before{
	content: "";
	background: url(../img/top/ill_06.png) no-repeat 93% 45%/201px,
	url(../img/top/ill_07.png) no-repeat 70px 70%/196px,
	url(../img/top/ill_08.png) no-repeat 80% 102%/599px,
	url(../img/top/bg.png) no-repeat center 20%/1521px;
	width: 1521px;
	height: 100%;
	position: absolute;
	transform: translateX(-50%);
	top: 0;
	left: 50%;
	z-index: -1;
}
#factory .sub_title::before{
	content: "";
	background: url(../img/top/ill_05.png) no-repeat center/100%;
	width: 608px;
	height: 245px;
	position: absolute;
	top: -60px;
	left: -180px;
	z-index: -1;
}



/* 各施設アクセス #access
---------------------------------------- */
#access{
	padding: 90px 0;
}
.map_container {
	width: 100%;
	position: relative;
	padding-top: 25%;
	margin: 0 0 25px;
}
	.panel{
		display:none;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	}
	.panel.is-show{
		display:block;
	}
#access .addr_box{
	max-width: 825px;
	width: 100%;
	margin: 0 auto;
	font-size: 18px;
}
	#access .addr_box li{
		display: flex;
		align-items: center;
		padding: 20px 0;
	}
	#access .addr_box li:not(:last-child){
		border-bottom: 1px solid #E3E3E3;
	}
	#access .addr_box p.factory{
		font-weight: bold;
		width: 40%;
		cursor: pointer;
		position: relative;
	}
	#access .addr_box p.factory::before{
		content: "";
		background: url(../img/top/pin.svg) no-repeat center/contain;
		width: 32px;
		height: 33px;
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		left: -40px;
	}
	#access .addr_box li.is-active p.factory::before{
		background: url(../img/top/pin_active.svg) no-repeat center/contain;
	}
	#access .addr_box p:nth-of-type(2){
		margin: 0 20px 0 0;
	}
	#access .addr_box p:nth-of-type(3){
		margin-left: auto;
	}
	#access .addr_box .tel-moji a{
		color: #353535;
	}


/* ▼▼▼ 1120px〜768px
====================================================== */
@media screen and (max-width: 1120px) {
	#factory .item_list li a{
		padding-top: 20%;
	}
	/* bg　イラスト */
	#other .item:nth-of-type(1) .photo_area::after{
		left: -20px;
	}

	#factory::before{
		content: "";
		background: url(../img/top/ill_06.png) no-repeat 100% 42%/201px,
		url(../img/top/ill_07.png) no-repeat 0% 65%/196px,
		url(../img/top/ill_08.png) no-repeat 100% 102%/599px,
		url(../img/top/bg.png) no-repeat center 20%/110%;
		width: 100%;
		height: 100%;
		position: absolute;
		transform: translateX(-50%);
		top: 0;
		left: 50%;
	}
	#factory .sub_title::before{
		width: 608px;
		height: 245px;
		top: -60px;
		left: -50px;
	}
	#factory .top_read{
		width: 50%;
	}

}


/* ▼▼▼ 480px〜768px
======================================================*/
@media screen and (max-width: 768px) {
	.title01 + p{
		margin: 0 0 40px;
	}

	#mainVisual{
		position: relative;
	}
		#mainVisual .txt{
			width: 73vw;
			top: 50%;
		}

	/* ▼ 求人情報一覧 #recruit
	---------------------------------------- */
	#recruit{
		padding: 35px 0;
	}
	.recruit_list{
		padding: 0 20px;
		margin: 0 auto 40px;
	}


	/* 新着情報 #topics
	---------------------------------------- */
	#topics{
		padding: 35px 0;
	}
	.topics_list{
		padding: 0;
		margin: 0 0 40px;
	}
	.topics_list li a{
		padding: 20px 0;
	}


	/* #other
	---------------------------------------- */
	#other .item{
		display: block;
		padding: 0 20px 40px;
		margin: 0 auto 140px;
	}
		#other .item:nth-of-type(2){
			margin-bottom: 100px;
		}
		#other .item .photo_area{
			max-width: 697px;
			width: 100%;
			flex-shrink: 0;
		}
		#other .item .photo_area::before{
			height: 59.5vw;
			bottom: 0;
			top: 20px;
		}
		#other .item:nth-of-type(odd) .photo_area{
			margin: 0 0 0 20px;
		}
		#other .item:nth-of-type(even) .photo_area{
			order: 1;
			margin: 0 0 0 -20px;
		}
		#other .item:nth-of-type(odd) .photo_area::before{
			right: calc(0% + 40px);
		}
		#other .item:nth-of-type(even) .photo_area::before{
			left: calc(0% + 40px);
		}

		#other .item .txt_area{
			width: 100%;
			padding-top: 40px;
		}
		#other .item:nth-of-type(odd) .txt_area{
			margin-left: auto;
		}
		#other .item:nth-of-type(even) .txt_area{
			order: 1;
			margin-right: auto;
		}
		#other .item .txt_area::before{
			max-height: inherit;
			height: calc(100% - 20px);
			width: 100vw;
			top: auto;
			bottom: 0;
			z-index: -2;
		}
		#other .item:nth-of-type(odd) .txt_area::before{
			left: 0;
		}
		#other .item:nth-of-type(even) .txt_area::before{
			right: 0;
		}
		#other .item .txt_area .btn{
			margin: 0 auto;
		}

	/* bg イラスト */
	#other .item:nth-of-type(1)::before{
		max-width: 103px;
		width: 28vw;
		height: 103px;
		top: -95px;
		right: 20px;
	}
	#other .item:nth-of-type(1)::after{
		max-width: 152px;
		width: 39vw;
		height: 152px;
		left: 10px;
		bottom: -90px;
		right: auto;
		z-index: -1;
	}
	#other .item:nth-of-type(2)::before{
		max-width: 138px;
		width: 37vw;
		height: 138px;
		top: -110px;
		left: auto;
		right: -10px;
	}
	#other .item:nth-of-type(2)::after{
		max-width: 124px;
		width: 34vw;
		height: 124px;
		bottom: -80px;
		left: 10px;
	}
	#other .item:nth-of-type(1) .photo_area::after,
	#other .item:nth-of-type(2) .photo_area::after{
		width: 270px;
		height: 100px;
	}
	#other .item:nth-of-type(1) .photo_area::after{
		background: url(../img/top/txt_about.png) no-repeat center/199px;
		top: -55px;
		left: -55px;
	}
	#other .item:nth-of-type(2) .photo_area::after{
		background: url(../img/top/txt_voice.png) no-repeat center/100%;
		top: -75px;
		left: 0;
	}


	/* 施設紹介 #factory
	---------------------------------------- */
	#factory{
		padding: 120px 20px;
		margin: 0 auto;
		overflow: hidden;
	}

	#factory .item_list{
		overflow: inherit;
		margin: 20px -20px 0;
	}
		#factory .item_list li{
			width: 90%;
			height: 84vw;
		}

		#factory .item_list li:nth-child(odd){
			margin: 0 0 30px;
		}
		#factory .item_list li:nth-child(even){
			margin: 0 0 30px;
		}
		#factory .item_list li a{
			display: block;
			width: 100%;
			height: 100%;
			padding: 10vw 12vw 0;
			color: #fff;
		}
		#factory .item_list li h3{
			width: 45vw;
			height: 31px;
			margin: 0 auto 10px;
			font-size: 12px;
		}
		#factory .item_list li h3 small{
			margin: 0;
			font-size: 10px;
			transform: scale(0.8);
		}
		#factory .item_list li p{
			font-size: 13px;
		}
		#factory .item_list li p.more{
			font-size: 11px;
		}
		#factory .item_list li p.more::before {
			width: 12px;
			height: 1px;
			top: 9px;
			right: -16px;
		}
		#factory .item_list li p.more::after{
			top: 7px;
			right: -17px;
		}

	/* bg　イラスト */
	#factory::before{
		content: "";
		background: url(../img/top/ill_06.png) no-repeat 100% 34%/100px,
		url(../img/top/ill_07.png) no-repeat 10px 54%/108px,
		url(../img/top/ill_08.png) no-repeat -15px 100%/385px,
		url(../img/top/bg_sp.png) no-repeat center 34%/160%;
		width: 100%;
		height: 100%;
		position: absolute;
		transform: translateX(-50%);
		top: 0;
		left: 50%;
	}
	#factory .sub_title::before{
		background: url(../img/top/ill_05_sp.png) no-repeat center/100%;
		max-width: 365px;
		width: 95vw;
		height: 168px;
		top: 0;
		left: -20px;
	}

	/* 各施設アクセス #access
	---------------------------------------- */
	#access{
		clear: both;
		padding: 35px 0 10px;
	}
	#access .title01 + p{
		font-size: 16px;
	}
	.map_container {
		padding-top: 450px;
		margin: 0 0 20px;
	}
	#access .addr_box{
		max-width: 100%;
		width: 100%;
		padding: 0 10px;
	}
		#access .addr_box li{
			display: block;
			padding: 20px 0 20px 30px;
		}
		#access .addr_box p.factory{
			width: 100%;
			font-size: 16px;
		}
		#access .addr_box p.factory::before{
			width: 16px;
			height: 24px;
			top: 13px;
			left: -25px;
		}
		#access .addr_box p:nth-of-type(2){
			margin: 0;
		}

}