/* static/css/swot_matrix.css */

.swm-panel{
  position:relative;
  margin:2rem 0;
  padding:2.5rem;
  background:linear-gradient(180deg,#f3fbf6 0%,#fbfcff 100%);
  border:.0625rem solid #d4ecdd;
  border-radius:1.5rem;
  box-shadow:0 .75rem 2.5rem rgba(0,0,0,.08);
}

.swm-lead-box{
  text-align:center;
  margin:0 0 1.5rem;
}

.swm-lead-box__label{
  display:inline-block;
  width:fit-content;
  margin:0 auto .85rem;
  padding:.6rem 2rem;
  border-radius:999rem;
  background:#1c9c5f;
  color:#fff;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 0 0 0 rgba(28,156,95,.45);
  animation:swm-badge-pulse 2.2s ease-out infinite;
}

@keyframes swm-badge-pulse{
  0%{ box-shadow:0 0 0 0 rgba(28,156,95,.45); }
  70%{ box-shadow:0 0 0 .55rem rgba(28,156,95,0); }
  100%{ box-shadow:0 0 0 0 rgba(28,156,95,0); }
}

.swm-lead-box p{
  margin:0;
  color:#1f2937;
  font-size:.95rem;
  line-height:1.8;
}

.swm-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-bottom:1.75rem;
}

.swm-tab{
  padding:.55rem 1.1rem;
  background:#fff;
  border:.0625rem solid #cfe6d8;
  border-radius:999rem;
  color:#1f2937;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}

.swm-tab:hover{
  border-color:#1c9c5f;
}

.swm-tab.is-active{
  background:#1c9c5f;
  border-color:#1c9c5f;
  color:#fff;
}

/* ===== マトリクス本体 ===== */
.swot-matrix-wrap{
  --swm-gap:1.2rem;
  --swm-axis-width:.16rem;
  --swm-axis-color:#9ca3af;
  --swm-side-padding:3.6rem;
  --swm-block-padding:3.4rem;

  position:relative;
  padding:var(--swm-block-padding) var(--swm-side-padding);
}

.swot-matrix{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--swm-gap);
}

.swot-matrix-box{
  padding:1.2rem 1.35rem;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 .375rem 1.125rem rgba(30,41,59,.06);
}

.swot-matrix-box h4{
  margin:0 0 .5rem;
  font-size:1rem;
  font-weight:700;
}

.swot-matrix-box .swot-matrix-list{
  margin:0;
  padding:0;
  list-style:none;
}

.swot-matrix-list li{
  position:relative;
  margin:0 0 .55rem;
  padding-left:1.1rem;
  color:#374151;
  font-size:.88rem;
  line-height:1.7;
}

.swot-matrix-list li:last-child{
  margin-bottom:0;
}

.swot-matrix-list li::before{
  content:"・";
  position:absolute;
  left:0;
  top:0;
}

.swot-matrix-box--s{ border:.14rem solid #1c9c5f; }
.swot-matrix-box--s h4{ color:#1c9c5f; }

.swot-matrix-box--o{ border:.14rem solid #0175d8; }
.swot-matrix-box--o h4{ color:#0175d8; }

.swot-matrix-box--w{ border:.14rem solid #d97706; }
.swot-matrix-box--w h4{ color:#d97706; }

.swot-matrix-box--t{ border:.14rem solid #dc2626; }
.swot-matrix-box--t h4{ color:#dc2626; }

.swot-matrix-cross-x{
  position:absolute;
  top:var(--swm-block-padding);
  bottom:var(--swm-block-padding);
  left:50%;
  width:var(--swm-axis-width);
  background:var(--swm-axis-color);
  transform:translateX(-50%);
}

.swot-matrix-cross-x::before,
.swot-matrix-cross-x::after{
  content:"";
  position:absolute;
  left:50%;
  width:0;
  height:0;
  border-left:.5rem solid transparent;
  border-right:.5rem solid transparent;
  transform:translateX(-50%);
}

.swot-matrix-cross-x::before{
  top:-.7rem;
  border-bottom:.7rem solid var(--swm-axis-color);
}

.swot-matrix-cross-x::after{
  bottom:-.7rem;
  border-top:.7rem solid var(--swm-axis-color);
}

.swot-matrix-cross-y{
  position:absolute;
  left:var(--swm-side-padding);
  right:var(--swm-side-padding);
  top:50%;
  height:var(--swm-axis-width);
  background:var(--swm-axis-color);
  transform:translateY(-50%);
}

.swot-matrix-cross-y::before,
.swot-matrix-cross-y::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  border-top:.5rem solid transparent;
  border-bottom:.5rem solid transparent;
  transform:translateY(-50%);
}

.swot-matrix-cross-y::before{
  right:100%;
  margin-right:-.02rem;
  border-right:.7rem solid var(--swm-axis-color);
}

.swot-matrix-cross-y::after{
  left:100%;
  margin-left:-.02rem;
  border-left:.7rem solid var(--swm-axis-color);
}

.swot-matrix-label{
  position:absolute;
  z-index:2;
  color:var(--swm-axis-color);
  font-size:.85rem;
  font-weight:700;
  white-space:nowrap;
}

.swot-matrix-label-top{
  top:1rem;
  left:50%;
  transform:translateX(-50%);
}

.swot-matrix-label-bottom{
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
}

.swot-matrix-label-left{
  left:.5rem;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
}

.swot-matrix-label-right{
  right:.5rem;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
}

.swm-note{
  margin:1.5rem 0 0;
  color:#6b7280;
  font-size:.82rem;
  line-height:1.8;
}

@media (max-width:48rem){

  .swm-panel{
    padding:1.25rem;
  }

  .swot-matrix-wrap{
    --swm-gap:.9rem;
    --swm-side-padding:0rem;
    --swm-block-padding:0rem;
  }

  /* スマホでは2×2の田の字が成立しないため、軸線と矢印・上下左右ラベルは非表示にする */
  .swot-matrix-cross-x,
  .swot-matrix-cross-y,
  .swot-matrix-label{
    display:none;
  }

  .swot-matrix{
    grid-template-columns:1fr;
  }

  .swot-matrix-box h4{
    font-size:.92rem;
  }

  .swot-matrix-list li{
    font-size:.85rem;
  }

}