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

business.css

***********************************************************************************************************************/
.business{
}

.business main{
	overflow-x: hidden; /* フォールバック */
	overflow-x: clip;   /* モダンブラウザ向け */
}


/* sec *************************************************************/
.sec_hd{
	position: relative;
	padding: 0;
}
.sec_lead{
	padding-top: 8%;
}
.sec_cate{
	padding-bottom: 8%;
}
.cate_wrap{
	padding-top: 10%;
}


@media screen and (max-width: 767px) {
.sec_lead{
	padding-top: 12%;
}
.cate_wrap{
	padding-top: 18%;
}
.sec_cate{
	padding-bottom: 18%;
}
}




/* h1〜 *************************************************************/
h1.h1_ttl{
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	font-size: 18px;
	font-size: clamp(14px, 1.8vw, 18px);
	text-align: center;
	color: #fff;
}
h1.h1_ttl .en{
	display: block;
	font-size: 310%;
	padding-bottom: 0.1em;
}

h2.h2_ttl{
	font-size: 34px;
	font-size: clamp(22px, 3.4vw, 34px);
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 1.2em; /*0.8em*/
}

h3.h3_ttl{
	font-size: 30px;
	font-size: clamp(16px, 3vw, 30px);
	color: #333;
	text-align: center;
	margin-bottom: 0.8em;
}

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

.cate_box p{
	text-align: justify;
}


@media screen and (max-width: 767px) {
h1.h1_ttl .en{
	font-size: 250%;
}
}




/* fig_hd *************************************************************/
.fig_hd{

}
.fig_hd img{
	width: 100%;
	height: auto;
}
.fig_hd .pc{}
.fig_hd .sp{ display: none;}


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





/* cate_box *************************************************************/
.cate_box{
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.cate_box.reverse{
	flex-direction: row-reverse;
}
.cate_box_photo{
	position: sticky;
	z-index: 1;
	top: 100px;
	left: 0;
	width: 48.6111111%;
}
.reverse .cate_box_photo{
	left: auto;
	right: 0;
}

.cate_box_txt{
	width: 84.02222228%;
	margin: -28% 0 0 auto;
	padding: 0 0 0;
}
.reverse .cate_box_txt{
	margin-left: 0;
	margin-right: auto;
}

.cate_box_txt .inner_wide{
	width: 61.1570247%;
	margin: 0 0 0 auto;
}
.reverse .cate_box_txt .inner_wide{
	margin-left: 0;
}

.cate_box_txt .inner{
	width: 84%;
	max-width: 520px; /*500px*/
	margin: 0 auto;
}

.cate_box_photo img{
	width: 100%;
	height: auto;
	border-radius: 0 4em 4em 0;
}
.reverse .cate_box_photo img{
	border-radius: 4em 0 0 4em;
}

.cate_box i.icon_biz{
	display: block;
	width: 40%;
	max-width: 120px;
	margin: 0 auto 1em;
}

.cate_box .bg_color{ 
	padding: 4% 0 5%;
	margin-top: 3%;
	border-radius: 4em 0 0 4em;
	background-color: rgba(199,158,183,0.08);
}
.cate_box.reverse .bg_color{ 
	border-radius: 0 4em 4em 0;
}

.cate_box.chemistry .bg_color{ background-color: rgba(2245,176,170,0.08);}
.cate_box.energy .bg_color{ background-color: rgba(216,221,117,0.08);}
.cate_box.medical .bg_color{ background-color: rgba(142,201,129,0.08);}
.cate_box.water .bg_color{ background-color: rgba(129,179,214,0.08);}
.cate_box.it .bg_color{ background-color: rgba(245,216,72,0.08);}
.cate_box.car .bg_color{ background-color: rgba(122,161,203,0.08);}
.cate_box.health .bg_color{ background-color: rgba(241,188,120,0.08);}
.cate_box.others .bg_color{ background-color: rgba(153,153,153,0.08);}



@media screen and (max-width: 767px) {
.cate_box_photo{
	position: relative;
	top: 0;
	width: 95%;
}
.reverse .cate_box_photo{
	z-index: 0;
	left: 0;
	margin-right: auto;
}
.cate_box_txt{
	position: relative;
	z-index: 1;
	width: 95%;
	margin-top: -40px;
}
.reverse .cate_box_txt{
	margin-left: auto;
	margin-right: 0;
}
.cate_box_txt .inner_wide{
	width: 95%;
	margin: 0;
}
.cate_box_txt .bg_color .inner_wide{
	width: 100%;
}
.reverse .cate_box_txt .inner_wide{
	margin-left: 0;
}
.cate_box_photo img,
.reverse .cate_box_photo img{
	border-radius: 0 2em 2em 0;
}

.cate_box i.icon_biz{
	position: relative;
	z-index: 1;
	width: 80px;
	background-color: #fff;
	border-radius: 50%;
}
.cate_box .bg_color,
.cate_box.reverse .bg_color{
	padding: 4% 0 6%;
	border-radius: 2em 0 0 2em;
}
}




/* list_cate *************************************************************/
.list_cate{
	
}
.list_cate li{
	position: relative;
	font-size: 18px;
	font-size: clamp(15px, 1.8vw, 18px);
	border-bottom: 1px solid rgba(199,158,183,0.2);
}

.list_cate li::after{
	content: "";
	position: absolute;
	left: 0;
  width: 100%;
  height: 1px;
  background-color: #c79eb7;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .4s ease-in-out; /*transform .3s ease-in-out*/
}
.list_cate li:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}


.list_cate li a{
	display: block;
	color: #666;
	font-weight: 500;
	padding: 1em 2em 1em 0;
}

.list_cate li a:hover{
	color: #c79eb7;
}

.chemistry .list_cate li{ border-bottom: 1px solid rgba(2245,176,170,0.2);}
.energy .list_cate li{ border-bottom: 1px solid rgba(216,221,117,0.2);}
.medical .list_cate li{ border-bottom: 1px solid rgba(142,201,129,0.2);}
.water .list_cate li{ border-bottom: 1px solid rgba(129,179,214,0.2);}
.it .list_cate li{ border-bottom: 1px solid rgba(245,216,72,0.2);}
.car .list_cate li{ border-bottom: 1px solid rgba(122,161,203,0.2);}
.health .list_cate li{ border-bottom: 1px solid rgba(241,188,120,0.2);}
.others .list_cate li{ border-bottom: 1px solid rgba(153,153,153,0.2);}


.chemistry .list_cate li::after{ background-color: #eeaca7;}
.energy .list_cate li::after{ background-color: #d8dd75;}
.medical .list_cate li::after{ background-color: #8ec981;}
.water .list_cate li::after{ background-color: #81b3d6;}
.it .list_cate li::after{ background-color: #f5d848;}
.car .list_cate li::after{ background-color: #7aa1cb;}
.health .list_cate li::after{ background-color: #f1bc78;}
.others .list_cate li::after{ background-color: #999;}


.chemistry .list_cate li a:hover{ color: #eeaca7;}
.energy .list_cate li a:hover{ color: #d8dd75;}
.medical .list_cate li a:hover{ color: #8ec981;}
.water .list_cate li a:hover{ color: #81b3d6;}
.it .list_cate li a:hover{ color: #f1c400;} /*文字色だけ濃く変更 #f5d848*/
.car .list_cate li a:hover{ color: #7aa1cb;}
.health .list_cate li a:hover{ color: #f1bc78;}
.others .list_cate li a:hover{ color: #999;}




/* biz_arrow *************************************************************/
.list_cate li .biz_arrow{
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1;
	width: 1.5em; /*40px*/
	height: 1.5em; /*40px*/
	border-radius: 50% 50%;
	/*border: 1px solid #006fb5;*/
	background-color: #fff;
	margin: auto 0 4% auto;
	vertical-align: middle;	
}

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

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

.chemistry .list_cate li .biz_arrow::before,
.chemistry .list_cate .biz_arrow .arrow-round,
.chemistry .list_cate .biz_arrow .arrow-round::before{
	background: #eeaca7;
}
.energy .list_cate li .biz_arrow::before,
.energy .list_cate .biz_arrow .arrow-round,
.energy .list_cate .biz_arrow .arrow-round::before{
	background: #d8dd75;
}
.medical .list_cate li .biz_arrow::before,
.medical .list_cate .biz_arrow .arrow-round,
.medical .list_cate .biz_arrow .arrow-round::before{
	background: #8ec981;
}
.water .list_cate li .biz_arrow::before,
.water .list_cate .biz_arrow .arrow-round,
.water .list_cate .biz_arrow .arrow-round::before{
	background: #81b3d6;
}
.it .list_cate li .biz_arrow::before,
.it .list_cate .biz_arrow .arrow-round,
.it .list_cate .biz_arrow .arrow-round::before{
	background: #f5d848;
}
.car .list_cate li .biz_arrow::before,
.car .list_cate .biz_arrow .arrow-round,
.car .list_cate .biz_arrow .arrow-round::before{
	background: #7aa1cb;
}
.health .list_cate li .biz_arrow::before,
.health .list_cate .biz_arrow .arrow-round,
.health .list_cate .biz_arrow .arrow-round::before{
	background: #f1bc78;
}
.others .list_cate li .biz_arrow::before,
.others .list_cate .biz_arrow .arrow-round,
.others .list_cate .biz_arrow .arrow-round::before{
	background: #999;
}


.list_cate li:hover .biz_arrow .arrow-round,
.list_cate li:hover .biz_arrow .arrow-round::before{
	background-color: #fff;
}




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