/* column_decision_matrix_dx.css */

.dx-decision{
  margin:2rem 0 3rem;
}

.dx-decision-matrix-wrap{
  --matrix-gap:1.2rem;
  --matrix-axis-width:.16rem;
  --matrix-axis-color:#0175d8;
  --matrix-side-padding:3.8rem;
  --matrix-block-padding:3.6rem;

  position:relative;
  margin:.2rem 0;
  padding:var(--matrix-block-padding) var(--matrix-side-padding);
}

/* =========================
   Matrix Grid
========================= */

.decision-matrix{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:var(--matrix-gap);
}

.matrix-box{
  min-height:11rem;
  border-radius:.9rem;
  padding:1.2rem 1.25rem;
  border:.08rem solid #ddd;
  background:#fff;
  box-shadow:0 .15rem .5rem rgba(0,0,0,.04);
}

/* =========================
   Color Design
   左：利用系（暖色）
   右：開発系（寒色）
========================= */

/* 左上：利用 × 付加価値 */
.dx-decision-matrix-wrap .decision-matrix .matrix-box:nth-child(1){
  background:#fff8e8;
  border-color:#f0c66c;
}

/* 右上：開発 × 付加価値 */
.dx-decision-matrix-wrap .decision-matrix .matrix-box:nth-child(2){
  background:#eefbf3;
  border-color:#8dd7a7;
}

/* 左下：利用 × 効率化 */
.dx-decision-matrix-wrap .decision-matrix .matrix-box:nth-child(3){
  background:#fff1f1;
  border-color:#efb0b0;
}

/* 右下：開発 × 効率化 */
.dx-decision-matrix-wrap .decision-matrix .matrix-box:nth-child(4){
  background:#f1f6ff;
  border-color:#9ebff0;
}

/* =========================
   Typography
========================= */

.matrix-box h4{
  margin:0 0 .9rem;
  font-size:1.18rem;
  line-height:1.5;
  font-weight:700;
  color:#000;
}

.matrix-box p{
  margin:0 0 1rem;
  line-height:1.8;
  font-size:1rem;
  color:#222;
}

.matrix-box strong{
  display:inline-block;
  color:#0175d8;
  font-size:1rem;
  line-height:1.7;
}

/* =========================
   Axis
========================= */

.matrix-cross-x{
  position:absolute;
  left:50%;
  top:var(--matrix-block-padding);
  bottom:var(--matrix-block-padding);

  width:var(--matrix-axis-width);
  background:var(--matrix-axis-color);

  transform:translateX(-50%);
  z-index:1;
}

.matrix-cross-x::before{
  content:"";

  position:absolute;
  left:50%;
  top:-.05rem;

  transform:translateX(-50%);

  border-left:.5rem solid transparent;
  border-right:.5rem solid transparent;
  border-bottom:.8rem solid var(--matrix-axis-color);
}

.matrix-cross-x::after{
  content:"";

  position:absolute;
  left:50%;
  bottom:-.05rem;

  transform:translateX(-50%);

  border-left:.5rem solid transparent;
  border-right:.5rem solid transparent;
  border-top:.8rem solid var(--matrix-axis-color);
}

.matrix-cross-y{
  position:absolute;
  top:50%;
  left:var(--matrix-side-padding);
  right:var(--matrix-side-padding);

  height:var(--matrix-axis-width);
  background:var(--matrix-axis-color);

  transform:translateY(-50%);
  z-index:1;
}

.matrix-cross-y::before{
  content:"";

  position:absolute;
  left:-.8rem;
  top:50%;

  transform:translateY(-50%);

  border-top:.45rem solid transparent;
  border-bottom:.45rem solid transparent;
  border-right:.8rem solid var(--matrix-axis-color);
}

.matrix-cross-y::after{
  content:"";

  position:absolute;
  right:-.8rem;
  top:50%;

  transform:translateY(-50%);

  border-top:.45rem solid transparent;
  border-bottom:.45rem solid transparent;
  border-left:.8rem solid var(--matrix-axis-color);
}

/* =========================
   Labels
========================= */

.matrix-label{
  position:absolute;
  z-index:3;

  font-weight:700;
  color:var(--matrix-axis-color);
  background:#fff;

  line-height:1;
  white-space:nowrap;

  padding:.2rem .35rem;
}

.matrix-label-top{
  top:.35rem;
  left:50%;
  transform:translateX(-50%);
  font-size:1.05rem;
}

.matrix-label-bottom{
  bottom:.35rem;
  left:50%;
  transform:translateX(-50%);
  font-size:1.05rem;
}

.matrix-label-left{
  left:-2.2rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
}

.matrix-label-right{
  right:-2.2rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.05rem;
}

/* =========================
   Responsive
========================= */

@media (max-width:600px){

  .dx-decision-matrix-wrap{
    --matrix-gap:.7rem;
    --matrix-side-padding:2rem;
    --matrix-block-padding:2.9rem;
  }

  .matrix-box{
    min-height:9rem;
    padding:.8rem;
    border-radius:.7rem;
  }

  .matrix-box h4{
    font-size:.82rem;
    margin-bottom:.5rem;
  }

  .matrix-box p{
    font-size:.76rem;
    line-height:1.55;
    margin-bottom:.6rem;
  }

  .matrix-box strong{
    font-size:.75rem;
    line-height:1.5;
  }

  .matrix-label{
    font-size:.78rem;
    padding:.12rem .2rem;
  }

  .matrix-label-left{
    left:.05rem;
  }

  .matrix-label-right{
    right:.05rem;
  }

  .matrix-cross-x::before{
    border-left:.35rem solid transparent;
    border-right:.35rem solid transparent;
    border-bottom:.55rem solid var(--matrix-axis-color);
  }

  .matrix-cross-x::after{
    border-left:.35rem solid transparent;
    border-right:.35rem solid transparent;
    border-top:.55rem solid var(--matrix-axis-color);
  }

  .matrix-cross-y::before{
    border-top:.35rem solid transparent;
    border-bottom:.35rem solid transparent;
    border-right:.55rem solid var(--matrix-axis-color);
  }

  .matrix-cross-y::after{
    border-top:.35rem solid transparent;
    border-bottom:.35rem solid transparent;
    border-left:.55rem solid var(--matrix-axis-color);
  }
}