/*=====================================================
  main
=====================================================*/
.main {
  width: 100%;
  margin: 0;
  padding: 45px 25px 0 25px;
}
@media print, screen and (min-width: 1380px) {
  .main {
    padding: 0 0 0 130px;
  }
}
.main .mainTitle {
  width: 100%;
  margin: 0 0 33.5px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle {
    margin-bottom: 34px;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
}
.main .mainTitle .mainTitle__en {
  width: 100%;
  margin: 0 0 16px 0;
  padding: 0;
  display: block;
  font-weight: var(--medium-en);
  font-size: 37.5px;
  font-size: 3.75rem;
  font-family: var(--en);
  line-height: 1;
  letter-spacing: 0.1rem;
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__en {
    width: fit-content;
    transform: translateX(-5px);
    font-size: 90px;
    font-size: 9rem;
  }
}
.main .mainTitle .mainTitle__en.red::first-letter, .main .mainTitle .mainTitle__en.ir::first-letter, .main .mainTitle .mainTitle__en.approach::first-letter {
  color: var(--base-color-red);
}
.main .mainTitle .mainTitle__en.green::first-letter {
  color: var(--base-color-green);
}
.main .mainTitle .mainTitle__en.blue::first-letter, .main .mainTitle .mainTitle__en.company::first-letter, .main .mainTitle .mainTitle__en.service::first-letter {
  color: var(--base-color);
}
.main .mainTitle .mainTitle__ja {
  width: 100%;
  margin: 0;
  padding: 0 0 0 14px;
  display: block;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: var(--ja);
  line-height: 1;
  font-weight: var(--bold);
  position: relative;
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__ja {
    margin-left: 25px;
    padding-bottom: 30px;
    font-size: 20px;
    font-size: 2rem;
  }
}
.main .mainTitle .mainTitle__ja::before {
  width: 30px;
  height: 12px;
  content: "";
  overflow: hidden;
  position: absolute;
  left: 1px;
  top: 2px;
  background-image: url("/common/kraftia/images/top/top_line_red_sp.svg");
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 10px 12px;
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__ja::before {
    height: 15px;
    top: 2px;
    left: -3px;
    background-size: 13px 16px;
  }
}
.main .mainTitle .mainTitle__ja.red::before {
  background-image: url("/common/kraftia/images/top/top_line_red_sp.svg");
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__ja.red::before {
    background-image: url("/common/kraftia/images/top/top_line_red.svg");
  }
}
.main .mainTitle .mainTitle__ja.green::before {
  background-image: url("/common/kraftia/images/top/top_line_green_sp.svg");
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__ja.green::before {
    background-image: url("/common/kraftia/images/top/top_line_green.svg");
  }
}
.main .mainTitle .mainTitle__ja.blue::before {
  background-image: url("/common/kraftia/images/top/top_line_blue_sp.svg");
}
@media print, screen and (min-width: 1380px) {
  .main .mainTitle .mainTitle__ja.blue::before {
    background-image: url("/common/kraftia/images/top/top_line_blue.svg");
  }
}
.main .mainBg {
  width: 100%;
  height: 171px;
  margin: 0;
  padding: 0;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg {
    max-width: 1500px;
    height: 400px;
    border-radius: 20px;
  }
}
.main .mainBg.companyBg {
  background-image: url(/common/kraftia/images/company/main_title_bg_sp.png);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.companyBg {
    background-image: url(/common/kraftia/images/company/main_title_bg.png);
  }
}
.main .mainBg.serviceBg {
  background-image: url(/common/kraftia/images/service/main_title_bg_sp.png);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.serviceBg {
    background-image: url(/common/kraftia/images/service/main_title_bg.png);
  }
}
.main .mainBg.irBg {
  background-image: url(/common/kraftia/images/ir/main_title_bg_sp.png);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.irBg {
    background-image: url(/common/kraftia/images/ir/main_title_bg.png);
  }
}
.main .mainBg.sustainabilityBg {
  background-image: url(/common/kraftia/images/sustainability/main_title_bg_sp.png);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.sustainabilityBg {
    background-image: url(/common/kraftia/images/sustainability/main_title_bg.png);
  }
}
.main .mainBg.approachBg {
  background-image: url(/common/kraftia/images/approach/main_title_bg_sp.png);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.approachBg {
    background-image: url(/common/kraftia/images/approach/main_title_bg.png);
  }
}
.main .mainBg.contactBg {
  background-position: right;
  background-image: url(/contact/img/img_main_contact_sp.jpg);
}
@media print, screen and (min-width: 1380px) {
  .main .mainBg.contactBg {
    background-image: url(/contact/img/img_main_contact.jpg);
  }
}