table {
  margin: 3.5% auto 11.11% auto;
}
hr{
  width: 10%;
  margin: 0 auto;
  background: #808080;
  height: 3px;
}
#philosophy{
  padding: 0;
}
#philosophy h3{
  margin: 6.67% 0 5% 0;
}
#philosophy .inner > .txt{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
#philosophy p{
  margin: 0 0 5% 0;
  font-size: 16px;
  line-height: 2;
}
#online{
  position: relative;
  /* display: flex;
  justify-content: right; */
}
#online .imgBox{
  z-index: 10;
  text-align: left;
  /* position: absolute;
  top: -40px;
  right: 80%; */
}
#online .img::after{
  content: "";
  display: block;
  position: relative;
  height: 2px;
  background: #0353a1;
  width: 15%;
  margin: 5px 0 0 -50px;
}
#online > .txt{
  background: #f2f2f2;
  padding: 50px 200px 50px 200px;
  width: 80%;
}
#online .imgBox span{
  display: block;
}
#hiroC{
  position: relative;
}
#hiroC > .txt{
  background: #f2f2f2;
  width: 70%;
  padding: 5% 100px 5% 15%;
  position: relative;
}
#hiroC > .txt > .imgBox{
  position: absolute;
  top: 0;
  right: 100px;
}
#company {
  padding: 0;
  color: #fff;
}
#company .col3{
  display: flex; 
}
#company .col3 .col{
  flex-grow: 1;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#company .col3 .col::before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
}
#company .col3 .col:nth-child(1){
  background-image: url(../img/img_company_01.jpeg);
}
#company .col3 .col:nth-child(2){
  background-image: url(../img/img_company_02.jpeg);
}
#company .col3 .col:nth-child(3){
  background-image: url(../img/img_company_03.jpeg);
}
#company .col3 .col .txt{
  z-index: 1;
}
#company .col3 .col:nth-child(1) .txt::before{
  background-image: url(../img/icon_company_01.svg);
  content: "";
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
#company .col3 .col:nth-child(2) .txt::before{
  background-image: url(../img/icon_company_02.svg);
  content: "";
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
#company .col3 .col:nth-child(3) .txt::before{
  background-image: url(../img/icon_company_03.svg);
  content: "";
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
#company .col2{
  display: flex;
}
#company .col2 .col{
  flex-grow: 1;
  background: #0353a1;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;

}
#company .col2 .col:nth-child(1){
  border-right: #fff 1px solid;
}
#company .col2 .col:nth-child(2){
  border-left: #fff 1px solid;;
}
#company .col2 .col:nth-child(1) .txt::before{
  background-image: url(../img/icon_fInfo_01.svg);
  content: "";
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
#company .col2 .col:nth-child(2) .txt::before{
  background-image: url(../img/icon_fInfo_02.svg);
  content: "";
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
@media screen and (max-width:767px) {
  #company .col3,#company .col2{
    flex-wrap: wrap;
  }
  #company .col3 .col,#company .col2 .col{
    width: 100%;
  }
  #company .col2 .col:nth-child(1){
    border-right: none;
    border-bottom: #fff 1px solid;
  }
  #company .col2 .col:nth-child(2){
    border-left: none;
    border-top: #fff 1px solid;
  }
}