/* EC AI Works / このサイトで足したぶんの見た目
 *
 * ★土台は style-base.css（複製元と同じ配色トークン・記事本文の体裁）。
 *   こちらは **後から読ませて上書きする**ので、ここには追加と上書きだけ書く。
 *   記事本文の体裁（.esy-*）は触らない。触ると32本ぜんぶの見え方が変わる。
 * ★本文の基準サイズは 17.5px のまま。読者に50〜70代を含むため、
 *   本文14.5px未満・ラベル12.5px未満は作らない。
 */

/* -------------------------------------------------------------- ヘッダー */
.brand-text{display:flex; flex-direction:column; line-height:1.25;}
.brand-text b{margin-left:0; color:var(--white); font-size:17px; letter-spacing:.04em;}
.brand-text small{font-size:12px; color:var(--moss-on-ink); letter-spacing:.02em;}
.brand-mark{font-family:var(--font); font-weight:700;}
.head-nav a{font-size:14.5px; padding:6px 10px;}

/* -------------------------------------------------------------- フッター */
.site-foot{background:var(--ink); color:var(--text-on-ink); padding:26px 0 30px; margin-top:40px;}
.foot-brand{font-size:16px; font-weight:700; color:var(--white); letter-spacing:.05em;}
.foot-links{margin-top:8px; display:flex; gap:16px; flex-wrap:wrap;}
.foot-link{font-size:14.5px; color:var(--text-on-ink);}
.foot-link:hover{color:var(--white); text-decoration:underline;}
.foot-note{margin-top:10px; font-size:13px; color:var(--muted-on-ink);}

/* ------------------------------------------------------------- 見出し帯 */
.sec-label{
  font-size:12.5px; letter-spacing:.14em; color:var(--muted);
  text-transform:uppercase; margin-bottom:6px;
}
.sec-lead{font-size:15.5px; color:var(--muted); margin-bottom:16px; max-width:62em;}
.top > section, .about > section, .cnt > section{margin-bottom:46px;}

/* ---------------------------------------------------------- 種類ラベル */
.lbl{
  display:inline-block; padding:1px 9px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.lbl-do{background:#E4EEDF; color:#2E3F29;}    /* 実践 */
.lbl-fail{background:#F7E9E7; color:#8E3A31;}  /* 失敗 */
.lbl-test{background:#E6EDF4; color:#2F4A66;}  /* 検証 */
.lbl-idea{background:#EFEDE6; color:#5C5A4E;}  /* 考察 */
.lbl-news{background:#FBF0DC; color:#7A5A20;}  /* ニュース */
.lbl-tool{background:#EFE9E1; color:#7A5A32;}  /* 道具 */
.lbl-info{background:#EDEDE8; color:var(--muted);} /* 案内 */
.chip-fail.on{background:#8E3A31; border-color:#8E3A31;}
.chip-n.warn{background:var(--clay); color:var(--white);}

/* -------------------------------------------------------------- ヒーロー */
.hero{
  background:var(--ink); color:var(--white); border-radius:16px;
  padding:44px 34px; margin-bottom:40px; box-shadow:var(--shadow);
}
.hero-h{
  font-size:clamp(27px, 4.4vw, 40px); line-height:1.35; letter-spacing:.01em;
  color:var(--white); margin-bottom:16px;
}
.hero-p{font-size:16.5px; line-height:2; color:var(--text-on-ink);}
.hero-p b{color:var(--moss-on-ink);}

/* ------------------------------------- 読む順番（まとめページ）への入口 */
.top a.guide-cta, .guide-cta{
  display:block; margin:-12px 0 36px; padding:28px 30px;
  background:var(--moss); color:var(--white); border-radius:16px;
  box-shadow:var(--shadow); transition:box-shadow .15s, transform .15s;
}
.top a.guide-cta:hover, .guide-cta:hover{transform:translateY(-2px); background:var(--moss-deep);}
.guide-cta-k{display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.06em;
  background:var(--white); color:var(--moss-deep); border-radius:999px; padding:3px 12px; margin-bottom:12px;}
.guide-cta-t{display:block; font-size:clamp(23px, 3.4vw, 30px); font-weight:700; line-height:1.4; margin-bottom:8px;}
.guide-cta-p{display:block; font-size:15.5px; line-height:1.85; opacity:.95;}
.guide-cta-steps{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:16px 0 18px; font-size:14px;}
.guide-cta-steps span{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:4px 10px;}
.guide-cta-steps i{font-style:normal; opacity:.8;}
.guide-cta-btn{display:inline-block; background:var(--white); color:var(--moss-deep); font-weight:700;
  font-size:16px; border-radius:10px; padding:11px 22px;}
@media(max-width:600px){
  .top a.guide-cta, .guide-cta{padding:22px 18px; margin-top:-16px;}
  .guide-cta-steps{font-size:13px;}
  .guide-cta-btn{display:block; text-align:center;}
}

/* ------------------------------------------------- まず読んでほしい3本 */
.picks-list{display:grid; gap:12px;}
.pick{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--moss);
  border-radius:12px; padding:18px 20px; transition:box-shadow .15s, transform .15s;
}
.pick:hover{box-shadow:var(--shadow); transform:translateY(-1px);}
.pick-n{
  flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; background:var(--moss); color:var(--white);
  font-size:15px; font-weight:700; font-family:var(--mono);
}
.pick-b{display:block;}
.pick-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px;}
.pick-cat{font-size:12.5px; color:var(--muted);}
.pick-t{display:block; font-size:19px; font-weight:700; line-height:1.5; margin-bottom:4px;}
.pick-l{display:block; font-size:15px; color:var(--muted); line-height:1.7;}

/* ------------------------------------------- 今こんなことをやっています */
.nd-list{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));}
.nd{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:16px 18px;}
.nd-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px;}
.nd-name{font-size:16px; font-weight:700;}
.nd-stage{
  flex:0 0 auto; font-size:12.5px; font-weight:700; padding:2px 10px; border-radius:999px;
  background:#EDEDE8; color:var(--muted); white-space:nowrap;
}
.nd-stage-100{background:#E4EEDF; color:#2E3F29;}
.nd-stage-70{background:#E6EDF4; color:#2F4A66;}
.nd-stage-40{background:#FBF0DC; color:#7A5A20;}
.nd-bar{height:7px; border-radius:999px; background:#E9E6DE; overflow:hidden;}
.nd-bar span{display:block; height:100%; border-radius:999px; background:var(--moss);}
.nd-note{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.7;}
.nd-foot{margin-top:14px; font-size:13.5px; color:var(--muted);}

/* --------------------------------------------------- 記事カードの補助 */
.cnt-cat{font-size:12.5px; color:var(--muted);}
.cnt-lead{font-size:16px; color:var(--muted); line-height:1.85; max-width:64em; margin-bottom:22px;}
.cnt-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px;}
.cnt-filter + .cnt-filter{margin-top:-4px; margin-bottom:22px;}
.cnt-head h1{font-size:27px; line-height:1.45; margin-bottom:10px;}
.narrow{max-width:620px;}

/* --------------------------------------------------------- 分類カード */
.cats-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));}
.cat-card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:18px 20px; transition:box-shadow .15s, border-color .15s;
}
.cat-card:hover{box-shadow:var(--shadow); border-color:var(--moss);}
.cat-card-t{font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px;}
.cat-card-n{
  font-size:12.5px; font-family:var(--mono); color:var(--muted);
  background:#EDEDE8; border-radius:999px; padding:0 8px;
}
.cat-card-l{margin-top:6px; font-size:14.5px; color:var(--muted); line-height:1.7;}
.cat-card-s{margin-top:8px; font-size:13px; color:var(--muted); opacity:.85;}

/* ----------------------------------------------------------- 3本の柱 */
.pillars-3{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr));}
.pillar{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:18px 20px;}
.pillar-t{font-size:19px; font-weight:700; color:var(--moss-deep); margin-bottom:8px;}
.pillar-d{font-size:15px; color:var(--muted); line-height:1.8;}

/* ------------------------------------------------------ 読む順番ページ */
.rg-ch{margin-bottom:38px;}
.rg-ch-t{font-size:20px; margin-bottom:4px; padding-bottom:6px; border-bottom:2px solid var(--moss);}
.rg-ch-d{font-size:14.5px; color:var(--muted); margin-bottom:14px;}
.rg-list{display:grid; gap:10px;}
.rg-card{
  display:flex; gap:14px; align-items:center;
  background:var(--white); border:1px solid var(--rule); border-radius:10px;
  padding:14px 16px; transition:border-color .15s;
}
.rg-card:hover{border-color:var(--moss);}
.rg-n{
  flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px;
  border-radius:50%; background:#EDEDE8; color:var(--muted);
  font-size:13px; font-family:var(--mono);
}
.rg-b{flex:1 1 auto;}
.rg-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px;}
.rg-cat{font-size:12.5px; color:var(--muted);}
.rg-t{display:block; font-size:17px; font-weight:700; line-height:1.5;}
.rg-l{display:block; font-size:14.5px; color:var(--muted); line-height:1.7; margin-top:3px;}

/* ------------------------------------------------------- このサイトとは */
.ab-sec{margin-bottom:42px;}
.ab-sec h2{font-size:21px; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid var(--rule);}
.ab-sec p{margin-bottom:12px; max-width:64em;}
.ab-flow{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:8px 18px; margin:14px 0 16px; max-width:46em;
}
.ab-flow p{position:relative; padding:10px 0 10px 26px; margin:0; font-size:16px;}
.ab-flow p + p{border-top:1px dashed var(--rule);}
.ab-flow p::before{
  content:"↓"; position:absolute; left:2px; color:var(--moss); font-weight:700;
}
.ab-flow p:first-child::before{content:"●"; font-size:11px; top:14px;}
.ab-labels{list-style:none; display:grid; gap:8px; max-width:46em;}
.ab-labels li{display:flex; gap:12px; align-items:baseline;}
.ab-label-n{font-size:14.5px; color:var(--muted);}

/* --------------------------------------------------------------- 入力 */
.form{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:22px 24px; max-width:680px;
}
.f-row{display:block; margin-bottom:18px;}
.f-l{display:block; font-size:14.5px; font-weight:700; margin-bottom:6px;}
.f-l em{
  font-style:normal; font-size:12.5px; font-weight:400; margin-left:8px;
  color:var(--danger); border:1px solid currentColor; border-radius:999px; padding:0 7px;
}
.form input[type=text], .form input[type=email], .form input[type=tel],
.form input[type=password], .form textarea{
  width:100%; font-family:var(--font); font-size:16.5px; color:var(--text);
  background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:10px 12px;
}
.form input:focus, .form textarea:focus{outline:2px solid var(--moss-hi); outline-offset:1px;}
.f-note{font-size:13.5px; color:var(--muted); margin-bottom:16px;}
.errs{
  background:#f7ebea; border:1px solid #e0c2bf; color:var(--danger);
  border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:15px;
}
.flash-warn{background:#FBF0DC; border:1px solid #e4cf9f; color:#7A5A20;}
.done-box{
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--moss);
  border-radius:12px; padding:22px 24px; max-width:680px;
}
.done-h{font-size:20px; font-weight:700; color:var(--moss-deep); margin-bottom:10px;}

/* ------------------------------------------------------------- 空っぽ */
.empty{font-size:16px; color:var(--muted);}
.empty-box{
  background:var(--white); border:1px dashed var(--rule); border-radius:12px; padding:22px 24px;
}
.empty-sub{margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.8;}
.empty-sub a{color:var(--moss-deep); text-decoration:underline;}

/* --------------------------------------------------------------- 管理 */
.adm-note{
  background:#EDEDE8; border-radius:10px; padding:12px 16px;
  font-size:14.5px; line-height:1.8; margin-bottom:20px;
}
.tbl-wrap{overflow-x:auto; border:1px solid var(--rule); border-radius:12px; background:var(--white);}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:760px;}
.tbl th, .tbl td{padding:9px 12px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top;}
.tbl th{background:#F3F1EB; font-size:13.5px; white-space:nowrap;}
.tbl td.num, .tbl th.num{text-align:right; font-family:var(--mono); white-space:nowrap;}
.tbl td.num.has{color:var(--moss-deep); font-weight:700;}
.tbl td.sm{font-size:13px; color:var(--muted);}
.tbl a{color:var(--moss-deep); text-decoration:underline;}
.adm-date{display:inline-block; margin-left:8px; font-size:12.5px; color:var(--muted); font-family:var(--mono);}
.adm-card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:16px 18px; margin-bottom:12px;
}
.adm-card.is-pending{border-left:4px solid var(--clay);}
.adm-card-h{font-size:14.5px; margin-bottom:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.adm-card-h a{color:var(--moss-deep); text-decoration:underline;}
.adm-status{font-size:12.5px; font-weight:700; padding:1px 9px; border-radius:999px;}
.adm-status-pending{background:#FBF0DC; color:#7A5A20;}
.adm-status-visible{background:#E4EEDF; color:#2E3F29;}
.adm-status-hidden{background:#EDEDE8; color:var(--muted);}
.adm-warn{font-size:12.5px; color:var(--danger); border:1px solid currentColor; border-radius:999px; padding:0 8px;}
.adm-body{font-size:15.5px; line-height:1.8; padding:10px 0; border-top:1px dashed var(--rule);}
.adm-inline{display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; padding-top:8px; border-top:1px dashed var(--rule);}
.adm-inline textarea{
  flex:1 1 280px; font-family:var(--font); font-size:14.5px;
  background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:8px 10px;
}
.btn.sm{font-size:13.5px; padding:7px 14px;}

/* ------------------------------------------------------------- 狭い画面 */
@media (max-width:640px){
  .hero{padding:30px 20px; border-radius:12px;}
  .hero-p{font-size:15.5px;}
  .pick{padding:15px 16px; gap:12px;}
  .pick-t{font-size:17.5px;}
  .head-nav{gap:2px;}
  .head-nav a{font-size:13.5px; padding:5px 8px;}
  .brand-text small{display:none;}
  .form{padding:18px 16px;}
}
/* 記事検索（トップ・記事一覧共通） */
.article-search{
  margin:24px 0; padding:22px; border:1px solid var(--rule); border-radius:14px;
  background:var(--paper); box-shadow:0 8px 24px rgba(47,54,45,.06);
}
.article-search-kicker{font-size:13.5px;font-weight:700;letter-spacing:.08em;color:var(--moss);}
.article-search h2{margin-top:4px;font-size:21px;line-height:1.55;}
.article-search-form{display:flex;gap:10px;align-items:stretch;margin-top:14px;}
.article-search-form input[type=search]{min-width:0;flex:1 1 auto;font-size:16px;}
.article-search-form .btn{flex:0 0 auto;min-width:88px;font-size:15px;}
.article-search-tags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;}
.article-search-tags-label{font-size:13.5px;color:var(--muted);margin-right:2px;}
.search-hot{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;background:#F4D9A7;color:#66420F;font-size:12.5px;font-weight:700;}
.search-summary{margin:14px 0 2px;font-size:15px;color:var(--muted);}
.search-snippet mark,.cnt-item-t mark{background:#FFF0A8;color:inherit;padding:0 2px;}
.search-empty{margin:20px 0;padding:18px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);}
.search-empty p{font-size:15px;line-height:1.85;}
.search-empty .empty{margin:0 0 6px;font-size:17px;font-weight:700;color:var(--text);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(max-width:600px){
  .article-search{padding:18px 16px;}
  .article-search h2{font-size:19px;}
  .article-search-form{flex-direction:column;}
  .article-search-form .btn{width:100%;}
  .article-search-tags-label{flex-basis:100%;}
}

/* ------------------------------------------------------------------
   記事の図（インラインSVG）— 2026-09-29 ボス依頼「テキストばかりで退屈なので図を」
   .fig-pair は2枚並べ（狭い画面では縦に積む）。.fig-one は1枚。
------------------------------------------------------------------ */
.fig{margin:22px 0 26px; padding:18px; background:var(--white); border:1px solid var(--rule); border-radius:14px;}
.fig svg{display:block; width:100%; height:auto; font-family:var(--font);}
.fig-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.fig-pair svg{background:var(--paper); border-radius:10px;}
.fig-one{max-width:560px; margin:0 auto;}
.fig figcaption{margin-top:12px; font-size:14px; color:var(--muted); line-height:1.8; text-align:center;}
@media(max-width:640px){
  .fig{padding:12px;}
  .fig-pair{grid-template-columns:1fr;}
}