/* unique common */
.outline {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 600px;
  margin-bottom: 25rem;
  text-align: center;
}

.outline .outline_visual {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
}

.outline .container {
  position: relative;
  z-index: 2;
  display: flex;
}

.outline .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 600px;
}

.outline .name,
.outline .title,
.outline .text {
  margin-bottom: 3rem;
}

.outline .text {
  color: #3e3f5d;
}

.outline .link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 240px;
  padding-bottom: 1.4rem;
  color: #3e3f5d;
}

.outline .link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 250px;
  height: 16px;
  margin: auto;
  background: url(../../images/i_arrow.svg) top center no-repeat;
  background-size: 100%;
  transition: .3s;
}
.outline .link:hover {
  color: #019a3b;
}

.outline .link:hover::before {
  left: 10px;
  background: url(../../images/i_arrow-green.svg) top center no-repeat;
  background-size: 100%;
}

.recruit.outline .link::before {
  width: 212px;
}


@media only screen and (max-width: 767px) {
  .outline {
    height: auto;
    min-width: auto;
    margin-bottom: 0;
  }

  main .outline:not(.products):not(.access) {
    overflow: hidden;
  }

  .outline + .outline {
    padding-top: 15rem;
  }

  .outline .outline_visual {
    position: relative;
    height: 0;
    overflow: unset;
  }

  .outline .box {
    height: auto;
    margin: 0 auto 6rem;
  }
}

/* main visual */
.main_visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0;
  min-width: 1170px;
  margin-bottom: 20rem;
  padding-top: 46.55555%;
  background: url(../../images/front/p_main.png) top center no-repeat;
  background-size: 100%;
}

.main_visual::before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -160px;
  left: 0;
  right: 0;
  width: 440px;
  height:430px;
  margin: auto;
  background: url(../../images/front/p_gum.png) top left no-repeat;
  background-size: 100%;
}

.main_visual > .container {
  position: absolute;
  z-index: 3;
  top: 262px;
  right: 0;
  left: 0;
  height: 150px;
  margin: auto;
}

.main_visual > .container .title {
  margin-left: 6rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 5rem;
  color: #019a3b;
  line-height: 1.7;
}


@media only screen and (max-width: 767px) {
  .main_visual {
    min-width: auto;
    margin-bottom: 19rem;
    padding-top: 171.2%;
    background: url(../../images/front/p_main_sp.png) top left no-repeat;
    background-size: 100%;
  }

  .main_visual::before {
    bottom: -282px;
    width: 75%;
    background-size: contain;
  }

  .main_visual > .container {
    top: 340px;
    height: auto;
  }

  .main_visual > .container .title {
    margin-left: 1.5rem;
    font-size: 3rem;
  }
}

/* introduction */
.introduction {
  position: relative;
  z-index: 1;
  margin-bottom: 290px;
}

.introduction > * {
  text-align: center;
}

.introduction .title {
  margin-bottom: 6rem;
  line-height: 1;
}

.introduction .text {
  font-family: 'Noto Sans JP', sans-serif;
  color: #3e3f5d;
  line-height: 2.6;
  letter-spacing: .05rem;
}

@media only screen and (max-width: 767px) {
  .introduction {
    margin-bottom: 19rem;
  }

  .introduction > * {
    text-align: left;
  }

  .introduction .title {
    text-align: center;
    line-height: 1.6;
  }
}

/* products */
.products::before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -70px;
  left: 50%;
  width: 590px;
  margin-left: -590px;
  padding-top: 103.05084%;
  background-size: 100%;
}

.products .outline_visual {
  background: url(../../images/front/p_products-bg.jpg) top left no-repeat;
  background-size: cover;
}

.products .outline_visual::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 901px;
  height: 1431px;
  margin-right: -901px;
  background: url(../../images/front/p_products-triangle.png) bottom right no-repeat;
  background-size: 100%;
}

.products .container {
  justify-content: flex-end;
}

.products.outline .box {
  padding-right: 4rem;
}

@media only screen and (min-width: 1800px) {
  .products .outline_visual::before {
    margin-right: -50%;
  }
}

@media only screen and (max-width: 767px) {
  .products::before {
    bottom: -55px;
    left: 0;
    right: 0;
    width: 90%;
    margin: auto;
  }

  .products .outline_visual {
    padding-top: 106.66666%;
    background: url(../../images/front/p_products-bg_sp.jpg) top left no-repeat;
    background-size: 100%;
  }

  .products .outline_visual::before {
    bottom: 100%;
    right: 0;
    width: 100%;
    height: 0;
    margin-right: 0;
    padding-top: 152.53333%;
    background: url(../../images/front/p_products-triangle-gray_sp.png) bottom right no-repeat;
    background-size: 100%;
  }

  .products .outline_visual::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0;
    padding-top: 62.13333%;
    background: url(../../images/front/p_products-triangle-large-green_sp.png) top right no-repeat;
    background-size: 100%;
  }

  .products.outline .box {
    padding-right: 0;
  }
}

/* business */
.business .outline_visual {
  background: url(../../images/front/p_business-bg.jpg) top left no-repeat;
  background-size: cover;
}

.business .outline_visual::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 900px;
  height: 850px;
  margin-left: -900px;
  background: url(../../images/front/p_business-triangle.png) bottom left no-repeat;
  background-size: 100%;
}

.business.outline .box {
  padding-left: 4rem;
}

@media only screen and (min-width: 1800px) {
  .business .outline_visual::before {
    margin-left: -50%;
  }
}

@media only screen and (max-width: 767px) {
  .business .outline_visual {
    padding-top: 106.66666%;
    background: url(../../images/front/p_business-bg_sp.jpg) top left no-repeat;
    background-size: 100%;
  }

  .business .outline_visual::before {
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 0;
    margin-left: 0;
    padding-top: 146.13333%;
    background: url(../../images/front/p_business-triangle-gray_sp.png) bottom left no-repeat;
    background-size: 100%;
  }

  .business .outline_visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 62.13333%;
    background: url(../../images/front/p_business-triangle-large-green_sp.png) top left no-repeat;
    background-size: 100%;
  }

  .business.outline .box {
    padding-left: 0;
  }
}

/* quality */
.quality .outline_visual {
  background: url(../../images/front/p_quality-bg.jpg) top left no-repeat;
  background-size: cover;
}

.quality .outline_visual::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 901px;
  height: 851px;
  margin-right: -901px;
  background: url(../../images/front/p_quality-triangle.png) bottom right no-repeat;
  background-size: 100%;
}

.quality .container {
  justify-content: flex-end;
}

.quality.outline .box {
  padding-right: 4rem;
}

@media only screen and (min-width: 1800px) {
  .quality .outline_visual::before {
    margin-right: -50%;
  }
}

@media only screen and (max-width: 767px) {
  .quality .outline_visual {
    padding-top: 106.66666%;
    background: url(../../images/front/p_quality-bg_sp.jpg) top left no-repeat;
    background-size: 100%;
  }

  .quality .outline_visual::before {
    bottom: 100%;
    right: 0;
    width: 100%;
    height: 0;
    margin-right: 0;
    padding-top: 137.6%;
    background: url(../../images/front/p_quality-triangle-gray_sp.png) bottom right no-repeat;
    background-size: 100%;
  }

  .quality .outline_visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 49.06666%;
    background: url(../../images/front/p_quality-triangle-large-green_sp.png) top right no-repeat;
    background-size: 100%;
  }

  .quality.outline .box {
    padding-right: 0;
  }
}

/* recruit */
.recruit .outline_visual {
  background: url(../../images/front/p_recruit-bg.jpg) top left no-repeat;
  background-size: cover;
}

.recruit .outline_visual::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 947px;
  height: 431px;
  margin: auto;
  background: url(../../images/front/p_recruit-triangle.png) top center no-repeat;
  background-size: 100%;
}

.recruit.outline .container {
  justify-content: center;
  align-items: flex-start;
}

.recruit.outline .box {
  height: auto;
  padding-top: 4rem;
}

@media only screen and (max-width: 767px) {
  .recruit .outline_visual {
    padding-top: 88%;
    background: url(../../images/front/p_recruit-bg_sp.jpg) top left no-repeat;
    background-size: 100%;
  }

  .recruit .outline_visual::before {
    bottom: 198.26666%;
    width: 100%;
    padding-top: 172.26666%;
    background: url(../../images/front/p_recruit-triangle_sp.png) bottom center no-repeat;
    background-size: 100%;
  }
}

.access .container::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 34.889%;
  margin: auto;
  padding-top: 14.28662%;
  background: url(../../images/front/p_access-triangle-gray.png) top center no-repeat;
  background-size: 100%;
}

.access.outline,
.access.outline .box {
  height: auto;
}

.access.outline {
  margin-bottom: 0;
}

.access.outline .container {
  justify-content: center;
  align-items: flex-start;
}

.access .map {
  width: 100%;
  height: 450px;
}

@media only screen and (max-width: 767px) {
  .access .container::before {
    width: 100%;
    padding-top: 41.6%;
    background: url(../../images/front/p_access-triangle-gray_sp.png) bottom center no-repeat;
    background-size: contain;
  }

  .access.outline .box {
    margin: 0;
  }
}