/* ── PAGE HERO ── */
.page-hero{
  padding:8rem 4rem 4rem;background:var(--dark);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpolygon points='26,0 52,45 0,45' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='.5'/%3E%3Cpolygon points='26,90 0,45 52,45' fill='none' stroke='rgba(255,255,255,.04)' stroke-width='.5'/%3E%3C/svg%3E");
  background-size:52px 90px;
}
.page-hero-inner{position:relative;z-index:1;max-width:800px;margin:0 auto;}
.page-hero-en{
  font-family:var(--ff);font-size:.7rem;font-weight:800;
  letter-spacing:.35em;color:var(--blue);text-transform:uppercase;margin-bottom:.6rem;
}
.page-hero-deco{width:40px;height:2px;background:linear-gradient(90deg,var(--blue),rgba(0,188,212,.3));margin:0 auto .8rem;}

/* ── ARTICLE META (hero内) ── */
.article-hero-meta{
  display:flex;align-items:center;gap:.8rem;
  justify-content:center;margin-bottom:1.2rem;
}
.article-hero-date{
  font-family:var(--ff);font-size:.7rem;letter-spacing:.08em;
  color:rgba(255,255,255,.4);
}
.article-hero-cat{
  font-family:var(--ff);font-size:.6rem;font-weight:700;letter-spacing:.15em;
  background:var(--blue);color:#fff;padding:.25rem .7rem;
}
.page-hero-title{
  font-family:var(--ffj);font-size:clamp(1.3rem,2.6vw,2rem);
  font-weight:700;color:#fff;line-height:1.6;
}

/* ── BREADCRUMB ── */
.breadcrumb{
  background:var(--bg2);border-bottom:1px solid var(--border);
}
.breadcrumb-inner{
  max-width:860px;margin:0 auto;padding:.7rem 4rem;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.breadcrumb-inner a,.breadcrumb-inner span{
  font-family:var(--ff);font-size:.62rem;color:rgba(26,26,26,.4);
  text-decoration:none;letter-spacing:.04em;
}
.breadcrumb-inner a:hover{color:var(--blue);}
.breadcrumb-sep{font-size:.55rem;color:rgba(26,26,26,.2);}
.breadcrumb-inner span:last-child{color:var(--ink-dark);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── ARTICLE LAYOUT ── */
.article-wrap{
  max-width:860px;margin:0 auto;
  padding:3.5rem 4rem 5rem;
}

/* ── THUMBNAIL ── */
.article-thumbnail{
  width:100%;height:auto;display:block;
  margin-bottom:2.5rem;
  aspect-ratio:16/7;object-fit:cover;
}

/* ── ARTICLE BODY (microCMS リッチエディタ出力) ── */
.article-body{
  font-family:var(--ffj);font-size:.93rem;
  color:rgba(26,26,26,.8);line-height:2;
}
.article-body p{margin-bottom:1.4em;}
.article-body h2{
  font-family:var(--ffj);font-size:1.15rem;font-weight:700;
  color:var(--ink-dark);margin:2.5em 0 .8em;
  padding-left:.9rem;border-left:3px solid var(--blue);
}
.article-body h3{
  font-family:var(--ffj);font-size:1rem;font-weight:700;
  color:var(--ink-dark);margin:2em 0 .6em;
}
.article-body img{
  width:100%;height:auto;display:block;
  margin:1.5em 0;
}
.article-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.article-body a:hover{opacity:.75;}
.article-body ul,.article-body ol{
  padding-left:1.5rem;margin-bottom:1.4em;
}
.article-body li{margin-bottom:.5em;}
.article-body strong{font-weight:700;color:var(--ink-dark);}
.article-body em{font-style:italic;}
.article-body blockquote{
  border-left:3px solid var(--blue);
  padding:.8rem 1.2rem;margin:1.5em 0;
  background:var(--bg2);
  font-style:italic;color:rgba(26,26,26,.6);
}

/* ── CTA ── */
.article-cta{
  margin-top:3rem;
  text-align:center;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;
  background:var(--accent);color:#fff;
  padding:.85rem 2rem;text-decoration:none;
  transition:background .2s,transform .15s;
}
.cta-btn:hover{background:var(--accent-hover);transform:translateY(-1px);}
.cta-btn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;}

/* ── BACK LINK ── */
.article-back{
  max-width:860px;margin:0 auto;
  padding:0 4rem 4rem;
}
.article-back a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ff);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;color:rgba(26,26,26,.35);
  text-decoration:none;transition:color .2s;
}
.article-back a::before{content:'←';font-size:.8em;}
.article-back a:hover{color:var(--blue);}

/* ── LOADING SKELETON ── */
.skel{
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s infinite;
  border-radius:2px;
}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-hero-title{height:2.5rem;width:80%;max-width:580px;margin:.8rem auto 0;}
.skel-meta{height:1rem;width:200px;margin:.5rem auto;}
.skel-img{width:100%;height:340px;margin-bottom:2.5rem;}
.skel-line{height:.9rem;width:100%;margin-bottom:.9rem;}
.skel-line.w80{width:80%;}
.skel-line.w60{width:60%;}

/* ── ERROR ── */
.article-error{
  text-align:center;padding:4rem 2rem;
}
.article-error p{
  font-family:var(--ffj);font-size:.9rem;
  color:rgba(26,26,26,.5);margin-bottom:1.5rem;
}
.back-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ff);font-size:.75rem;font-weight:600;
  color:var(--blue);text-decoration:none;letter-spacing:.04em;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .page-hero{padding:6rem 1.4rem 3rem;}
  .breadcrumb-inner{padding:.6rem 1.4rem;}
  .article-wrap{padding:2rem 1.4rem 3.5rem;}
  .article-back{padding:0 1.4rem 3rem;}
  .article-cta{padding:1.8rem 1.2rem;}
  .page-hero-title{font-size:1.1rem;}
  .skel-img{height:200px;}
}