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

/* ---------- メイン（wp_wrap と同じ） ---------- */
.dx_wrap {
  background-image: url(../../img/dx_main_text.png);
  background-size: auto 300px;
  background-position: left -40px top 120px;
}

.dx_wrap .img_box {
  position: relative;
  background-image: url(../../img/dx_main.jpg);
}

/* ---------- 01 リード（wp_box01 と同じ） ---------- */
.dx_box01 {
  padding-bottom: 90px;
}

.dx_box01 .content_wrap .tex_box {
  padding-bottom: 135px;
}

/* ---------- 02 Services（wp_box03 の list_down を流用。白背景・矢印なし） ---------- */
.dx_box02 {
  background-image: url(../../img/dx_box02_text.png);
  background-size: auto 240px;
  background-repeat: no-repeat;
  background-position: left -10px top 50px;
  padding-bottom: 115px;
}

.dx_box02 .hr_box_top_title {
  padding: 150px 0 5px;
}

.dx_box02 .sub_title_l {
  margin-bottom: 30px;
}

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

/* サービスは順番ではないので、ステップの矢印は出さない */
.dx_box02 ul.list_down > li:before {
  display: none;
}

/* ---------- 03 Our Policy（wp_box04 の .box を流用。グレー背景） ---------- */
.dx_box03 {
  background-image: url(../../img/dx_box03_text.png);
  background-size: auto 240px;
  background-repeat: no-repeat;
  background-position: left -10px top 60px;
  background-color: #FAFAFA;
  padding-bottom: 110px;
}

.dx_box03 .hr_box_top_title {
  padding: 140px 0 45px;
}

.dx_box03 .hr_box_top_title .sub_title_l {
  margin-bottom: 30px;
}

.dx_box03 .box {
  width: 100%;
  background-color: #fff;
  border: 2px solid #F0F0F0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-bottom: 38px;
}

.dx_box03 .box .left {
  position: relative;
  flex-shrink: 0;
  background-color: #FAFAFA;
  border-right: 2px solid #F0F0F0;
  box-sizing: border-box;
  width: 204px;
  text-align: center;
}

.dx_box03 .box .left .label {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  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.6rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 100%;
  color: #8BC40E;
}

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

.dx_box03 .box .right {
  padding: 40px 50px 30px;
  box-sizing: border-box;
}

.dx_box03 .box .right .text1 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.dx_box03 .box .right ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 15px 0 15px;
}

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

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

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

.dx_box03 .note {
  color: #777;
  font-size: 1.3rem;
  padding-top: 2px;
}

/* ---------- 04 Workflow（wp_box03 と同じ。白背景） ---------- */
.dx_box04 {
  background-image: url(../../img/webproduction_box03_text.png);
  background-size: auto 240px;
  background-repeat: no-repeat;
  background-position: left 0px top 50px;
  padding-bottom: 115px;
}

.dx_box04 .hr_box_top_title {
  padding: 150px 0 5px;
}

.dx_box04 .sub_title_l {
  margin-bottom: 30px;
}

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