@charset "utf-8";

/*!
 * Copyright 2020 HATTORI PROCESS GROUP
 */

/* ============================
top.css　もくじ
-------------------------------
1.ブレイクポイント
2.トップスライダー
3.トップabout
4.トップproduct
5.トップSERVICEスライダー
6.トップ採用情報
7.トップWORK
8.トップNEWS
============================== */


/* ===========================
1.ブレークポイント
============================== */
@media screen and (min-width: 30em) { /* 480px */
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
}
@media screen and (min-width: 64em) {/* 1024px */
}
@media screen and (min-width: 80em) {/* 1280px */
}


/* ===========================
2.トップスライダー
============================== */
#main_contents #top_main_visual {
	position: relative;
}
#main_contents #top_main_visual ul li {
	position: relative;
	overflow: hidden;
	min-height: 260px;
}
#main_contents #top_main_visual ul li img {
	height: 100%;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, 0);
}
#main_contents #top_main_visual h2 {
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 1.8;
	text-shadow: 
		#fff 2px 0px 6px,  #fff -2px 0px 6px,
		#fff 0px -2px 6px, #fff 0px 2px 6px,
		#fff 2px 2px 6px, #fff -2px 2px 6px,
		#fff 2px -2px 6px, #fff -2px -2px 6px,
		#fff 1px 2px 6px,  #fff -1px 2px 6px,
		#fff 1px -2px 6px, #fff -1px -2px 6px,
		#fff 2px 1px 6px,  #fff -2px 1px 6px,
		#fff 2px -1px 6px, #fff -2px -1px 6px;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	top: -20px;
	right: 10%;
}
/* 2-1.採用募集中！ボタンの位置 */
#main_contents #top_main_visual #main_visual_tab {
	position: absolute;
	right: 5%;
	bottom: 0;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_main_visual ul li {
		min-height: 380px;
	}
	#main_contents #top_main_visual h2 {
		font-size: 2.25rem;
		right: 5%;
		z-index: 999;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#main_contents #top_main_visual ul li {
		min-height: 560px;
	}
	#main_contents #top_main_visual h2 {
		right: 8%;
		top: -210px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_contents #top_main_visual h2 {
		font-size: 3.4375rem;
		top: -310px;
	}
}


/* ===========================
3.トップabout
============================== */
#main_contents #top_about {
	overflow: hidden;
	margin: 30px 12%;
}
#main_contents #top_about p {
	text-align: center;
}
#main_contents #top_about p a {
	padding: 0.1em 0.3em;
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #333;
	text-decoration: none;
	font-size: 1.125rem;
	line-height: 1.8;
}
#main_contents #top_about p a:hover {
	color: #f5ab18;
}
#main_contents #top_about p a::after {
	position: absolute;
	bottom: .4em;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #f5ab18;
	opacity: 0;
	transition: .5s;
}
#main_contents #top_about p a:hover::after {
	bottom: 0;
	opacity: 1;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_about {
		margin: 90px 12%;
	}
	#main_contents #top_about p a {
		font-size: 1.875rem;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #top_about {
		margin: 130px auto;
		width: 1024px;
	}
	#main_contents #top_about p a {
		font-size: 2.25rem;
	}
}


/* ===========================
4.トップproduct
============================== */
#main_contents #top_product {
	overflow: hidden;
	background: url("../common/img/common_backLogo1.png") 95% 30px no-repeat;
	padding: 0 5%;
}
#main_contents #top_product div:first-child {
	height: 228px;
	margin-top: 40px;
	background: #fff url("../img/top_product.jpg") right top no-repeat;
	background-size: cover;
}
#main_contents #top_product div:first-child p {
	font-size: 0;
}
#main_contents #top_product div:last-child {
	margin-top: 20px;
}
#main_contents #top_product div:last-child h3 {
	font-size: 1.25rem;
	font-weight: normal;
	margin: 15px 0 0;
}
#main_contents #top_product div:last-child p.top_product_sentence {
	font-size: 1rem;
	margin-bottom: 15px;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_product {
		padding: 0;
	}
	#main_contents #top_product div:first-child {
		width: 47%;
		height: 456px;
		margin-top: 100px;
		background-size: auto;
		float: left;
	}
	#main_contents #top_product div:last-child {
		width: 43%;
		margin-top: 30px;
		padding-right: 5%;
		float: right;
	}
	#main_contents #top_product div:last-child h3 {
		font-size: 1.5rem;
		margin-top: 105px;
	}
	#main_contents #top_product div:last-child p.top_product_sentence {
		font-size: 0.9375rem;
		margin-bottom: 55px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_contents #top_product div:last-child h3 {
		font-size: 2.25rem;
	}
}


/* ===========================
5.トップSERVICEスライダー
============================== */
#main_contents #top_service {
	margin-top: 40px;
	background: url("../img/top_service_back.jpg") center top no-repeat;
	position: relative;
}
#main_contents #top_service div:first-child {
	position: relative;
	z-index: 30;
}
#main_contents #top_service div:first-child h3 {
	padding-top: 20px;
}
#main_contents #top_service div#top_service_carousel {
	width: 76%;
	margin: 20px 12% 0;
	z-index: 20;
}
#main_contents #top_service div#top_service_carousel ul li {
	overflow: hidden;
}
#main_contents #top_service div#top_service_carousel ul li a {
	color: #000;
	text-decoration: none;
}
#main_contents #top_service div#top_service_carousel ul li:hover {
	opacity : 0.7;
}
#main_contents #top_service div#top_service_carousel ul li a h4 {
	font-size: 1.5rem;
	font-weight: normal;
	margin: 20px 0 0;
}
#main_contents #top_service div#top_service_carousel ul li a h4.service_speed {
	font-size: 1.25rem;
}
#main_contents #top_service div#top_service_carousel ul li a h4 br {
	display: none;
}
#main_contents #top_service div#top_service_carousel ul li a p {
	font-size: 1rem;
}
#main_contents #top_service div#top_service_carousel ul li a img {
	width: 100%;
	height: auto;
	margin-left: 20px;
}
#main_contents #top_service div#top_service_carousel ul li a .bnr img.pp{
	max-width: 320px;
	margin: 0 auto;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_service {
		margin-top: 100px;
	}
}

@media screen and (min-width: 48em) { /* 768px：PC用 */
	#main_contents #top_service {
		height: 556px;
	}
	#main_contents #top_service div:first-child {
		width: 50%;
	}
	#main_contents #top_service div:first-child h3 {
		padding-top: 90px;
	}
	#main_contents #top_service div#top_service_carousel {
		margin: 99px 12% 0;
		position: absolute;
		top: 60px;
	}
	#main_contents #top_service div#top_service_carousel ul li a h4 br {
		display: inline;
	}
	#main_contents #top_service div#top_service_carousel ul li a img {
		width: 60%;
		float: right;
	}
	#main_contents #top_service div#top_service_carousel ul li a .bnr img.pp{
		float: left;
		width: 50%;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_contents #top_service div:first-child {
		width: 40%;
	}
	#main_contents #top_service div#top_service_carousel {
		top: 0;
	}
	#main_contents #top_service div#top_service_carousel ul li a h4 {
		font-size: 2rem;
		margin: 120px 0 0;
	}
	#main_contents #top_service div#top_service_carousel ul li a h4.service_speed {
		font-size: 1.5rem;
	}
	#main_contents #top_service div#top_service_carousel ul li a p {
		font-size: 0.9375rem;
	}
	#main_contents #top_service div#top_service_carousel ul li a .bnr img.pp{
		float: left;
		max-width: 320px;
	}

}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #top_service div:first-child {
		width: 60%;
	}
	#main_contents #top_service div#top_service_carousel .service_carousel {
		margin: 0 auto;
		width: 1000px;
	}
	#main_contents #top_service div#top_service_carousel ul li a h4 {
		font-size: 2.25rem;
		margin: 190px 0 0;
	}
	#main_contents #top_service div#top_service_carousel ul li a h4.service_speed {
		font-size: 2rem;
	}
	#main_contents #top_service div#top_service_carousel ul li a img {
		width: auto;
	}
}


/* ===========================
6.トップ採用情報
============================== */
#main_contents #top_recruit {
	margin-top: 20px;
	background: url("../img/top_recruit_back.jpg") center top no-repeat;
	padding: 30px 0;
}
#main_contents #top_recruit #recruit_box {
	margin: 0 12%;
	overflow: hidden;
}
#main_contents #top_recruit #recruit_box div:first-child {
	min-width: 170px;
}
#main_contents #top_recruit #recruit_box div:first-child h3 {
	margin: 0.2em auto 0;
	font-size: 2rem;
	font-weight: normal;
	text-align: center;
}
#main_contents #top_recruit #recruit_box div:first-child p {
	margin-top: 15px;
}
#main_contents #top_recruit #recruit_box p.staff_img {
	margin: 20px 2% 0;
	width: 29%;
	float: left;
}
#main_contents #top_recruit #recruit_box p.staff_img a img {
	max-width: 100%;
	height: auto;
	display: block;
}
#main_contents #top_recruit #recruit_box p.staff_img a:hover img {
	opacity: 0.7;
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#main_contents #top_recruit {
		margin-top: 0px;
	}
	#main_contents #top_recruit #recruit_box {
		display: flex;
		justify-content: space-between;
	}
	#main_contents #top_recruit #recruit_box div:first-child h3 {
		text-align: left
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#main_contents #top_recruit #recruit_box p.staff_img {
		margin-top: 0;
		width: auto;
		float: none;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_contents #top_recruit {
		margin-top: 30px;
		padding: 59px 0;
	}
	#main_contents #top_recruit #recruit_box div:first-child p {
		margin-top: 85px;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #top_recruit {
		margin-top: 100px;
		padding: 99px 0;
	}
	#main_contents #top_recruit #recruit_box {
		margin: 0 auto;
		width: 1024px;
	}
	#main_contents #top_recruit #recruit_box div:first-child h3 {
		font-size: 2.5rem;
	}
	#main_contents #top_recruit #recruit_box div:first-child p {
		margin-top: 105px;
	}
}


/* ===========================
7.トップWORK
============================== */
#main_contents #top_work {
	margin-top: 40px;
	overflow: hidden;
	background: url("../common/img/common_backLogo2.png") 5% top no-repeat;
	background-size: auto 100%;
}
#main_contents #top_work #work_area {
	overflow: hidden;
	margin: 20px 12% 0;
}
#main_contents #top_work #work_area li {
	position: relative;
	overflow: hidden;
}
#main_contents #top_work #work_area li a {
	color: #000;
}
#main_contents #top_work #work_area li a:hover p {
	opacity: 0.7;
}
#main_contents #top_work #work_area li p:first-child {
	text-align: right;
	padding-bottom: 25px;
}#main_contents #top_work #work_area li p:first-child img {
	max-width: 100%;
	height: auto;
	display: block;
}
#main_contents #top_work #work_area li p:last-child {
	width: 12rem;
	text-align: center;
	font-size: 0.875rem;
	letter-spacing: 0.3em;
	font-family: arial, sans-serif;
	padding: 1.1rem 0;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	right: 0;
}
#main_contents #top_work #work_area li p:last-child:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0px;
	display: inline-block;
	width: 16px;
	height: 2px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%);
}
#main_contents #top_work .top_more {
	text-align: center;
	margin: 20px 0 50px;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_work {
		margin-top: 100px;
	}
	#main_contents #top_work #work_area {
		margin-top: 70px;
	}
	#main_contents #top_work #work_area li {
		width: 49%;
		position: relative;
		overflow: hidden;
		float: left;
	}
	#main_contents #top_work #work_area li:nth-child(2n+0) {
		float: right;
	}
	#main_contents #top_work .top_more {
		margin: 40px 0 80px;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #top_work #work_area {
		margin: 70px auto 0;
		width: 1024px;
	}
}


/* ===========================
8.トップNEWS
============================== */
#main_contents #top_information {
	margin-top: 40px;
}
#main_contents #top_information iframe {
	margin: 20px 12% 0;
	width: 76%;
	height: 330px;
}
#main_contents #top_information #news_more {
	text-align: center;
}
#main_contents #top_information .news_dammy {
	margin: 20px 12%;
	width: 76%;
}
#main_contents #top_information .news_dammy p {
	font-size: 1rem;
	margin: 0;
	border-bottom: 1px #ccc solid;
	padding: 0.5rem 0;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents #top_information {
		margin-top: 140px;
		padding: 0 0 60px;
	}
	#main_contents #top_information iframe {
		margin-top: 50px;
		height: 230px;
	}
	#main_contents  #top_information .news_dammy {
		margin-top: 50px;
	}
	#main_contents  #top_information .news_dammy p {
		font-size: 0.9375rem;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#main_contents #top_information iframe {
		display: block;
		margin: 50px auto 0;
		width: 1024px;
	}
}