@charset "utf-8";

/* =======================

アヤハグループ採用情報
「事業」のこと SP

========================== */

#business{
}

/*===== 事業スライド =====*/

.slide_wrap{
  overflow: hidden;
}

.slide{
  padding-left: 0;
}

li.slick-slide{
  position: relative;
}
.slide img{
  vertical-align: bottom;
  width: 100%;
}
li.slick-slide p{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #FFF;
  font-size: .5em;
  background-color: rgba(31,44,92,0.85);
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#1F2C5C80,EndColorStr=#1F2C5C80);/*IE8以下用*/
}
.slick-prev {
  left: 0;
  top:50%;
  z-index: 100;
  width: 36px;
  height: 40px;
}
.slick-next {
  right: 0;
  top:50%;
  z-index: 99;
  width: 36px;
  height: 40px;
}
.slick-prev:before{
  content: url(../../js/slick/left.png);
}
.slick-next:before{
  content: url(../../js/slick/right.png);
}
.slick-dots li{
 margin: 0;
}

/*===== グループツリー =====*/

#grp_tree{
  margin-bottom: 30px;
}
#grp_tree ul{
  list-style: none;
  padding: 0;
  margin: 0 0 1px 0;
  background-color: #FFF;
}

#grp_tree li a{
  display: block;
  background: url(../images/blank.png) no-repeat right center;
  text-decoration: none;
  color: #333;
  padding-right: 18px;
}

#grp_tree li a:hover{
  opacity: .4;
}

#grp_tree li{
  box-sizing: border-box;
  padding: 6px 10px 6px 1.8em;
  border-bottom: solid 1px #FFF;
}

#grp_tree h3{
  display: block;
  border-bottom: none;
  margin: 30px 0;
  padding: 0
}

#grp_tree .tree h3{  padding-left: .5em;}
#grp_tree .tree h4{  padding-left: 1em;}
#grp_tree .tree h5{  padding-left: 1.5em}
#grp_tree .tree h3,
#grp_tree .tree h4{
  margin: 0;
  color: #333;
  line-height: 40px;
  font-weight: normal;
  font-size: 18px;
  text-align: left;
  margin-bottom: 1px;
	padding: 0 10px;
}

#grp_tree .tree h5{
  font-size: 16px;
  line-height: 40px;
  margin: 0;
}

/* 各色 */
#grp_tree .tree .map1{background-color: #CCC}
#grp_tree .tree .map3,
#grp_tree .tree .map4{background-color: #DDD}

#grp_tree .tree h5 {color: #136EAB; background-color: #F1F4FA;}
#grp_tree .tree ul li {background-color: #E1E8F3;}

#grp_tree .tree .mint h5{color: #009E96; background-color: #EFF8F7;}
#grp_tree .tree .orange h5{color: #EE7800; background-color: #FEF6ED;}
#grp_tree .tree .pink h5{color: #EA545D; background-color: #FEF5F4;}
#grp_tree .tree .green h5{color: #22AC38; background-color: #F4F9F1;}
#grp_tree .tree .purpul h5{color: #710279; background-color: #fff8ff;}

#grp_tree .tree .mint li{background-color: #E0F1F0;}
#grp_tree .tree .orange li{background-color: #FDEDDB;}
#grp_tree .tree .pink li{background-color: #FDEAE7;}
#grp_tree .tree .green li{background-color: #E9F3E3;}
#grp_tree .tree .purpul li{background-color: #EDE0EE;}

/*===== 活動拠点 =====*/
#base img{
	min-height: 300px;
}



/*===== 数字で見るアヤハ =====*/

#data h3{
  margin-bottom: 30px;
}

.data_box{
  margin: 0 auto;
}

.data_box img{
  display: block;
  margin: 0 auto;
}

.data_box img:hover{
  cursor: pointer;
  opacity: .7;
}
.balloon{
  background-color: #EBEBEB;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.balloon h4{
  text-align: center;
  font-size: 1.6em;
  border-bottom: solid 4px #999999;
  margin: 0 0 10px 0;
}

.balloon h4 span{
  color: #E83817;
  font-size: 1.2em;
}

.dis_none{
  display: none;
}

.data-section-title{
  margin-top: 60px;
  text-align: center !important;
  color: #666;
  font-size: 1.5rem;
}

.data-imgbox{
  margin-top: 15px;
}

.data-3gridbox{
  display: grid;
  grid-template-columns: 586px 478px;
  grid-template-rows: auto auto;
  gap: 15px;
  margin-top: 15px;
}

.data-3gridbox img{
  width: 100%;
  height: auto;
}

.data-3gridbox-first{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.data-3gridbox-second{
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.data-3gridbox-third{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.data-3gridbox.reverse{
  grid-template-columns: 478px 586px;
}

.reverse .data-3gridbox-first{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.reverse .data-3gridbox-second{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.reverse .data-3gridbox-third{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}