@charset "UTF-8";
/* =====================================================================
   DX Solution（/business/dx）SP用
   content_sp.css の末尾に追記するか、content_sp.css と同じ条件で読み込む：
   <link rel="stylesheet" media="screen and (max-width: 820px)" href=".../assets/css/dx_sp.css">
   値・書き方は wp_wrap / wp_box01〜04 の SP 指定に揃えています。
   ===================================================================== */

/* ---------- メイン ---------- */
.dx_wrap {
  background-image: url(../../img/dx_main_text.png);
  background-size: auto 110px;
  background-position: left -10px top 80px;
}

.dx_wrap .img_box {
  background-image: url(../../img/dx_main.jpg);
  background-position: right 30% center;
}

/* ---------- 02 Services ---------- */
.dx_box02 {
  background-image: url(../../img/dx_box02_text.png);
  background-size: auto 90px;
  background-repeat: no-repeat;
  background-position: left -10px top 10px;
  padding-bottom: 45px;
}

.dx_box02 .hr_box_top_title {
  padding: 60px 0 20px;
}

.dx_box02 .hr_box_top_title .sub_title_l {
  font-size: 2rem;
  line-height: 160%;
}

.dx_box02 ul.list_down > li {
  border: 2px solid #F0F0F0;
}

.dx_box02 ul.list_down > li:before,
.dx_box02 ul.list_down > li.first:after {
  display: none;
}

/* ---------- 03 Our Policy ---------- */
.dx_box03 {
  background-image: url(../../img/dx_box03_text.png);
  background-size: auto 90px;
  background-repeat: no-repeat;
  background-position: left -10px top 0px;
  background-color: #FAFAFA;
  padding-bottom: 40px;
}

.dx_box03 .hr_box_top_title {
  padding: 60px 0 25px;
}

.dx_box03 .hr_box_top_title .sub_title_l {
  font-size: 2rem;
  line-height: 160%;
}

.dx_box03 .box {
  width: 100%;
  background-color: #fff;
  border: 2px solid #F0F0F0;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.dx_box03 .box .left {
  position: relative;
  background-color: #FAFAFA;
  border-bottom: 2px solid #F0F0F0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.dx_box03 .box .left .label {
  padding: 28px 0;
  font-family: neue-haas-grotesk-text, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 100%;
  color: #8BC40E;
}

.dx_box03 .box .left .label span {
  display: block;
  color: #333;
  font-size: 1.2rem;
  letter-spacing: 1px;
  padding-top: 10px;
}

.dx_box03 .box .right {
  padding: 20px 20px 20px;
  box-sizing: border-box;
}

.dx_box03 .box .right .text1 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 140%;
  margin-bottom: 10px;
}

.dx_box03 .box .right ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.dx_box03 .box .right ul li {
  position: relative;
  color: #8BC40E;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 1px;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.dx_box03 .box .right ul li:after {
  position: absolute;
  display: block;
  content: "";
  width: 1px;
  height: 12px;
  background-color: #E0E0E0;
  right: 0;
  top: 2px;
}

.dx_box03 .box .right ul li:last-child:after {
  display: none;
}

.dx_box03 .note {
  color: #777;
  font-size: 1.3rem;
  line-height: 180%;
}

/* ---------- 04 Workflow ---------- */
.dx_box04 {
  background-image: url(../../img/webproduction_box03_text.png);
  background-size: 130%;
  background-repeat: no-repeat;
  background-position: left 0px top 0px;
  padding-bottom: 45px;
}

.dx_box04 .hr_box_top_title {
  padding: 60px 0 20px;
}

.dx_box04 .hr_box_top_title .sub_title_l {
  font-size: 2rem;
  line-height: 160%;
}

.dx_box04 ul.list_down > li {
  border: 2px solid #F0F0F0;
}