/*****************************************
*
* 会社概要
*
******************************************/


/*------------------------------------------*/
/* 交通のご案内
/*------------------------------------------*/

.company-access .box+.content {
  margin-top: 40px;
}

@media screen and (min-width: 834px), print {
  .company-access .box {
    display: grid;
    grid-template-columns: calc(calc(380 / 1400) * 100vw) 1fr;
    column-gap: calc(calc(100 / 1400) * 100vw);
  }

  .company-access .box+.content {
    margin-top: 80px;
  }
}

@media screen and (min-width: 1400px), print {
  .company-access .box {
    grid-template-columns: 380px 1fr;
    column-gap: 100px;
  }
}

/* 画像 --------------------------------*/
.company-access .map-image img {
  width: 100%;
  border-radius: 20px;
}

@media screen and (max-width: 833px) {
  .company-access .map-image {
    max-width: 380px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
}

/* 見出し --------------------------------*/
.company-access .heading {
  position: relative;
  text-align: left;
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 50px;
  margin-bottom: 20px;
}

.company-access .heading.car {
  margin-top: 40px;
}

.company-access .heading::before {
  content: '';
  display: inline-block;
  aspect-ratio: 45/50;
  width: 35px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.company-access .heading.train::before {
  background: url('../img/common/icon_train.svg') no-repeat;
  background-size: 100%;
}

.company-access .heading.car::before {
  background: url('../img/common/icon_car.svg') no-repeat;
  background-size: 100%;
}

@media screen and (min-width: 834px), print {
  .company-access .heading {
    font-size: 1.4rem;
    padding-left: 60px;
    margin-bottom: 40px;
  }

  .company-access .heading.car {
    margin-top: 80px;
  }

  .company-access .heading::before {
    width: 45px;
  }
}