/* Site-wide chrome and article styles from Figma (2026-10-31): header 157:43 / 173:148,
   footer 162:139 / 173:158, article 172:100 / 174:189. SWELL's navigation and
   mobile-menu behaviour stay intact; only the look changes.
   On the front page this file is inlined; relative url() values are rewritten there. */
body {
  --nkm-paper:#fffdf8;
  --nkm-ink:#5b4636;
  --nkm-dark:#39150c;
  --nkm-brown:#5a2415;
  --nkm-pink:#faebe6;
  --nkm-line:#ebe5db;
  --nkm-cream:#f8d7ae;
  --nkm-gray:#f5f3f0;
  --nkm-meta:#7a6248;
  --nkm-font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --nkm-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  background:var(--nkm-paper);
  color:var(--nkm-ink);
  font-family:var(--nkm-font);
}
body :where(a, button, input, textarea, select):focus-visible { outline:3px solid var(--nkm-brown); outline-offset:3px; }

/* Header */
.l-header, .l-fixHeader { background:var(--nkm-paper); border-bottom:1px solid var(--nkm-line); box-shadow:none; }
.l-header__inner, .l-fixHeader__inner { max-width:none; padding-inline:64px; }
.l-header__inner { min-height:80px; }
.c-headLogo__link { display:inline-flex; align-items:center; gap:12px; color:var(--nkm-dark); font:500 28px/1.3 var(--nkm-serif); letter-spacing:0; }
.c-headLogo__link::before { content:""; width:40px; height:40px; flex:0 0 40px; background:url(/wp-content/uploads/2026/11/nkm-logo-20261031.png) center / contain no-repeat; }
.l-header .l-header__gnav, .l-fixHeader .l-fixHeader__gnav { flex:0 0 auto; margin-left:auto; }
.l-header .c-gnav, .l-fixHeader .c-gnav { justify-content:flex-end; gap:36px; }
.c-gnav > .menu-item > a { padding-inline:0; color:var(--nkm-ink); font:700 15px/1.5 var(--nkm-font); }
.c-gnav > .menu-item > a .ttl { font-size:15px; }
.c-gnav > .menu-item > a::after { background:var(--nkm-brown); }
.c-gnav__s { display:none; }
.l-header .c-iconBtn { width:44px; height:44px; color:var(--nkm-dark); }

/* Footer */
.l-footer, .l-footer__foot { background:var(--nkm-dark); color:var(--nkm-cream); }
.l-footer__foot { padding:64px 0 48px; text-align:left; }
.l-footer__foot .l-container { display:flex; flex-direction:column; align-items:flex-start; gap:28px; max-width:none; padding-inline:120px; }
#footer.l-footer .l-footer__foot .l-container::before { content:"猫まど"; display:block !important; width:auto; height:auto; background:none; color:#fff; font:500 28px/1.3 var(--nkm-serif); }
.l-footer .l-footer__nav { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px 32px; max-width:none; margin:0; padding:0; }
.l-footer .l-footer__nav li { border:0; }
.l-footer .l-footer__nav li a { display:inline; min-height:0; min-width:0; padding:0; color:var(--nkm-cream); font:400 14px/1.7 var(--nkm-font); opacity:1; }
.l-footer .l-footer__nav li a:hover { color:#fff; text-decoration:underline; text-underline-offset:4px; }
.l-footer .copyright { margin:0; color:var(--nkm-cream); font:400 12px/1.7 var(--nkm-font); }

@media (max-width:959px) {
  .l-header__inner, .l-fixHeader__inner { min-height:60px; padding-inline:16px 12px; }
  .c-headLogo__link { gap:8px; font-size:22px; }
  .c-headLogo__link::before { width:32px; height:32px; flex-basis:32px; }
  .l-footer__foot { padding:40px 0 32px; }
  .l-footer__foot .l-container { gap:18px; padding-inline:16px; }
  #footer.l-footer .l-footer__foot .l-container::before { font-size:22px; }
  .l-footer .l-footer__nav { gap:10px 16px; }
  .l-footer .l-footer__nav li a { font-size:13px; }
}

/* Article: body 800 + sidebar 340 with a 60px gap */
.single .l-content { max-width:1200px; padding-top:40px; }
.single .l-mainContent { color:var(--nkm-ink); }
.single .p-breadcrumb, .single .p-breadcrumb__text, .single .p-breadcrumb__item { color:var(--nkm-meta); font:400 13px/1.7 var(--nkm-font); }
.single .p-articleHead { margin-bottom:28px; }
.single .c-postTitle__ttl { color:var(--nkm-dark); font:500 34px/1.5 var(--nkm-serif); letter-spacing:0; }
.single .p-articleMetas, .single .c-postTimes { color:var(--nkm-meta); font:400 13px/1.7 var(--nkm-font); }
.single .p-articleMetas .c-categoryList__link { padding:6px 14px; border:0; border-radius:999px; background:var(--nkm-pink); color:var(--nkm-brown); font:700 13px/1.7 var(--nkm-font); }
.single .p-articleThumb img, .single .post_content .wp-block-image img { border-radius:16px; }
.single .post_content { font:400 17px/2 var(--nkm-font); color:var(--nkm-ink); }
.single .post_content > * { margin-bottom:28px; }
#body_wrap.single #main_content .post_content h2 { margin:56px 0 28px; padding:14px 20px; background:var(--nkm-pink); border:0; border-left:6px solid var(--nkm-brown); border-radius:0; color:var(--nkm-dark); font:700 24px/1.5 var(--nkm-font); }
#body_wrap.single #main_content .post_content h2::before, #body_wrap.single #main_content .post_content h2::after,
#body_wrap.single #main_content .post_content h3::before, #body_wrap.single #main_content .post_content h3::after { content:none; }
#body_wrap.single #main_content .post_content h3 { margin:40px 0 20px; padding:0 0 8px; background:none; border:0; border-bottom:2px solid var(--nkm-brown); color:var(--nkm-dark); font:700 20px/1.5 var(--nkm-font); }
.single .post_content mark, .single .post_content .swl-marker { background:#fde3c4; color:var(--nkm-dark); font-weight:700; }
.single .post_content .is-style-check_list li::before, .single .post_content ul li::marker { color:var(--nkm-brown); }
.single .post_content a { color:var(--nkm-brown); }

/* Table of contents */
.single .p-toc { padding:24px 28px; border:1px solid var(--nkm-line); border-radius:12px; background:#fff; }
.single .p-toc::before, .single .p-toc::after { content:none; }
.single .p-toc__ttl { color:var(--nkm-dark); font:700 16px/1.7 var(--nkm-font); text-align:left; }
.single .p-toc__list a, .single .p-toc__link { color:var(--nkm-brown); font:400 15px/1.7 var(--nkm-font); }

/* Table */
.single .post_content table { border:1px solid var(--nkm-line); border-radius:4px; font:400 15px/1.7 var(--nkm-font); }
.single .post_content :is(th, td) { padding:12px 16px; border:0; border-top:1px solid var(--nkm-line); background:#fff; color:var(--nkm-ink); vertical-align:top; }
.single .post_content thead :is(th, td), .single .post_content tr:first-child th { background:#fff3e6; color:var(--nkm-dark); font-weight:700; }

/* Kotetsu's experience (SWELL balloon) */
.single .c-balloon__text { padding:18px 24px; border:0; border-radius:16px; background:var(--nkm-pink); color:var(--nkm-ink); font:400 16px/1.9 var(--nkm-font); }
.single .c-balloon__text::before, .single .c-balloon__text::after { display:none; }

/* Blog card */
.single .p-blogCard__inner { padding:16px; border:1px solid var(--nkm-line); border-radius:12px; box-shadow:none; }
.single .p-blogCard__caption { background:none; color:var(--nkm-brown); font:700 12px/1.7 var(--nkm-font); }
.single .p-blogCard__title { color:var(--nkm-dark); font:700 16px/1.7 var(--nkm-font); }

/* FAQ */
.single .swell-block-faq__item { margin-bottom:12px; padding:18px 24px; border:1px solid var(--nkm-line); border-radius:12px; background:#fff; }
.single .faq_q { color:var(--nkm-dark); font:700 16px/1.7 var(--nkm-font); }
.single .faq_a { color:var(--nkm-meta); font:400 15px/1.7 var(--nkm-font); }

/* Summary box and author box */
.single .post_content .nkm-points, .single .p-authorBox { padding:24px 28px; border:0; border-radius:12px; background:var(--nkm-gray); }

/* Related posts */
.single .l-articleBottom__title, .single .c-secTitle { color:var(--nkm-dark); font:700 20px/1.7 var(--nkm-font); }
.single .p-postList__title { color:var(--nkm-dark); font:700 18px/1.6 var(--nkm-font); }
.single .p-postList__thumb { border-radius:16px; overflow:hidden; }
.single .c-postThumb__cat { background:none; color:var(--nkm-brown); font:700 13px/1.5 var(--nkm-font); }

/* Sidebar */
#sidebar .c-widget { margin-bottom:32px; }
#sidebar .c-widget__title, #sidebar .wp-block-heading { margin-bottom:14px; padding:0; background:none; border:0; color:var(--nkm-dark); font:700 16px/1.7 var(--nkm-font); }
#sidebar .c-widget__title::before, #sidebar .c-widget__title::after { content:none; }
#sidebar .nkm-side-prof { display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 24px; border-radius:20px; background:var(--nkm-pink); text-align:center; }
#sidebar .nkm-side-prof img { width:120px; height:120px; border:5px solid #fff; border-radius:999px; }
#sidebar .nkm-side-prof h2 { margin:0; color:var(--nkm-dark); font:700 16px/1.7 var(--nkm-font); }
#sidebar .nkm-side-prof p { margin:0; color:var(--nkm-ink); font:400 14px/1.8 var(--nkm-font); text-align:left; }
#sidebar .nkm-side-prof .wp-block-button__link { display:block; width:100%; padding:10px 0; border:1.5px solid var(--nkm-brown); border-radius:999px; background:none; color:var(--nkm-brown); font:700 14px/1.7 var(--nkm-font); }
#sidebar .wp-block-latest-posts li { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
#sidebar .wp-block-latest-posts__featured-image img { width:96px; height:64px; object-fit:cover; border-radius:8px; }
#sidebar .wp-block-latest-posts__post-title { color:var(--nkm-dark); font:700 14px/1.7 var(--nkm-font); }
#sidebar .nkm-side-cats { margin:0; padding:0; list-style:none; }
#sidebar .nkm-side-cats li { margin:0 0 10px; color:var(--nkm-ink); font:400 15px/1.7 var(--nkm-font); }
#sidebar .nkm-side-cats li::before { content:"› "; }
#sidebar .nkm-side-cats a { color:var(--nkm-ink); }

@media (max-width:959px) {
  .single .l-content { padding-top:16px; }
  .single .c-postTitle__ttl { font-size:23px; }
  .single .post_content { font-size:16px; }
  .single .post_content h2 { font-size:19px; }
  .single .post_content h3 { font-size:17px; }
  .single .post_content table { font-size:15px; }
  .single .c-balloon__text { padding:14px 16px; font-size:16px; }
  .single .faq_a { font-size:15px; }
}

/* SP header (Figma 173:148): logo left, search and menu buttons right. */
@media (max-width:959px) {
  .l-header__inner { justify-content:flex-start; }
  .l-header .l-header__logo { order:0; flex:0 1 auto; width:auto; padding:0; }
  .l-header .l-header__customBtn { order:1; margin-left:auto; }
  .l-header .l-header__menuBtn { order:2; }
  .l-header__logo .c-headLogo { justify-content:flex-start; }
}

/* Figma shows the date in the meta line, not beside the title. */
.single .c-postTitle__date { display:none; }
.single .c-postTitle { display:block; }
@media (max-width:959px) {
  #body_wrap.single #main_content .post_content h2 { font-size:19px; }
  #body_wrap.single #main_content .post_content h3 { font-size:17px; }
}

/* Keep the caption legible where it crosses the blog-card border. */
.single .p-blogCard__caption { background:var(--nkm-paper); padding-inline:8px; }

/* SP cards must override SWELL's fixed-width and sticky-first-column table rules. */
@media (max-width:600px) {
  .single .post_content .nkm-labeled { overflow:visible; }
  #body_wrap.single #main_content .post_content .nkm-labeled table { display:block; width:100% !important; min-width:0 !important; max-width:100%; --table-width:100% !important; border:0; border-radius:0; table-layout:auto; }
  .single .post_content .nkm-labeled :is(thead, colgroup) { display:none; }
  .single .post_content .nkm-labeled :is(tbody, tr, td, th) { display:block; width:auto; }
  .single .post_content .nkm-labeled tr { margin:0 0 12px; padding:14px 16px; border:1px solid var(--nkm-line); border-radius:12px; background:#fff; }
  .single .post_content .nkm-labeled :is(td, th) { position:static !important; padding:0; border:0; background:none; box-shadow:none; font:400 15px/1.7 var(--nkm-font); white-space:normal; overflow-wrap:anywhere; text-align:left; }
  .single .post_content .nkm-labeled :is(td, th) + :is(td, th) { margin-top:8px; }
  .single .post_content .nkm-labeled :is(td, th):first-child { color:var(--nkm-dark); font-weight:700; }
  .single .post_content .nkm-labeled :is(td, th) + :is(td, th)[data-label]::before { content:attr(data-label); display:block; color:var(--nkm-brown); font:700 12px/1.6 var(--nkm-font); }
  .single .post_content .c-scrollHint:has(+ .nkm-labeled) { display:none; }
}

/* Non-article QA 2026-11-01: fit form fields and clarify pagination. */
.page .wpcf7-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.page .wpcf7-form textarea,.page .wpcf7-form select {box-sizing:border-box;max-width:100%;width:100%;min-height:44px;font-size:16px;}
.page .wpcf7-form textarea {resize:vertical;}
.page .wpcf7-form p {margin-bottom:1.4em;}
.page .wpcf7-form input[type=submit] {width:auto;min-width:120px;padding:10px 24px;background:var(--nkm-dark);color:#fff;border-radius:6px;cursor:pointer;}
.page .wpcf7-form :is(input,textarea,select):focus-visible {outline:2px solid var(--nkm-brown);outline-offset:3px;}
.c-pagination a.page-numbers {color:#512f23;background:#f2e7dc;}
.c-pagination a.page-numbers:hover,.c-pagination a.page-numbers:focus-visible {color:#fff;background:#512f23;}
.nkm-search-retry {max-width:600px;margin:24px 0;}

/* Site audit 2026-11-03: body links are underlined so they do not rely on colour,
   post dates and the reply button meet text contrast, empty categories list alternatives. */
body:not(.home) .post_content :is(p,li,td,th,dd,figcaption) a:where(:not(.p-toc *, [class*="btn"], [class*="Btn"])) {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
body:not(.home) .post_content :is(p,li,td,th,dd,figcaption) a:focus-visible {outline:2px solid var(--nkm-brown);outline-offset:2px;}
.single .c-postTimes.u-thin {opacity:1;}
.comment-reply-link {background-color:var(--nkm-brown);}
.nkm-empty-term {margin-top:24px;}
.nkm-empty-term ul {margin:12px 0 0;padding-left:1.4em;}
.nkm-empty-term li + li {margin-top:8px;}
.nkm-empty-term a {color:var(--nkm-brown);text-decoration:underline;text-underline-offset:3px;}
