/* article.css */

/* =========================
   Base
========================= */
html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  font-family:'M PLUS 1p', sans-serif;
  overflow-x:hidden;
}

/* 個別コラム記事のみ、モバイルのナビ直下の余白を他ページより詰める */
@media (max-width: 48rem) {
  #gnav:not(:has(.gnav-logo)) + script + .container {
    margin-top: 3.25rem;
  }
}

html{
  scroll-behavior:smooth;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================
   Layout
========================= */
.container{
  font-size:1.2rem;
  max-width:70%;
  margin:auto;
  background:#fff;
  border-radius:.5rem;
  position:relative;
  padding-bottom:3.5rem;
}

.container > h1{
  text-align:center;
  margin:2rem 0 4rem;
  font-size:1.6rem;
}

/* =========================
   Headings
========================= */
.container h2{
  display:inline;
  font-size:1.5rem;
  font-weight:700;
  color:#0175d8;
  background:linear-gradient(transparent 60%, yellow 0);
  line-height:1.6;
  letter-spacing:.08em;
  padding:.1em .2em;
  margin:1.6rem 0 .8rem;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.container h3{
  display:inline;
  font-size:1.3rem;
  font-weight:700;
  color:#333;
  background:linear-gradient(transparent 85%, #0174d89d 0);
  line-height:1.6;
  letter-spacing:.05em;
  padding:.1em .2em;
  margin:1.4rem 0 .6rem;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* =========================
   Body
========================= */
p{
  text-align:left;
  line-height:1.8;
  margin:.8rem 0;
}

.highlight-marker{
  display:inline-block;
  font-size:1.2rem;
  color:#0175d8;
  background:linear-gradient(to bottom, transparent 65%, yellow 50%);
  line-height:1.5;
  font-weight:700;
  padding:0 .15em;
}

/* =========================
   Article Links
========================= */
.article-inline-link{
  color:#0f5cc0;
  text-decoration:none;
  font-weight:700;
  background:linear-gradient(transparent 62%, #e8f1ff 0);
  padding:0 .08em;
  border-radius:.12rem;
  transition:color .2s ease, background .2s ease, text-decoration-color .2s ease;
  word-break:keep-all;
}

.article-inline-link:hover{
  color:#0a438c;
  background:linear-gradient(transparent 62%, #d8e8ff 0);
  text-decoration:underline;
  text-underline-offset:.12em;
}

.article-inline-link:visited{
  color:#5d4aa8;
}

/* =========================
   Article Inline Box
========================= */
.article-inline-box{
  margin:1rem 0;
  padding:.6rem .8rem;
  border:1px solid #e5eef9;
  border-radius:.5rem;
  background:#f8fbff;
}

.article-inline-box__label{
  display:inline-block;
  margin-bottom:.45rem;
  font-size:.78rem;
  font-weight:700;
  color:#0175d8;
  letter-spacing:.03em;
}

.article-inline-box p{
  margin:0;
}

.article-inline-box__link{
  color:#0f5cc0;
  font-weight:700;
  text-decoration:none;
}

.article-inline-box__link:hover{
  text-decoration:underline;
  text-underline-offset:.12em;
}

.article-inline-box--dashed{
  border:.12rem dashed #ccc;
  background:#fafafa;
  padding:.5rem 1.2rem;
}

/* =========================
   Article Tool Box
========================= */
.article-tool-box{
  margin:1.2rem 0;
  padding:.75rem .9rem;
  border:.14rem dashed #0175d8;
  border-radius:.6rem;
  background:#f8fbff;
}

.article-tool-box__label{
  display:inline-block;
  margin-bottom:.45rem;
  font-size:.78rem;
  font-weight:700;
  color:#0175d8;
  letter-spacing:.03em;
}

.article-tool-box p{
  margin:0;
}

.article-tool-box a{
  color:#0f5cc0;
  font-weight:700;
  text-decoration:none;
}

.article-tool-box a:hover{
  text-decoration:underline;
  text-underline-offset:.12em;
}

/* =========================
   Slider
========================= */
.image-slider,
.slider{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:1rem;
  width:100%;
  max-width:100%;
  min-width:0;
  padding-bottom:.5rem;
  -webkit-overflow-scrolling:touch;
}

.image-slider .slide,
.slider .slide{
  flex:0 0 100%;
  scroll-snap-align:start;
}

.slider .slide{
  width:auto;
}

.image-slider .slide img,
.slider img{
  width:100%;
  height:auto;
  display:block;
  border:none;
  border-radius:0;
}

.image-slider .slide img{
  background:none;
}

.image-slider .slide img + img{
  margin-top:1rem;
}

.slide p{
  color:blue;
  text-align:center;
}

.yaji-text{
  color:#898989;
  text-align:center;
  margin-bottom:.2rem;
  font-weight:700;
}

/* =========================
   Anchor
========================= */
.anchor-offset{
  position:relative;
  top:-5rem;
  height:0;
}

/* =========================
   User Info
========================= */
#user-info{
  position:absolute;
  bottom:-1.6rem;
  left:4rem;
  background:rgba(212,212,212,.8);
  padding:.3rem .6rem;
  border-radius:.2rem;
}

#user-info a{
  font-size:.9rem;
  color:#818181;
  text-decoration:none;
}

/* =========================
   Simple Table
========================= */
table.simple{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0;
  font-size:1rem;
}

table.simple th,
table.simple td{
  border:1px solid #999;
  padding:.4rem .6rem;
  text-align:left;
}

table.simple thead{
  background:#e8e8e8;
  font-weight:700;
}

/* =========================
   Article Table
========================= */
.article-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:1.2rem 0;
  -webkit-overflow-scrolling:touch;
}

.article-table{
  width:100%;
  min-width:40rem;
  border-collapse:collapse;
  font-size:1rem;
  background:#fff;
}

.article-table th,
.article-table td{
  border:.0625rem solid #cfcfcf;
  padding:.75rem .9rem;
  text-align:left;
  vertical-align:middle;
  line-height:1.6;
}

.article-table thead th{
  background:#f2f2f2;
  font-weight:700;
}

.article-table tbody th{
  background:#fafafa;
  font-weight:700;
  white-space:nowrap;
}

.article-table tr:nth-child(even) td{
  background:#fcfcfc;
}

.article-table caption{
  caption-side:top;
  text-align:left;
  font-weight:700;
  margin-bottom:.5rem;
  color:#333;
}

/* =========================
   Article List
========================= */
.container ul,
.container ol{
  margin:1rem 0 1rem 1.5rem;
  padding-left:1.2rem;
  line-height:1.9;
}

.container ul{
  list-style:disc;
}

.container ol{
  list-style:decimal;
}

.container li{
  margin:.45rem 0;
}

.container li::marker{
  color:#0175d8;
  font-weight:700;
}

/* =========================
   Buttons
========================= */
.btn{
  background:#9e9e9e;
  color:#fff;
  border:0;
  padding:.3rem .3rem;
  text-decoration:none;
  cursor:pointer;
  border-radius:.25rem;
  font-size:.9rem;
  display:inline-block;
  width:fit-content;
  max-width:100%;
  white-space:nowrap;
}

.btn:hover{
  background:#5e5e5e;
}

.column-back{
  text-align:right;
  margin-top:1rem;
}

.column-back .btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:#fff;
  color:#013a84;
  border:.0625rem solid #cfd8e3;
  border-radius:62.5rem;
  padding:.55rem 1.15rem .55rem .95rem;
  box-shadow:0 .0625rem .1875rem rgba(1,58,132,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.column-back .btn::before{
  content:"←";
  transition:transform .2s ease;
}

.column-back .btn:hover{
  background:linear-gradient(90deg,#1d7cff,#00a86b);
  color:#fff;
  border-color:transparent;
  box-shadow:0 .25rem .75rem rgba(1,58,132,.25);
  transform:translateY(-.0625rem);
}

.column-back .btn:hover::before{
  transform:translateX(-.25rem);
}

.column-back-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  transform:scale(0);
  animation:column-back-ripple .5s ease-out;
  pointer-events:none;
}

@keyframes column-back-ripple{
  to{ transform:scale(2.2); opacity:0; }
}

/* =========================
   Breadcrumbs
========================= */
.breadcrumbs{
  margin:1rem 0 1.25rem;
  font-size:.875rem;
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem;
  list-style:none;
  padding:0;
  margin:0;
}

.breadcrumbs li{
  display:flex;
  align-items:center;
}

.breadcrumbs li:not(:last-child)::after{
  content:">";
  margin-left:.375rem;
  color:#666;
}

.breadcrumbs a{
  color:#0066cc;
  text-decoration:none;
}

.breadcrumbs a:hover{
  text-decoration:underline;
}

.breadcrumbs span[aria-current="page"]{
  color:#333;
  font-weight:600;
}

/* =========================
   Logic Flow
========================= */
.logic-flow-box{
  margin:1.5rem 0;
}

.logic-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  flex-wrap:wrap;
}

.flow-item{
  padding:.8rem 1rem;
  border-radius:.7rem;
  background:#f4f8ff;
  border:.08rem solid #cfe0ff;
  font-weight:700;
  text-align:center;
  min-width:10rem;
}

.flow-arrow{
  font-size:1.5rem;
  font-weight:700;
  color:#666;
}

.flow-danger{
  background:#fff1f1;
  border-color:#f0b1b1;
  color:#b00020;
}

/* =========================
   Before After Flow
========================= */
.before-after-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:1.1rem;
  align-items:stretch;
  margin:1.5rem 0;
}

.before-after-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.4rem;
  font-weight:700;
  color:#777;
  line-height:1;
}

.before-box,
.after-box{
  border-radius:.8rem;
  padding:1.1rem 1.3rem;
}

.before-box{
  background:#f7fbff;
  border:.08rem solid #cfe0ff;
}

.after-box{
  background:#fff5f5;
  border:.08rem solid #efc1c1;
}

.before-after-label{
  display:inline-block;
  margin-bottom:.8rem;
  font-size:1.15rem;
  font-weight:700;
  color:#0175d8;
}

.after-box .before-after-label{
  color:#d10000;
}

.before-box ul,
.after-box ul{
  margin:0;
  padding-left:1.2rem;
}

.before-box li,
.after-box li{
  margin:.5rem 0;
  line-height:1.7;
}

/* 旧 before-after 互換 */
.before-after{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:1.5rem 0;
}

/* =========================
   Decision Matrix
========================= */
.decision-matrix-wrap{
  --matrix-gap:1.2rem;
  --matrix-axis-width:.16rem;
  --matrix-axis-color:#0175d8;
  --matrix-side-padding:3.6rem;
  --matrix-block-padding:3.4rem;

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

.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{
  height:100%;
  border-radius:.8rem;
  padding:1rem;
  border:.08rem solid #ddd;
  background:#fff;
}

.matrix-box h4{
  margin:0 0 .7rem;
  font-size:1.05rem;
  line-height:1.5;
}

.matrix-box p{
  margin:0 0 .8rem;
  line-height:1.7;
  font-size:.98rem;
}

.matrix-box strong{
  display:inline-block;
  color:var(--matrix-axis-color);
  font-size:.95rem;
}

.matrix-best{
  background:#f3fbf5;
  border-color:#a8ddb5;
}

.matrix-risk{
  background:#fff3f3;
  border-color:#efb0b0;
}

.matrix-middle{
  background:#f8f8f8;
}

/* Matrix Cross */
/* Matrix Cross */
.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:.4rem solid transparent;
  border-right:.4rem solid transparent;
  border-bottom:.7rem solid var(--matrix-axis-color);
}

.matrix-cross-x::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.05rem;
  transform:translateX(-50%);
  border-left:.4rem solid transparent;
  border-right:.4rem solid transparent;
  border-top:.7rem 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:-.7rem;
  top:50%;
  transform:translateY(-50%);
  border-top:.4rem solid transparent;
  border-bottom:.4rem solid transparent;
  border-right:.7rem solid var(--matrix-axis-color);
  z-index:5;
}

.matrix-cross-y::after{
  content:"";
  position:absolute;
  right:-.7rem;
  top:50%;
  transform:translateY(-50%);
  border-top:.4rem solid transparent;
  border-bottom:.4rem solid transparent;
  border-left:.7rem solid var(--matrix-axis-color);
  z-index:5;
}

/* Matrix 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:.15rem .25rem;
}

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

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

.matrix-label-left{
  left:-1.8rem;
  top:50%;
  transform:translateY(-50%);
}

.matrix-label-right{
  right:-1.8rem;
  top:50%;
  transform:translateY(-50%);
}

/* =========================
   Risk Flow
========================= */
.risk-flow-horizontal{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:.7rem;
  margin:1.5rem 0;
}

.risk-card{
  border-radius:.8rem;
  padding:1rem .9rem;
  border:.08rem solid #ddd;
  min-height:7rem;
}

.risk-card__level{
  display:inline-block;
  font-weight:700;
  font-size:.85rem;
  padding:.25rem .65rem;
  border-radius:999px;
  margin-bottom:.65rem;
}

.risk-card p{
  margin:0;
  font-weight:700;
  line-height:1.6;
}

.risk-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
  font-weight:700;
  color:#777;
}

.risk-low{
  background:#f2fbf4;
  border-color:#98d8a5;
}

.risk-low .risk-card__level{
  background:#dff5e5;
  color:#0d7a33;
}

.risk-middle{
  background:#fff8ea;
  border-color:#f2cb73;
}

.risk-middle .risk-card__level{
  background:#ffe8b2;
  color:#9a6500;
}

.risk-high{
  background:#fff1f1;
  border-color:#efaaaa;
}

.risk-high .risk-card__level{
  background:#ffd7d7;
  color:#c40000;
}
/* =========================
   Risk Flow Vertical
========================= */

.risk-flow-vertical{
  grid-template-columns:1fr;
  gap:.8rem;
}

.risk-flow-vertical .risk-arrow{
  transform:rotate(90deg);
  justify-content:center;
}

/* =========================
   Responsive
========================= */
@media (max-width:600px){
  .container{
    max-width:95%;
    padding:1.5rem 0;
  }

  .container > h1{
    font-size:1.4rem;
  }

  .container h2{
    font-size:1.3rem;
  }

  .container h3{
    font-size:1.15rem;
  }

  p{
    font-size:1rem;
  }

  #user-info{
    left:.5rem;
    bottom:-2rem;
  }

  .article-inline-link{
    word-break:break-word;
  }

  .article-inline-box{
    padding:.9rem;
    border-radius:.55rem;
  }

  .article-table{
    min-width:35rem;
    font-size:.95rem;
  }

  .article-table th,
  .article-table td{
    padding:.6rem .7rem;
  }

  .logic-flow{
    flex-direction:column;
    align-items:stretch;
  }

  .flow-item{
    width:100%;
    min-width:0;
  }

  .flow-arrow{
    transform:rotate(90deg);
    align-self:center;
  }

  .before-after{
    grid-template-columns:1fr;
  }

  .before-after-flow{
    grid-template-columns:1fr;
    gap:.8rem;
  }

  .before-after-arrow{
    font-size:2rem;
  }

  .before-after-arrow{
    color:transparent;
    position:relative;
  }

  .before-after-arrow::before{
    content:"↓";
    color:#777;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }

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

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

  .matrix-box{
    padding:.75rem;
  }

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

  .matrix-box p{
    font-size:.78rem;
    line-height:1.55;
  }

  .matrix-box strong{
    font-size:.78rem;
  }

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

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

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

  .risk-flow-horizontal{
    grid-template-columns:1fr auto 1fr auto 1fr;
    gap:.35rem;
  }

  .risk-card{
    min-height:6.5rem;
    padding:.65rem .45rem;
    border-radius:.65rem;
  }

  .risk-card__level{
    font-size:.68rem;
    padding:.18rem .35rem;
    margin-bottom:.45rem;
  }

  .risk-card p{
    font-size:.78rem;
    line-height:1.45;
  }

  .risk-arrow{
    font-size:1.2rem;
  }

  .risk-flow-horizontal.risk-flow-vertical{
    grid-template-columns:1fr;
    gap:.55rem;
  }

  .risk-flow-vertical .risk-card{
    min-height:auto;
    padding:.85rem .8rem;
  }

  .risk-flow-vertical .risk-card p{
    font-size:.92rem;
    line-height:1.6;
  }

  .risk-flow-vertical .risk-card__level{
    font-size:.72rem;
  }

  .risk-flow-vertical .risk-arrow{
    transform:rotate(90deg);
    font-size:1.5rem;
    margin:0;
  }
}