main {
  font-family: "M PLUS 2", sans-serif;
}
.intro {
  background: url("./images/intro-bg.png") 0 0 no-repeat, #ebf890;
  background-size: 100% 100%;
  @media screen and (max-width: 768px) {
    background: url("./images/intro-bg-sp.png") 0 0 no-repeat, #ebf890;
    background-size: 100% 100%;
  }
}
.about-area,
.plus-area {
  background: url("./images/about-bg.png") 0 0 repeat-y, #ebf890;
  background-size: contain;
  @media screen and (max-width: 768px) {
    background: url("./images/about-bg-sp.png") 0 0 repeat-y, #ebf890;
    background-size: contain;
  }
}
.intro-inner {
  background: url("./images/intro-frame.png") 0 0 no-repeat;
  background-size: 100% 100%;
  @media screen and (max-width: 768px) {
    background: url("./images/intro-frame-sp.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
}
.outlined-text {
  color: #722e00;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; /* 黒い縁取り */
}
.intro-text {
  font-family: "M PLUS 2", sans-serif;
  z-index: 3;
}
.highlight-text {
  z-index: 2;
  position: relative;
  letter-spacing: 0.06em;
}
.highlight-text::after {
  content: "";
  position: absolute;
  width: 102%;
  height: 16px;
  background-color: #ffcf07;
  z-index: -1;
  left: -5px;
  bottom: -4px;
}
.award-area-block {
  background: url("./images/award-frame.png") 0 0 no-repeat;
  background-size: 100% 100%;
  @media screen and (max-width: 768px) {
    background: url("./images/award-frame-sp.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
}
.award-brand {
  background: url("./images/award-brand-bg.png") 0 0 no-repeat;
  background-size: 100% 100%;
}
.about-inner {
  font-family: "M PLUS 2", sans-serif;
}
.about-subtitle,
.service-area-subtitle,
.qa-subtitle {
  z-index: 2;
  position: relative;
  letter-spacing: 0.06em;
}

.about-subtitle:after,
.service-area-subtitle:after,
.qa-subtitle:after {
  content: "";
  position: absolute;
  width: 110%;
  height: 16px;
  background-color: #ffdd00;
  z-index: -1;
  left: -5%;
  bottom: -2px;
}