/********************************************
 * Single Post: Final CSS (Clean + Responsive)
 ********************************************/

/* ===== Base: article UI ===== */
.single-post .article-content h2{
  border-left:4px solid #3b82f6; padding-left:16px; margin:2rem 0 1rem;
}
.single-post .article-content h3{
  border-bottom:2px solid #e5e7eb; padding-bottom:8px; margin:2rem 0 1rem;
}
.single-post .strong-underline{
  text-decoration:underline; text-decoration-color:#78b6d3;
  text-decoration-thickness:7px; text-underline-offset:1px;
  font-weight:600; color:#1f2937;
}
.single-post .toc{
  background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);
  border-radius:8px; padding:1.5rem; margin:0;
}
.single-post .toc a{ color:#374151; text-decoration:none; transition:color .3s; }
.single-post .toc a:hover{ color:#3b82f6; }
.single-post .highlight-box,.single-post .info-box{
  padding:1.5rem; margin:1.5rem 0; border-radius:0 8px 8px 0;
}
.single-post .highlight-box{
  background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
  border-left:4px solid #f59e0b;
}
.single-post .info-box{
  background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);
  border-left:4px solid #3b82f6;
}
.single-post .faq-item{ border:1px solid #e5e7eb; border-radius:8px; margin-bottom:1rem; overflow:hidden; }
.single-post .faq-question{ background:#f9fafb; padding:1rem; font-weight:600; color:#1f2937; }
.single-post .faq-answer{ padding:1rem; background:#fff; }

/* ===== Meta (title under) ===== */
.post-meta-updated{ font-size:14px; }
.post-meta-updated p,
.post-meta-updated .wp-block-post-date{ font-size:inherit; line-height:1.6; }

/* ===== CTA ===== */
.single-post .cta-button{
  border-radius:32px; background:#0070c0; color:#fff; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:.25rem;
  padding:.75rem 1.5rem; font-weight:600; font-size:18px; line-height:1.2;
  width:fit-content; max-width:100%; white-space:nowrap; margin:0 auto;
  transition:transform .3s ease, box-shadow .3s ease;
}
.single-post .cta-button:visited{ color:#fff; }
.single-post .cta-button:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(59,130,246,.3); }

/* ===== Floating CTA ===== */
.floating-cta-wrap{
  position:sticky; top:16px; z-index:1000;
  display:flex; align-items:center; justify-content:flex-start;
  margin:12px 0 20px;
}
.floating-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:12px 18px; border-radius:9999px;
  background:#0070c0; color:#fff; text-decoration:none;
  font-weight:700; line-height:1;
  transform:translateZ(0);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.floating-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,102,255,.28); }
.floating-cta__icon{ font-size:18px; }

/* ===== Sidebar: WordPress Popular Posts (WPP) ===== */
.single-post .popular-section .popular-title{
  background-color:#0070c0; height:56px; color:#FFF; font-weight:bold; padding:16px 24px;
}
.single-post .popular-section .wpp-list{ padding-left:0; margin-left:0; list-style:none; }
.single-post .popular-section .wpp-item{
  display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:center;
}
.single-post .popular-section .wpp-item img{
  display:block; width:100%; max-width:120px; height:auto; border-radius:6px; object-fit:contain;
}
.single-post .popular-section .wpp-post-title{
  text-decoration:none; font-weight:600; line-height:1.4; font-size:16px;
}
.single-post .popular-actions{ text-align:center; }
.single-post .popular-button{
  display:inline-block; padding:10px 20px; border-radius:24px;
  background:#0070c0; color:#fff; text-decoration:none; font-weight:700; font-size:16px;
}
.single-post .popular-button:hover{ opacity:.9; }

/* ===== 2 Columns layout ===== */
.single-post .post-two-col{ display:flex; gap:clamp(16px,2.5vw,24px); }
@media (max-width:1023px){
  .single-post .post-two-col{ flex-direction:column !important; }
  .single-post .post-two-col > .wp-block-column{
    flex-basis:auto !important; width:100% !important; max-width:100% !important;
  }
}
@media (min-width:1024px){
  .single-post .post-two-col > .wp-block-column:first-child{ flex-basis:70% !important; }
  .single-post .post-two-col > .wp-block-column:last-child{ flex-basis:30% !important; }
}

/* ===== Responsive stability: Featured Image (止血パッチ) ===== */
/* 重要：見切れ防止／493px帯でも確実に縮む */
.single-post .wp-block-post-featured-image,
.single-post .wp-block-post-featured-image a{
  display:block; width:100%; max-width:100%;
  aspect-ratio:auto !important; height:auto !important; overflow:visible !important;
}
.single-post .wp-block-post-featured-image img{
  display:block; width:100% !important; max-width:100% !important;
  height:auto !important; object-fit:contain !important; object-position:center !important;
}

/* ===== Small devices tweaks ===== */
@media (max-width:768px){
  .floating-cta,
  .single-post .cta-button{
    box-sizing:border-box; width:100%; max-width:100%;
    padding:14px 18px; height:auto; font-size:18px;
  }
  .single-post .popular-section{ padding-left:0; padding-right:0; }
  .single-post .post-meta-updated{ font-size:13px; }
  .floating-cta-wrap{ top:12px; margin:10px 0 16px; }
}
@media (max-width:480px){
  .single-post .popular-section .wpp-item{ grid-template-columns:96px 1fr; gap:10px; }
  .single-post .popular-section .wpp-item img{ max-width:96px; }
  .single-post h1,.single-post h2,.single-post h3,
  .single-post .post-cats,.single-post .popular-section .wpp-post-title{
    overflow-wrap:anywhere; word-break:break-word;
  }
}

/* ===== Final guard: small width where theme re-injects fixed ratio ===== */
@media (max-width:600px){
  .single-post .wp-block-post-featured-image,
  .single-post .wp-block-post-featured-image a{
    aspect-ratio:auto !important; height:auto !important; overflow:visible !important;
  }
  .single-post .wp-block-post-featured-image img{ height:auto !important; }
}