@charset "UTF-8";
.ttl {
  margin: 20px 0
}

.ttl span {
  color: var(--main-color);
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 15px
}

.introduction {
  padding: 60px 0 0;
  text-align: center
}

.introduction p {
  color: var(--main-color);
  font-size: 30px;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 40px
}

.our {
  background: var(--bg-color)
}

.vision {
  margin-top: 60px
}

.mission {
  background: #fff
}

.our .inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 80px 0;
  position: relative
}

.our .inner::after {
  bottom: -13px;
  color: #fff;
  font-size: 120px;
  font-size: 12rem;
  font-weight: 700;
  position: absolute
}

.vision .inner::after {
  content: "VISION";
  right: 0
}

.mission .inner::after {
  color: var(--bg-color);
  content: "MISSION";
  left: 0
}

.value .inner::after {
  content: "VALUE";
  right: 0
}

.our img {
  border-radius: 20px;
  z-index: 1
}

.mission img {
  order: 2;
  margin-right: 50px
}

.our .txt {
  text-align: left;
  width: 50%
}

.mission .txt {
  order: 1
}

.our h3 {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 400
}

.our h3 strong {
  color: var(--main-color);
  display: block;
  font-size: 48px;
  font-size: 4.8rem;
  margin-top: 15px
}

.our .txt p {
  font-size: 28px;
  font-size: 2.8rem
}

.message {
  background: url(/img/company/bg-message.jpg) no-repeat center top;
  background-size: 100% auto;
  padding: 60px 0;
  text-align: center
}

.message p {
  line-height: 1.8
}

.message .copy {
  color: var(--main-color);
  line-height: 2;
  margin: 40px 0
}

.president {
  margin-top: 40px
}

.president img {
  border-radius: 20px
}

.president p {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center
}

.company {
  background: var(--bg-color);
  padding: 40px 0
}

.company table {
  margin: 0 auto 0;
  width: 700px
}

.company td, .company th {
  border-bottom: 1px dotted var(--bdr-color);
  font-size: 20px;
  font-size: 2rem;
  line-height: 1.4;
  padding: 15px 20px;
  text-align: left;
  vertical-align: top
}

.company th {
  font-weight: 400;
  width: 190px
}

@media screen and (max-width:1024px) {
  .ttl {
    margin: 20px 0
  }
  .ttl span {
    color: var(--main-color);
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 15px
  }
  .introduction {
    padding: 40px 0 0
  }
  .vision {
    margin-top: 60px
  }
  .our .inner {
    align-items: flex-start;
    padding: 40px 20px
  }
  .our .inner::after {
    font-size: 10rem
  }
  .introduction .our p {
    font-size: 2.2rem;
    margin-top: 20px
  }
  .vision .inner::after {
    content: "VISION";
    right: 0
  }
  .value .inner::after {
    bottom: -11px;
    right: 0
  }
  .our img {
    height: auto;
    width: 350px
  }
  .mission img {
    margin-right: 0;
    padding: relative;
    z-index: 1
  }
  .our .txt {
    padding-top: 10px
  }
  .our h3 strong {
    font-size: 4rem
  }
  .message {
    padding: 30px 0
  }
  .message img {
    width: 400px
  }
}

@media screen and (max-width:599px) {
  .ttl {
    margin: 20px 0
  }
  .ttl span {
    color: var(--main-color);
    display: block;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 15px
  }
  .introduction {
    padding: 20px 0 0;
    text-align: center
  }
  .introduction img {
    height: auto;
    width: 100px
  }
  .introduction p {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.8;
    margin-top: 20px
  }
  .vision {
    margin-top: 30px
  }
  .our .inner {
    flex-direction: column;
    padding: 30px 10px 50px
  }
  .our .inner::after {
    bottom: -13px;
    color: #fff;
    font-size: 7rem;
    font-weight: 700;
    position: absolute
  }
  .introduction .our p {
    font-size: 1.8rem
  }
  .mission .inner::after {
    color: var(--bg-color)
  }
  .value .inner::after {
    bottom: -8px
  }
  .our img {
    margin: 0 auto;
    width: 300px
  }
  .mission img {
    order: 1;
    margin: 0 auto
  }
  .our .txt {
    text-align: center;
    width: 100%
  }
  .mission .txt {
    order: 2
  }
  .our h3 {
    font-size: 1.4rem
  }
  .our h3 strong {
    margin-top: 10px
  }
  .message {
    padding: 30px 0
  }
  .message p {
    font-size: 1.4rem
  }
  .message .copy {
    color: var(--main-color);
    line-height: 1.6;
    margin: 20px 0
  }
  .president {
    margin-top: 40px
  }
  .company {
    padding: 20px 0
  }
  .company table {
    margin: 0 auto 0;
    width: 100%
  }
  .company td, .company th {
    font-size: 1.4rem;
    padding: 15px 10px
  }
  .company th {
    width: 70px
  }
}