/* HEADs AI — Notes（V2）
   プロトの紙パネルと同じ地。暗いのは映像の面だけ、読み物は紙の面に置く。
   このファイルはプレビューと WordPress テンプレートの両方が読む。単一の正本。 */
:root{
  --cream:#fdf4e0; --paper:#faf8f3; --paper2:#fffdf8;
  --ink:#3a2f28; --ink-body:#4a4038; --ink-strong:#2a2320;
  --amber:#f2b705; --blue:#0066cc;
  --line:rgba(58,47,40,.13);
  --mono:"IBM Plex Mono","SF Mono",Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink-body);background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");background-blend-mode:multiply;
  line-height:1.9;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---- ヘッダー ---- */
.nhead{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:0 clamp(20px,5vw,56px);height:60px;
  background:rgba(250,248,243,.86);backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line)}
.nhead .mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-strong)}
/* 実物のロゴ画像。縦は22pxに揃え、横は元の比率のまま */
.nhead .mark img{height:22px;width:auto;display:block;flex:none}
.nhead .mark svg{width:22px;height:22px;flex:none}
.nhead .mark b{font-size:15px;font-weight:700;letter-spacing:.02em}
.nhead .mark b i{font-style:normal;font-size:11px;opacity:.5}
.nhead .sep{width:1px;height:16px;background:var(--line)}
.nhead .here{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:rgba(58,47,40,.5)}
/* 行き先のあるメニュー。
   以前は「SITE →」1本だけで、記事から相談へ行くにはトップの映像を
   最初から見せられていた（2026-08-11 指摘）。ロゴがトップへの導線を担うので、
   ここは「読んだあとに行きたい場所」だけを並べる。 */
.nhead .nnav{margin-left:auto;display:flex;align-items:center;gap:8px}
.nhead .nnav a{display:inline-flex;align-items:center;height:36px;padding:0 14px;
  border:1px solid transparent;border-radius:980px;text-decoration:none;
  font-size:12.5px;color:var(--ink);white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s}
.nhead .nnav a:hover{color:var(--ink-strong);background:rgba(58,47,40,.05)}
.nhead .nnav .cta{border-color:var(--line);color:var(--ink-strong);font-weight:700}
.nhead .nnav .cta:hover{background:rgba(242,183,5,.14);border-color:rgba(242,183,5,.5)}
@media(max-width:560px){
  .nhead{gap:10px;padding:0 16px}
  .nhead .here,.nhead .sep{display:none}
  .nhead .nnav{gap:2px}
  .nhead .nnav a{padding:0 10px;font-size:12px}
}
/* さらに狭いと、ロゴと2項目が入らない。相談だけ残す */
@media(max-width:390px){.nhead .nnav .sub{display:none}}

/* ---- 共通の器 ---- */
/* 上の余白は詰める。最大96px空けると、最初の画面が見出しだけで終わる */
.wrap{max-width:1080px;margin:0 auto;padding:clamp(22px,3vh,34px) clamp(20px,5vw,56px) clamp(64px,10vh,120px)}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--ink-strong);background:rgba(242,183,5,.22);border:1px solid rgba(242,183,5,.5);
  border-radius:980px;padding:6px 14px}

/* ---- 一覧 ---- */
.ahead{margin-bottom:clamp(26px,4vh,44px)}
.ahead h1{font-size:clamp(27px,3.8vw,42px);font-weight:700;line-height:1.45;letter-spacing:-.012em;
  color:var(--ink-strong);margin:14px 0 12px}
.ahead p b{color:var(--ink-strong)}
.ahead p{max-width:46em;font-size:clamp(14.5px,1.2vw,16px);line-height:2;color:var(--ink)}
.alist{display:grid;gap:clamp(16px,2.4vw,24px)}
.acard{display:block;position:relative;text-decoration:none;border-radius:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(253,244,224,.72),rgba(250,246,236,.6));
  background-blend-mode:multiply,normal;border:1px solid var(--line);
  padding:clamp(22px,2.8vw,34px) clamp(22px,3vw,38px);
  box-shadow:0 10px 28px rgba(58,47,40,.07),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .22s}
.acard:hover{transform:translateY(-3px);border-color:rgba(242,183,5,.5);
  box-shadow:0 18px 40px rgba(58,47,40,.11),inset 0 1px 0 rgba(255,255,255,.7)}
.acard .meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;color:rgba(58,47,40,.55);margin-bottom:14px}
.acard .cat{color:var(--ink-strong);background:rgba(242,183,5,.22);border:1px solid rgba(242,183,5,.45);
  border-radius:980px;padding:4px 11px;letter-spacing:.08em}
.acard h2{font-size:clamp(19px,2.1vw,26px);font-weight:700;line-height:1.55;letter-spacing:-.008em;
  color:var(--ink-strong);margin-bottom:12px}
.acard p{max-width:62ch;font-size:14.5px;line-height:1.95;color:var(--ink)}
.acard .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);width:100%;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--blue)}

/* ---- 本文 ---- */
.nhero{max-width:820px;margin:0 auto clamp(30px,5vh,52px)}
.nhero .meta{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.1em;color:rgba(58,47,40,.55)}
.nhero h1{font-size:clamp(26px,3.9vw,44px);font-weight:700;line-height:1.48;letter-spacing:-.012em;
  color:var(--ink-strong);margin:18px 0 0}
.nlead{max-width:820px;margin:0 auto clamp(30px,5vh,54px);border-radius:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),linear-gradient(180deg,#fff,var(--paper2));background-blend-mode:multiply,normal;
  border:1px solid rgba(242,183,5,.4);border-left:5px solid var(--amber);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);
  box-shadow:0 12px 32px rgba(58,47,40,.09)}
.nlead p{font-size:clamp(14.5px,1.2vw,16.5px);line-height:2;color:var(--ink);margin:0}

.nbody{max-width:820px;margin:0 auto;counter-reset:h2}
.nbody p{font-size:clamp(15px,1.25vw,17px);line-height:2.15;margin-bottom:1.5em}
.nbody b{color:var(--ink-strong);font-weight:700}
.nbody code{font-family:var(--mono);font-size:.9em;background:rgba(58,47,40,.07);
  border-radius:5px;padding:2px 6px}
.nbody h2{display:flex;align-items:baseline;gap:14px;
  font-size:clamp(20px,2.3vw,28px);font-weight:700;line-height:1.5;letter-spacing:-.008em;
  color:var(--ink-strong);margin:clamp(48px,7vh,80px) 0 22px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.nbody h2{counter-increment:h2}
.nbody h2::before{content:counter(h2,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.1em;color:rgba(242,183,5,.9)}
.nbody h2 .hn{display:none}   /* 番号はCSSカウンタで出す。生成器側の番号は使わない */
.nbody h3{font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.6;
  color:var(--ink-strong);margin:clamp(30px,4vh,44px) 0 14px}
.nbody ul,.nbody ol{margin:0 0 1.6em;padding-left:0;list-style:none}
.nbody li{position:relative;padding-left:26px;margin-bottom:.85em;
  font-size:clamp(14.5px,1.2vw,16.5px);line-height:2.05}
.nbody ul>li::before{content:"";position:absolute;left:4px;top:.82em;width:7px;height:7px;
  border-radius:2px;background:var(--amber)}
.nbody ol{counter-reset:n}
.nbody ol>li{counter-increment:n}
.nbody ol>li::before{content:counter(n);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:12px;color:rgba(242,183,5,.95)}
.nbody blockquote{margin:0 0 1.6em;padding:18px 22px;border-radius:14px;
  background:rgba(255,255,255,.62);border:1px solid var(--line);border-left:4px solid rgba(58,47,40,.2);
  font-size:15px;line-height:2;color:var(--ink)}
.nbody hr{border:none;height:1px;background:var(--line);margin:clamp(40px,6vh,64px) 0}

/* ---- WordPress が吐く要素 ---- */
.nbody figure{margin:0 0 1.8em}
.nbody figure img{border-radius:14px;box-shadow:0 10px 28px rgba(58,47,40,.1)}
.nbody figcaption{margin-top:10px;font-size:13px;line-height:1.8;color:rgba(58,47,40,.6)}
.nbody .wp-block-image{margin:0 0 1.8em}
.nbody a{color:var(--blue);text-underline-offset:3px}
.nbody table{width:100%;border-collapse:collapse;margin:0 0 1.8em;font-size:14.5px}
.nbody th,.nbody td{padding:12px 14px;border:1px solid var(--line);text-align:left;line-height:1.85}
.nbody th{background:rgba(242,183,5,.14);color:var(--ink-strong);font-weight:700}
.nbody .wp-block-embed,.nbody iframe{max-width:100%;margin:0 0 1.8em}
.nbody strong{color:var(--ink-strong);font-weight:700}
/* 見出しの中の strong が block になって改行扱いになり、
   「HEADs AIチーム とは」のように不自然な空きができていた */
.nbody h2 strong,.nbody h3 strong,.nbody h4 strong{display:inline}

/* ---- ページ送り ---- */
.npager{max-width:820px;margin:clamp(32px,5vh,52px) auto 0;display:flex;gap:12px;justify-content:space-between}
.npager a{flex:1;min-width:0;display:block;padding:16px 20px;border-radius:14px;text-decoration:none;
  border:1px solid var(--line);background:rgba(255,255,255,.5);
  font-size:14px;line-height:1.7;color:var(--ink-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color .2s,background .2s}
.npager a:hover{border-color:rgba(242,183,5,.6);background:rgba(242,183,5,.12)}
.npager .nx{text-align:right}

/* ---- 署名と末尾 ---- */
.nsign{max-width:820px;margin:clamp(40px,6vh,64px) auto 0;padding-top:24px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:rgba(58,47,40,.6)}
.nsign i{display:block;width:26px;height:1px;background:var(--amber);font-style:normal}
.nfoot{max-width:820px;margin:clamp(40px,6vh,64px) auto 0;display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border-radius:980px;
  text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.02em;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn.pri{color:#fff;background:var(--blue);box-shadow:0 12px 30px rgba(0,102,204,.32)}
.btn.pri:hover{transform:translateY(-2px);background:#0a5cb8}
.btn.gho{color:var(--ink-strong);border:1px solid var(--line);background:rgba(255,255,255,.5)}
.btn.gho:hover{border-color:rgba(242,183,5,.6);background:rgba(242,183,5,.12)}

/* ---- フッター ---- */
.nfooter{border-top:1px solid var(--line);padding:28px clamp(20px,5vw,56px);
  display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;color:rgba(58,47,40,.45)}
.nfooter a{margin-left:auto;text-decoration:none;color:rgba(58,47,40,.6)}
.nfooter a:hover{color:var(--ink-strong)}

/* ---- 一覧（タグ・カテゴリ・検索）----
   以前はここに一覧のCSSが無かった。フォールバックが記事全文を出していたため
   一覧という概念自体が無く、タグ7ページが本文の複製になっていた。 */
.fallback{max-width:820px;margin:0 auto;padding:40px 20px 80px}
.archive-head{padding-bottom:8px;border-bottom:1px solid rgba(29,29,31,.1);margin-bottom:8px}
.archive-head h1{font-size:clamp(20px,2.6vw,27px);line-height:1.5;font-weight:700;color:#1d1d1f}
.archive-desc{font-size:14px;line-height:1.95;color:#5b6472;margin-top:10px}
.postlist{list-style:none;margin:0;padding:0}
.postlist li{border-bottom:1px solid rgba(29,29,31,.1)}
.postlist a{display:block;padding:22px 4px;text-decoration:none;transition:background .2s}
.postlist a:hover{background:rgba(0,102,204,.04)}
.pl-date{display:block;font-family:"IBM Plex Mono","SF Mono",monospace;font-size:11.5px;
  letter-spacing:.12em;color:#9aa3b2;margin-bottom:7px}
.pl-title{display:block;font-size:17px;line-height:1.65;font-weight:700;color:#1d1d1f;margin-bottom:8px}
.pl-ex{display:block;font-size:13.5px;line-height:1.95;color:#5b6472}
.postlist a:hover .pl-title{color:#0066cc}

/* ブログ → 7領域への戻り口 */
.abacklink{margin-top:clamp(40px,6vh,64px)}
.abacklink a{display:block;padding:24px 26px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.6);text-decoration:none;transition:border-color .2s,transform .2s}
.abacklink a:hover{border-color:rgba(0,102,204,.5);transform:translateY(-1px)}
.abacklink b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:rgba(58,47,40,.45);margin-bottom:8px}
.abacklink span{display:block;font-size:17px;font-weight:700;color:var(--ink-strong);margin-bottom:8px}
.abacklink i{display:block;font-style:normal;font-size:13.5px;line-height:1.9;color:var(--ink)}