/***********************************************************************************************************************

home.css

***********************************************************************************************************************/
.home{

}
.home main{
	overflow-x: hidden; /* フォールバック */
	overflow-x: clip;   /* モダンブラウザ向け */
	padding-top: 0;
}
.home .header{
	background: transparent;
	transition: background 0.3s;
}

.home .header.is-white {
  background: #fff;
}
.home .header.is-white-force {
  background: #fff;
}


/* 背景が透明な時 */
.home .header.is-transparent .header-nav ul li button{
	color: #fff;	
}
.home .header.is-transparent .header-contact a,
.home .header.is-transparent .header-beginner a{
	color: #fff;
}
.home .header.is-transparent .header-contact a:hover,
.home .header.is-transparent .header-beginner a:hover{
	color: #99ddff;
}
.home .header.is-transparent .header-contact a::before{
	background-image: url("/common/img/icon_hd/icon_hd_mail_fff.svg");
}


/* 背景が透明でメガメニューを開いている時 */
.home .header.is-white-force .header-nav ul li button{
	color: #666;	
}
.home .header.is-white-force .header-nav ul li button:hover,
.home .header.is-white-force .header-nav ul li button.is-active {
  color: #006fb5;
}

.home .header.is-white-force .header-contact a{
	color: #666;
}
.home .header.is-white-force .header-beginner a{
	color: #006fb5;
}
.home .header.is-white-force .header-contact a::before{
	background-image: url("/common/img/icon_hd/icon_hd_mail.svg");
}



@media screen and (max-width: 767px) {
.home main{
	padding-top: 60px;
}
.home .header{
	background: #fff;
}
}





/* swiper *************************************************************/
.swiper-slide{
}
.swiper-slide img{
	width: 100%;
	height: auto;
}
.swiper-slide img.pc{ }
.swiper-slide img.sp{ display: none;}


@media screen and (max-width: 767px) {
.swiper-slide img.pc{ display: none;}
.swiper-slide img.sp{ display: block;}
}



/* sec *************************************************************/
.sec_hd{
	position: relative;
	padding: 0;
}
.sec_about{
	padding-top: 8%;
}
.sec_business{
	padding-top: 15%;
}
.business_wrap{
	position: relative;
	width: 84.02777778%;
	padding: 8em 0 5em;
	background-color: #f7f7f7;
}

.sec_company{
	padding-top: 15%;
}
.company_wrap{
	position: relative;
	width: 84.02777778%;
	/*padding: 8em 0 5em;*/
	margin-left: auto;
}

.sec_recruit{
	padding-top: 15%;
}
.recruit_wrap{
	position: relative;
	width: 84.02777778%;
	/*padding: 8em 0 5em;*/
}

.sec_news{
	padding: 15% 0;
}


@media screen and (max-width: 767px) {
.sec_business{
	padding-top: 20%;
}
.sec_company{
	padding-top: 30%;
}
.sec_recruit{
	padding-top: 30%;
}
.sec_news{
	padding: 20% 0;
}
}



/* 共通変更 *************************************************************/
.sec_business .cts_ft .btn_cmn_arrow{
	position: absolute;
	right: -9%;
	bottom: -1.5em;
	max-width: 260px;
}
.sec_company .cts_ft .btn_cmn_arrow{
	position: absolute;
	left: -9%;
	bottom: -1.5em;
	max-width: 260px;
}


.list_btn_company{
	max-width: 280px;
	margin-left: -1em;
}
.list_btn_company li{
	margin-top: 1em;
}
.list_btn_company .btn_cmn_arrow a{
	color: #fff;
	background-color: transparent;
	border: 1px solid rgba(255,255,255,0.2);
}
.list_btn_company .btn_cmn_arrow a:hover{
	background-color: #006fb5;
}
.list_btn_company .btn_cmn_arrow a span,
.list_btn_company .btn_cmn_arrow a span::before{
	background-color: #fff;
}


.list_btn_recruit{
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.list_btn_recruit li{
	width: 47%;
}
.list_btn_recruit li:last-child{
	width: 60%;
	margin: 6% auto 0;
}


@media screen and (max-width: 767px) {
.list_btn_company{
	display: none;
}
}

@media screen and (max-width: 500px) {
.list_btn_recruit{
	max-width: 260px;
}
.list_btn_recruit li,
.list_btn_recruit li:last-child{
	width: 100%;
}
.list_btn_recruit li:nth-child(2){
	display: none;
}
}



/* h1〜 *************************************************************/
h1.h1_ttl{
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	font-family: "BIZ UDGothic", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 18px;
	font-size: clamp(12px, 2vw, 18px);
	text-align: center;
	line-height: 1.5em;
	color: #fff;
	letter-spacing: 0.4em;
	text-shadow: 0 0 12px rgba(0,0,0,0.5);
}

h1.h1_ttl .en{
	display: block;
	font-size: 290%;
	font-family: "Zalando Sans SemiExpanded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500; /*from 200 to 900*/
  font-style: italic;
  letter-spacing: normal;
  margin-bottom: 0.5em;
}

h2.h2_about{
	font-size: 38px;
	font-size: clamp(24px, 3.8vw, 38px);
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 0.8em;
}
h2.h2_about .en{
	display: block;
	font-size: 70%;
	color: #006fb5;
}

h3.h3_ttl{
	position: absolute;
	top: -2em;
	right: -9%;
	font-size: 18px;
	font-size: clamp(13px, 1.8vw, 18px);
	color: #666;
	text-align: right;
}
.sec_company h3.h3_ttl{
	right: auto;
	left: -9%;
	text-align: left;
}
h3.h3_ttl .en{
	display: block;
	font-size: 320%;
	color: #006fb5;
}
.sec_news h3.h3_ttl{
	position: relative;
	top: 0;
	right: auto;
	left: 0;
	text-align: left;
}


h4.h4_ttl{
	font-size: 30px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 0.8em;
}
h4.h4_company{
	font-size: 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.5em;
	color: #fff;
	margin-bottom: 1.5em; /*0.8em*/
}
h4.h4_recruit{
	font-size: 26px;
	font-size: clamp(20px, 2.6vw, 26px);
	line-height: 1.5em;
	text-align: center;
	color: #fff;
	margin-bottom: 2.5em; /*0.8em*/
}

h5.h5_biz{
	font-size: 22px;
	font-size: clamp(18px, 2.2vw, 22px);
	text-align: center;
	margin-bottom: 0.6em;
}
.list_business li:hover h5.h5_biz{
	color: #fff;
}

p.p_business{
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	text-align: center;
	line-height: 2.2em;
}


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

}


@media screen and (max-width: 600px) {
h1.h1_ttl{
	letter-spacing: 0.3em;
}
h1.h1_ttl .en{
	font-size: 280%;
}

h4.h4_recruit{
	margin-bottom: 1em;
}
}




/* about_box *************************************************************/
.about_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	align-items: center;
}
.about_box_txt{
	width: 48.3333333%;
}
.about_box_zu{
	width: 41.6777777%;
}
.about_box_txt p{
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	text-align: center;
}

.fig_octagon{
}
.fig_octagon svg{
	overflow: visible;
}

.fig_octagon a{
	transition: all .3s ease-in-out;
	transform-origin: center;
}
.fig_octagon a:hover{
	transform: scale(1.08);
}

/* safari対策で追加。HTMLにfilterタグ追加している。 */
.fig_octagon a:hover g {
  filter: url(#shadow);
}



@media screen and (max-width: 767px) {
.about_box_txt{
	order: 2;
	width: 100%;
}
.about_box_zu{
	order: 1;
	width: 85%;
	max-width: 400px;
	margin: 0 auto 2em;
}
}




/*************************************************************
business_inner 
company_inner
recruit_inner
*************************************************************/
.business_inner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}
.company_inner{
	position: absolute;
	top: 20%;
	left: 5%;
	width: 60%;
}
.recruit_inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
}


@media screen and (max-width: 1023px) {
.company_inner{
	top: 16%;
}
}

@media screen and (max-width: 767px) {
.company_inner{
	top: 20%;
}
}





/* bg_photo *************************************************************/
.bg_photo{
}
.bg_photo img{
	width: 100%;
	height: auto;
}
.bg_photo .pc{}
.bg_photo .md{ display: none;}
.bg_photo .sp{ display: none;}


@media screen and (max-width: 1023px) {
.bg_photo .pc{ display: none;}
.bg_photo .md{ display: block;}
.bg_photo .sp{ display: none;}
}


@media screen and (max-width: 767px) {
.bg_photo .pc{ display: none;}
.bg_photo .md{ display: none;}
.bg_photo .sp{ display: block;}
}





/* list_business *************************************************************/
.list_business{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 3%;
}
.list_business li{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 33.3333333%;
	border-bottom: 2px solid #fff;
	transition: all .3s ease-in-out;
}

.list_business li .bg_color{
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: transparent;
	transition: all .3s ease-in-out;
}

.list_business li:hover .bg_color{ background-color: #c18faf;}
.list_business li.biz_chemistry:hover .bg_color{ background-color: #f2a09b;}
.list_business li.biz_energy:hover .bg_color{ background-color: #d0da62;}
.list_business li.biz_medical:hover .bg_color{ background-color: #7fc26f;}
.list_business li.biz_water:hover .bg_color{ background-color: #81b3d6;}
.list_business li.biz_it:hover .bg_color{ background-color: #f3d339;}
.list_business li.biz_car:hover .bg_color{ background-color: #6890c1;}
.list_business li.biz_health:hover .bg_color{ background-color: #eeb065}
.list_business li.biz_others:hover .bg_color{ background-color: #999;}



.list_business li a{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.list_business li::before{
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	right: -1px;
	width: 2px;
	height: 100%;
	background-color: #fff;
}

.list_business li .photo{
	overflow: hidden;
	position: relative;
	padding-top: 64%;
}
.list_business li .photo img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: all 1s ease-in-out; /*.6s*/
}
.list_business li:hover .photo img{
	transform: translate(-50%, -50%) scale(1.1);
}

.list_business li .inner{
	width: 90%;
	margin: 0 auto;
}
.list_business li:hover .inner{
	color: #fff;
}

.list_business li p.font14{
	line-height: 1.6em;
	text-align: justify;
}

.list_business i.icon_biz{
	position: relative;
	z-index: 1;
	display: block;
	width: 25%;
	margin: -12.5% auto 1.2em;
	background-color: #f7f7f7;
	border-radius: 50%;
}



@media screen and (max-width: 767px) {
.list_business li{
	width: 50%;
}
}


@media screen and (max-width: 639px) {
.list_business li{
	width: 100%;
}
}




/* biz_arrow *************************************************************/
.list_business li .biz_arrow{
	display: block;
	position: relative;
	right: 4%;
	z-index: 1;
	width: 3em; /*40px*/
	height: 3em; /*40px*/
	border-radius: 50% 50%;
	/*border: 1px solid #006fb5;*/
	background-color: #c18faf;
	margin: auto 0 4% auto;
	vertical-align: middle;	
}
.list_business li.biz_chemistry .biz_arrow{ background-color: #f2a09b;}
.list_business li.biz_energy .biz_arrow{ background-color: #d0da62;}
.list_business li.biz_medical .biz_arrow{ background-color: #7fc26f;}
.list_business li.biz_water .biz_arrow{ background-color: #81b3d6;}
.list_business li.biz_it .biz_arrow{ background-color: #f3d339;}
.list_business li.biz_car .biz_arrow{ background-color: #6890c1;}
.list_business li.biz_health .biz_arrow{ background-color: #eeb065}
.list_business li.biz_others .biz_arrow{ background-color: #999;}

.list_business li .biz_arrow::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50% 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  /*transform: translate(-50%, -50%) scale(0);*/
  transition: all .3s ease-in-out;

}
.list_business li:hover .biz_arrow::before {
  transform: translate(-50%, -50%) scale(1);
}


.list_business .biz_arrow .arrow-round {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 1.8em;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
  margin-top: 0.05em;
  transition: all .3s ease-in-out;
}
.list_business .biz_arrow .arrow-round::before {
  content: "";
  position: absolute;
  bottom: 3px;
  right: -0.05em;
  display: block;
  width: 0.8em;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
  transform: rotate(45deg);
  transition: all .3s ease-in-out;
}

.list_business li:hover .biz_arrow .arrow-round,
.list_business li:hover .biz_arrow .arrow-round::before{
	background-color: #c18faf;
}
.list_business li.biz_chemistry:hover .biz_arrow .arrow-round,
.list_business li.biz_chemistry:hover .biz_arrow .arrow-round::before{
	background-color: #f2a09b;
}
.list_business li.biz_energy:hover .biz_arrow .arrow-round,
.list_business li.biz_energy:hover .biz_arrow .arrow-round::before{
	background-color: #d0da62;
}
.list_business li.biz_medical:hover .biz_arrow .arrow-round,
.list_business li.biz_medical:hover .biz_arrow .arrow-round::before{
	background-color: #7fc26f;
}
.list_business li.biz_water:hover .biz_arrow .arrow-round,
.list_business li.biz_water:hover .biz_arrow .arrow-round::before{
	background-color: #81b3d6;
}
.list_business li.biz_it:hover .biz_arrow .arrow-round,
.list_business li.biz_it:hover .biz_arrow .arrow-round::before{
	background-color: #f3d339;
}
.list_business li.biz_car:hover .biz_arrow .arrow-round,
.list_business li.biz_car:hover .biz_arrow .arrow-round::before{
	background-color: #6890c1;
}
.list_business li.biz_health:hover .biz_arrow .arrow-round,
.list_business li.biz_health:hover .biz_arrow .arrow-round::before{
	background-color: #eeb065
}
.list_business li.biz_others:hover .biz_arrow .arrow-round,
.list_business li.biz_others:hover .biz_arrow .arrow-round::before{
	background-color: #999;
}



@media screen and (max-width: 767px) {
.list_business .biz_arrow .arrow-round::before {
  bottom: 2.5px;
}
}



/* news_box *************************************************************/
.news_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.news_box_l{
	width: 200px;
}
.news_box_r{
	width: calc(100% - 230px);
	max-width: 900px;
	margin-left: auto;
}



@media screen and (max-width: 767px) {
.news_box_l{
	width: 100%;
	margin-bottom: 2em;
}
.news_box_r{
	width: 100%;
	margin-left: 0;
}
}







/***************************************************************
p.p_mega_ttl リクルート用
****************************************************************/
.news_box_r p.p_mega_ttl{
	font-size: 14px;
	/*font-size: clamp(13px, 1.4vw, 14px);*/
	text-align: right;
	margin-top: 2em;
}
.news_box_r .mega_arrow{
	width: 1.8em; /*40px*/
	height: 1.8em; /*40px*/
}
.news_box_r .mega_arrow .arrow-round {
  width: 1.1em; /*0.7em*/
}
.news_box_r .mega_arrow .arrow-round::before {
  bottom: 2px; /*3px*/
  width: 0.5em; /*0.35em*/
}



@media screen and (max-width: 767px) {
.news_box_r .mega_arrow .arrow-round::before {
  bottom: 2.5px;
}
}