/* ============================================================
   Crit Lab — blog single article page
   Depends on: common.css (variables, shell, buttons, final CTA)
   Prefix: ar-
   ============================================================ */

.article-page{--ar-measure:760px;}

/* ---- breadcrumb ---- */
.ar-crumb{max-width:var(--content-max);margin:0 auto;padding:22px var(--section-x) 0;font-size:.8rem;color:#67665f;}
.ar-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.ar-crumb li{display:flex;align-items:center;gap:8px;}
.ar-crumb li+li::before{content:"/";color:#a8a49a;}
.ar-crumb a{color:#67665f;text-decoration:none;}
.ar-crumb a:hover{text-decoration:underline;text-underline-offset:3px;}
.ar-crumb [aria-current]{font-weight:700;color:var(--text);}

/* ---- article header ---- */
.ar-head{max-width:var(--content-max);margin:0 auto;padding:clamp(26px,3vw,44px) var(--section-x) 0;}
.ar-head-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.ar-cat{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--yellow);font-size:.76rem;font-weight:700;}
.ar-date{font-family:"Poppins",sans-serif;font-size:.82rem;color:#67665f;}
.ar-head h1{margin:20px 0 0;max-width:900px;font-size:clamp(26px,3.2vw,42px);font-weight:700;line-height:1.42;}
.ar-byline{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(0,5,1,.14);}
.ar-byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--yellow);}
.ar-byline .n{font-size:.9rem;font-weight:700;}
.ar-byline .r{display:block;font-size:.76rem;color:#67665f;font-weight:400;margin-top:2px;}

/* ---- eyecatch ---- */
.ar-eyecatch{max-width:var(--content-max);margin:clamp(26px,3vw,40px) auto 0;padding:0 var(--section-x);}
.ar-eyecatch figure{margin:0;}
.ar-eyecatch img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#f1efe5;}
.ar-eyecatch figcaption{margin-top:12px;font-size:.8rem;color:#67665f;line-height:1.7;}

/* ---- body wrapper ---- */
.ar-body{max-width:var(--content-max);margin:0 auto;padding:clamp(36px,4.5vw,68px) var(--section-x) clamp(40px,5vw,80px);}
.ar-body>*{max-width:var(--ar-measure);}
.ar-body p{font-size:1.02rem;line-height:2.05;margin-bottom:1.5em;color:#26261f;}
.ar-body p:last-child{margin-bottom:0;}
.ar-lead p{font-size:1.06rem;}
.ar-quote-run p{margin-bottom:.7em;padding-left:18px;border-left:3px solid var(--yellow);font-weight:500;color:var(--text);}

/* headings */
.ar-body h2{
  margin:clamp(52px,5.5vw,78px) 0 26px;
  padding-bottom:16px;
  font-size:clamp(22px,2.3vw,30px);
  font-weight:700;line-height:1.5;
  border-bottom:2px solid rgba(0,5,1,.14);
  position:relative;
}
.ar-body h2::after{content:"";position:absolute;left:0;bottom:-2px;width:84px;height:2px;background:var(--yellow);}
.ar-body h3{
  margin:clamp(34px,3.6vw,48px) 0 18px;
  padding-left:16px;
  font-size:clamp(18px,1.8vw,22px);
  font-weight:700;line-height:1.6;
  border-left:5px solid var(--yellow);
}
.ar-body h2:first-child{margin-top:0;}

/* ---- highlight / callout box ---- */
.ar-box{max-width:var(--ar-measure);margin:0 0 1.8em;padding:26px 30px;background:#fff;border:1px solid #deddd5;border-radius:16px;}
.ar-box.is-yellow{background:#fffdf0;border-color:#efe0a8;}
.ar-box>h4{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:1.02rem;font-weight:700;}
.ar-box>h4::before{content:"";flex:0 0 auto;width:8px;height:22px;border-radius:2px;background:var(--yellow);}
.ar-box ul{display:flex;flex-direction:column;gap:12px;}
.ar-box li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:.97rem;line-height:1.85;}
.ar-box li::before{
  content:"";width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000501' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 6.9'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ar-box ol{counter-reset:arb;display:flex;flex-direction:column;gap:12px;}
.ar-box ol li::before{
  counter-increment:arb;content:counter(arb);background:var(--text);color:var(--yellow);
  display:grid;place-items:center;font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;
}
.ar-box li b{display:block;font-size:1rem;}
.ar-box li .txt{grid-column:2;}
.ar-box li .sub{display:block;margin-top:4px;font-size:.9rem;color:#55554e;}

/* plain in-flow list (よくある悩み etc. with many items) */
.ar-list{max-width:var(--ar-measure);margin:0 0 1.8em;display:grid;gap:2px;}
.ar-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(0,5,1,.12);font-size:.97rem;line-height:1.85;}
.ar-list li::before{content:"";width:7px;height:7px;margin-top:11px;border-radius:50%;background:var(--yellow);}

/* ---- table of contents ---- */
.ar-toc{max-width:var(--ar-measure);margin:clamp(30px,3.4vw,44px) 0;background:#fbf8ea;border:1px solid #e8e2c8;border-radius:16px;overflow:hidden;}
.ar-toc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;padding:14px 26px;cursor:pointer;list-style:none;}
.ar-toc summary::-webkit-details-marker{display:none;}
.ar-toc summary .ttl{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;}
.ar-toc summary .ttl .en{font-family:"Poppins",sans-serif;font-size:.72rem;letter-spacing:.16em;color:var(--blue-text);font-weight:600;}
.ar-toc-plus{flex:0 0 auto;position:relative;width:32px;height:32px;border-radius:50%;background:var(--yellow);transition:transform .22s ease;}
.ar-toc-plus span{position:absolute;background:var(--text);}
.ar-toc-plus span:nth-child(1){left:10px;top:15.4px;width:12px;height:1.6px;}
.ar-toc-plus span:nth-child(2){left:15.2px;top:10px;width:1.6px;height:12px;}
.ar-toc[open] .ar-toc-plus{transform:rotate(45deg);}
.ar-toc ol{counter-reset:toc;padding:0 26px 24px;list-style:none;}
.ar-toc li{counter-increment:toc;border-top:1px dashed rgba(0,5,1,.2);list-style:none;}
.ar-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 0;font-size:.95rem;line-height:1.7;color:var(--text);text-decoration:none;font-weight:500;}
.ar-toc a::before{content:counter(toc,decimal-leading-zero);font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;color:var(--blue-text);}
.ar-toc a:hover{text-decoration:underline;text-underline-offset:4px;}

/* ---- info table ---- */
.ar-table{max-width:var(--ar-measure);margin:0 0 1.8em;border:1px solid #deddd5;border-radius:14px;overflow:hidden;background:#fff;}
.ar-table table{width:100%;border-collapse:collapse;}
.ar-table th,.ar-table td{padding:16px 22px;text-align:left;font-size:.95rem;line-height:1.85;border-bottom:1px solid rgba(0,5,1,.12);vertical-align:top;}
.ar-table tr:last-child th,.ar-table tr:last-child td{border-bottom:0;}
.ar-table th{width:150px;background:#fbf8ea;font-weight:700;white-space:nowrap;}

/* ---- scene groups ---- */
.ar-scenes{max-width:var(--ar-measure);display:grid;gap:14px;margin-bottom:1.8em;}
.ar-scene{padding:24px 28px;background:#fff;border:1px solid #deddd5;border-radius:14px;}
.ar-scene h4{margin-bottom:14px;font-size:1rem;font-weight:700;}
.ar-scene ul{display:grid;gap:10px;}
.ar-scene li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start;font-size:.94rem;line-height:1.8;}
.ar-scene li::before{content:"";width:6px;height:6px;margin-top:10px;border-radius:50%;background:var(--blue);}

/* ---- FAQ accordion ---- */
.ar-faq{max-width:var(--ar-measure);}
.ar-faq details{border-top:1px solid rgba(0,5,1,.16);}
.ar-faq details:last-of-type{border-bottom:1px solid rgba(0,5,1,.16);}
.ar-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;}
.ar-faq summary::-webkit-details-marker{display:none;}
.ar-faq-q{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;}
.ar-faq-q .q{font-family:"Poppins",sans-serif;font-weight:600;font-size:.92rem;color:var(--blue-text);}
.ar-faq-q .t{font-size:1rem;font-weight:700;line-height:1.65;}
.ar-faq-plus{flex:0 0 auto;position:relative;width:32px;height:32px;border-radius:50%;background:var(--yellow);transition:transform .22s ease;}
.ar-faq-plus span{position:absolute;background:var(--text);}
.ar-faq-plus span:nth-child(1){left:10px;top:15.4px;width:12px;height:1.6px;}
.ar-faq-plus span:nth-child(2){left:15.2px;top:10px;width:1.6px;height:12px;}
.ar-faq details[open] .ar-faq-plus{transform:rotate(45deg);}
.ar-faq-a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:0 44px 24px 0;}
.ar-faq-a .a{font-family:"Poppins",sans-serif;font-weight:600;font-size:.92rem;color:#8a8578;}
.ar-faq-a p{font-size:.97rem;line-height:1.95;margin-bottom:.9em;}
.ar-faq-a p:last-child{margin-bottom:0;}

/* ---- in-article service links ---- */
.ar-links{max-width:var(--ar-measure);margin:clamp(38px,4vw,56px) 0 0;padding:28px 30px;background:var(--yellow);border-radius:16px;}
.ar-links h4{margin-bottom:6px;font-size:1.05rem;font-weight:700;}
.ar-links p{font-size:.9rem;line-height:1.85;margin-bottom:18px;}
.ar-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ar-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 18px;background:var(--white);border-radius:10px;text-decoration:none;color:var(--text);font-size:.93rem;font-weight:700;line-height:1.5;}
.ar-links a:hover{background:#fffdf3;}
.ar-links a .arrow{flex:0 0 auto;font-size:.6rem;color:var(--blue-text);}

/* ---- author box ---- */
.ar-author{max-width:var(--ar-measure);margin:clamp(40px,4.4vw,64px) 0 0;padding:30px 32px;background:#fff;border:1px solid #deddd5;border-radius:16px;}
.ar-author-head{display:flex;align-items:center;gap:16px;}
.ar-author-head img{width:66px;height:66px;border-radius:50%;object-fit:cover;background:var(--yellow);}
.ar-author-head .lbl{font-family:"Poppins",sans-serif;font-size:.68rem;letter-spacing:.16em;color:#8a8578;font-weight:600;}
.ar-author-head .n{margin-top:4px;font-size:1.1rem;font-weight:700;}
.ar-author-head p.n{margin-bottom:0;}
.ar-author p{margin:18px 0 0;font-size:.92rem;line-height:1.95;color:#4a4a43;}
.ar-author .more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.88rem;font-weight:700;}
.ar-more-arrow{font-size:.6rem;}

/* ---- prev / next ---- */
.ar-nav{max-width:var(--content-max);margin:0 auto;padding:0 var(--section-x) clamp(44px,5vw,72px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ar-nav a{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--white);border:1px solid #deddd5;border-radius:14px;text-decoration:none;color:var(--text);}
.ar-nav a:hover{background:#fffdf3;}
.ar-nav .dir{font-family:"Poppins",sans-serif;font-size:.72rem;letter-spacing:.14em;color:var(--blue-text);font-weight:600;}
.ar-nav .t{font-size:.95rem;font-weight:700;line-height:1.65;}
.ar-nav .is-next{text-align:right;align-items:flex-end;}

/* ---- provisional note ---- */
.ar-note{max-width:var(--ar-measure);margin:clamp(34px,3.8vw,50px) 0 0;padding:20px 24px;background:#fff;border:1px solid #deddd5;border-left:5px solid var(--blue);}
.ar-note p{font-size:.9rem;line-height:1.9;margin:0;}
.ar-badge{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:var(--blue);color:#fff;font-size:.72rem;font-weight:700;vertical-align:1px;}


/* WordPress existing post-content compatibility */
.ar-body>ul,.ar-body>ol{max-width:var(--ar-measure);margin:0 0 1.8em;padding-left:1.4em;}
.ar-body>ul{list-style:disc;}.ar-body>ol{list-style:decimal;}
.ar-body>ul li,.ar-body>ol li{margin:.5em 0;line-height:1.9;}
.ar-body blockquote,.ar-body .wp-block-quote{max-width:var(--ar-measure);margin:1.8em 0;padding:18px 22px;border-left:4px solid var(--yellow);background:#fffdf0;}
.ar-body figure,.ar-body .wp-block-image{max-width:var(--ar-measure);margin:2em 0;}
.ar-body figure img,.ar-body .wp-block-image img{width:auto;max-width:100%;height:auto;border-radius:12px;}
.ar-body figcaption{margin-top:8px;color:#67665f;font-size:.82rem;line-height:1.7;}
.ar-body table{max-width:var(--ar-measure);width:100%;border-collapse:collapse;margin:1.8em 0;background:#fff;}
.ar-body table th,.ar-body table td{padding:13px 16px;border:1px solid #deddd5;text-align:left;vertical-align:top;}
.ar-body a{color:var(--blue-text);text-decoration:underline;text-underline-offset:3px;}
.ar-body img{height:auto;max-width:100%;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:860px){
  .ar-links ul{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .ar-eyecatch img{aspect-ratio:4/3;border-radius:12px;}
  .ar-body p{font-size:1rem;line-height:1.95;}
  .ar-box,.ar-scene,.ar-author,.ar-links{padding:22px 20px;}
  .ar-table th{width:auto;}
  .ar-table th,.ar-table td{padding:13px 16px;}
  .ar-toc summary{padding:12px 20px;}
  .ar-toc ol{padding:0 20px 20px;}
  .ar-nav{grid-template-columns:1fr;}
  .ar-nav .is-next{text-align:left;align-items:flex-start;}
  .ar-faq-a{padding-right:0;}
}
@media (prefers-reduced-motion:reduce){
  .ar-toc-plus,.ar-faq-plus{transition:none;}
}


/* ============================================================
   v0.4.5 WordPress legacy-content compatibility
   ============================================================ */
/* AIOSEO may append an author card after the_content; this template already has .ar-author. */
.critlab-blog-single .aioseo-author-bio-compact,
.critlab-blog-single .aioseo-author-bio{
  display:none !important;
}

/* Generated TOC: keep nested H3 items visually subordinate. */
.ar-toc li.is-sub{padding-left:22px;}
.ar-toc li.is-sub a{font-size:.9rem;color:#55554e;}
.ar-toc li.is-sub a::before{opacity:.75;}

/* Existing WordPress/AIOSEO TOC fallbacks, in case a post outputs an alternate wrapper. */
.ar-body :is(#ez-toc-container,.ez-toc-container,.lwptoc,.wp-block-aioseo-table-of-contents,[class*="aioseo-table-of-contents"],[class*="rank-math-toc"]){
  max-width:var(--ar-measure);margin:clamp(30px,3.4vw,44px) 0;padding:22px 26px;background:#fbf8ea;border:1px solid #e8e2c8;border-radius:16px;
}
.ar-body :is(#ez-toc-container,.ez-toc-container,.lwptoc,.wp-block-aioseo-table-of-contents,[class*="aioseo-table-of-contents"],[class*="rank-math-toc"]) :is(ul,ol){margin:12px 0 0;padding:0;list-style:none;}
.ar-body :is(#ez-toc-container,.ez-toc-container,.lwptoc,.wp-block-aioseo-table-of-contents,[class*="aioseo-table-of-contents"],[class*="rank-math-toc"]) li{border-top:1px dashed rgba(0,5,1,.18);list-style:none;}
.ar-body :is(#ez-toc-container,.ez-toc-container,.lwptoc,.wp-block-aioseo-table-of-contents,[class*="aioseo-table-of-contents"],[class*="rank-math-toc"]) a{display:block;padding:11px 0;color:var(--text);text-decoration:none;font-weight:500;}

/* WordPress tables: same card treatment whether raw table or Gutenberg wp-block-table. */
.ar-body figure.wp-block-table{
  max-width:var(--ar-measure);margin:1.9em 0;border:1px solid #deddd5;border-radius:14px;overflow-x:auto;background:#fff;
  -webkit-overflow-scrolling:touch;
}
.ar-body figure.wp-block-table table{margin:0;border:0;border-collapse:separate;border-spacing:0;min-width:560px;}
.ar-body table:not(.has-background){border-collapse:separate;border-spacing:0;border:1px solid #deddd5;border-radius:14px;overflow:hidden;}
.ar-body table th,.ar-body table td{padding:15px 18px;border:0;border-right:1px solid #deddd5;border-bottom:1px solid #deddd5;line-height:1.75;}
.ar-body table tr>*:last-child{border-right:0;}
.ar-body table tr:last-child>*{border-bottom:0;}
.ar-body table thead th{background:var(--yellow);color:var(--text);font-weight:700;}
.ar-body table tbody th{background:#fbf8ea;font-weight:700;}
.ar-body table tbody tr:nth-child(even) td{background:#fffdf6;}
.ar-body .wp-block-table figcaption{padding:9px 14px;margin:0;background:#fbf8ea;border-top:1px solid #deddd5;}

@media (max-width:560px){
  .ar-toc li.is-sub{padding-left:12px;}
  .ar-body figure.wp-block-table{width:100%;}
  .ar-body table th,.ar-body table td{padding:12px 14px;font-size:.9rem;}
}