/* EC実務AI実践会 実例集 — 配色トークンは募集LP(ec-ai)と共通 */
:root{
  --ink:#15171a;
  --ink-soft:#1e2126;
  --ink-line:#2c3038;
  --paper:#FBFAF7;
  --white:#ffffff;
  --moss:#46603F;
  --moss-deep:#2E3F29;
  --moss-hi:#577a4c;
  --moss-on-ink:#9dbb8f;
  --clay:#8C6A4F;
  --rule:#D9D5CB;
  --text:#1C1E1B;
  --muted:#6B6E66;
  --muted-on-ink:#9aa0a8;
  --text-on-ink:#c9cdc6;
  --danger:#9d3b34;
  --shadow:0 14px 34px -20px rgba(21,23,26,.34);
  --maxw:1180px;
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font); color:var(--text); background:var(--paper);
  font-size:17.5px; line-height:1.8; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* ---------------------------------------------------------- ヘッダー */
.site-head{background:var(--ink); color:var(--text-on-ink); border-bottom:1px solid var(--ink-line);}
.head-inner{display:flex; align-items:center; gap:18px; min-height:60px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; color:var(--white); flex:0 0 auto;}
.brand-mark{
  display:grid; place-items:center; width:30px; height:30px; border-radius:6px;
  background:var(--moss); color:var(--white); font-size:17.5px; font-family:serif;
}
.brand-text{font-size:16.5px; letter-spacing:.02em;}
.brand-text b{font-weight:700; margin-left:6px; color:var(--moss-on-ink);}
.head-nav{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap;}
.head-nav a{
  padding:6px 12px; border-radius:999px; font-size:15.5px; color:var(--text-on-ink);
  transition:background .15s, color .15s;
}
.head-nav a:hover{background:var(--ink-soft); color:var(--white);}
.head-nav a.on{background:var(--moss); color:var(--white);}
.head-user{font-size:14.5px; color:var(--muted-on-ink); margin-left:8px;}
.head-logout{font-size:14.5px; color:var(--muted-on-ink) !important;}
.badge-n{
  display:inline-block; min-width:18px; padding:0 5px; margin-left:6px;
  border-radius:999px; background:var(--clay); color:var(--white);
  font-size:12.5px; line-height:18px; text-align:center;
}

/* ------------------------------------------------------------- 本文 */
.page{flex:1 0 auto; padding-top:26px; padding-bottom:56px;}
h1.page-title{font-size:23px; line-height:1.5; margin-bottom:4px;}
.page-lead{color:var(--muted); font-size:15.5px; margin-bottom:22px;}
.section-title{font-size:18.5px; margin:30px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--rule);}

.flash{padding:11px 15px; border-radius:8px; margin-bottom:18px; font-size:15.5px;}
.flash-ok{background:#eaf1e6; border:1px solid #c3d7ba; color:var(--moss-deep);}
.flash-ng{background:#f7ebea; border:1px solid #e0c2bf; color:var(--danger);}

/* ----------------------------------------------------------- 絞り込み */
.filters{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:14px 16px; margin-bottom:22px;
}
.filter-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.filter-row + .filter-row{margin-top:10px; padding-top:10px; border-top:1px dashed var(--rule);}
.filter-label{font-size:13.5px; color:var(--muted); flex:0 0 auto; width:74px;}
.chip{
  display:inline-block; padding:5px 13px; border-radius:999px; font-size:14.5px;
  border:1px solid var(--rule); background:var(--paper); color:var(--text);
  transition:background .15s, border-color .15s, color .15s;
}
.chip:hover{border-color:var(--moss); color:var(--moss-deep);}
.chip.on{background:var(--moss); border-color:var(--moss); color:var(--white);}
.filter-search{display:flex; gap:8px; align-items:center; margin-left:auto;}
.filter-search input[type=search]{
  width:220px; max-width:46vw; padding:7px 12px; font-size:15.5px;
  border:1px solid var(--rule); border-radius:999px; background:var(--paper); font-family:inherit;
}
.sort-links{display:flex; gap:6px; font-size:13.5px; color:var(--muted); align-items:center;}
.sort-links a.on{color:var(--moss-deep); font-weight:700;}

/* -------------------------------------------------------- カード一覧 */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(238px, 1fr));
}
.card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:#c6c0b2;}
.card-shot{
  aspect-ratio:16/10; background:#eeece6; position:relative; overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.card-shot img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.card-shot .noshot{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#b5b0a4; font-size:13.5px;
}
.card-cat{
  position:absolute; left:8px; top:8px; padding:3px 9px; border-radius:999px;
  background:rgba(21,23,26,.78); color:#fff; font-size:12.5px; line-height:1.6;
}
.card-new{
  position:absolute; right:8px; top:8px; padding:2px 8px; border-radius:999px;
  background:var(--clay); color:#fff; font-size:11.5px; letter-spacing:.06em;
}
.card-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.card-title{font-size:16.5px; line-height:1.55; font-weight:700;}
.card-sum{font-size:14.5px; line-height:1.7; color:var(--muted); flex:1;}
.card-meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); flex-wrap:wrap;}
.card-effect{
  font-size:13.5px; color:var(--moss-deep); background:#eef3ea;
  border-radius:6px; padding:4px 8px; align-self:flex-start;
}
.card-status{
  font-size:12.5px; padding:2px 8px; border-radius:999px; align-self:flex-start;
  border:1px solid var(--rule); color:var(--muted);
}
.card-status.st-pending{background:#fdf6e7; border-color:#e6d5a8; color:#8a6d1f;}
.card-status.st-draft{background:#f0efec;}
.card-status.st-rejected{background:#f7ebea; border-color:#e0c2bf; color:var(--danger);}
.tag{
  display:inline-block; font-size:12.5px; padding:1px 8px; border-radius:4px;
  background:#f0efea; color:var(--muted); border:1px solid #e5e2da;
}
.empty{
  text-align:center; color:var(--muted); padding:56px 20px; font-size:15.5px;
  border:1px dashed var(--rule); border-radius:12px; background:var(--white);
}

/* -------------------------------------------------------------- 詳細 */
.detail{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start;}
@media (max-width:860px){ .detail{grid-template-columns:minmax(0,1fr);} }
.detail-head{margin-bottom:16px;}
.detail-head h1{font-size:26px; line-height:1.45; margin-bottom:8px;}
.detail-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:14.5px; color:var(--muted); align-items:center;}
.shots{display:flex; flex-direction:column; gap:14px; margin:18px 0 26px;}
.shot{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--white);}
.shot img{width:100%;}
.shot figcaption{font-size:14px; color:var(--muted); padding:7px 12px; border-top:1px solid var(--rule);}
.prose{font-size:16.5px; line-height:1.95; white-space:pre-wrap; word-break:break-word;}
.side{display:flex; flex-direction:column; gap:14px;}
.side-box{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:14px 16px;}
.side-box h3{font-size:13.5px; color:var(--muted); font-weight:600; margin-bottom:8px; letter-spacing:.04em;}
.side-box .big{font-size:20.5px; font-weight:700; line-height:1.5;}
.side-list{display:flex; flex-wrap:wrap; gap:6px;}
.like-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:11px 14px; border-radius:999px; border:1px solid var(--moss);
  background:var(--white); color:var(--moss-deep); font-size:15.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background .15s, color .15s;
}
.like-btn:hover{background:#eef3ea;}
.like-btn.on{background:var(--moss); color:var(--white);}

/* ---------------------------------------------------------- コメント */
.comment{border-top:1px solid var(--rule); padding:14px 0; display:flex; gap:12px;}
.comment:first-of-type{border-top:none;}
.avatar{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--moss); color:#fff; display:grid; place-items:center; font-size:15.5px;
}
.comment-main{flex:1; min-width:0;}
.comment-head{font-size:14px; color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.comment-head b{color:var(--text); font-size:15px;}
.comment-body{font-size:16px; line-height:1.85; white-space:pre-wrap; word-break:break-word; margin-top:2px;}

/* ------------------------------------------------------------ フォーム */
.form{background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:22px 24px;}
.form.narrow{max-width:460px; margin:40px auto;}
.field{margin-bottom:18px;}
.field > label,.field-label{display:block; font-size:14.5px; font-weight:700; margin-bottom:5px;}
.field .hint{font-size:13.5px; color:var(--muted); margin-bottom:6px; line-height:1.7;}
.field .req{color:var(--danger); font-size:12.5px; margin-left:5px;}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],select,textarea{
  width:100%; padding:9px 12px; font-size:16.5px; font-family:inherit; color:var(--text);
  border:1px solid var(--rule); border-radius:8px; background:var(--paper); line-height:1.6;
}
textarea{min-height:150px; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--moss-hi); outline-offset:1px;}
.check-grid{display:flex; flex-wrap:wrap; gap:8px;}
.check-grid label{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:1px solid var(--rule); border-radius:999px; font-size:15px; background:var(--paper); cursor:pointer;
}
.check-grid label:has(input:checked){background:#eef3ea; border-color:var(--moss); color:var(--moss-deep);}
.row2{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px;}
.btn{
  display:inline-block; padding:11px 26px; border-radius:999px; border:1px solid transparent;
  background:var(--moss); color:var(--white); font-size:16.5px; font-weight:700;
  cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn:hover{background:var(--moss-hi);}
.btn.sub{background:var(--white); color:var(--text); border-color:var(--rule);}
.btn.sub:hover{background:#f2f0ea;}
.btn.danger{background:var(--white); color:var(--danger); border-color:#e0c2bf;}
.btn.danger:hover{background:#f7ebea;}
.btn.sm{padding:6px 15px; font-size:14.5px; font-weight:600;}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--rule);}
.form-note{font-size:14px; color:var(--muted); margin-left:auto; text-align:right;}

/* 画像アップロード */
.img-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:12px;}
.img-item{border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--paper);}
.img-item img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center;}
.img-item .img-ctl{padding:7px 9px; display:flex; flex-direction:column; gap:6px;}
.img-item input[type=text]{font-size:13.5px; padding:5px 8px;}
.img-item label{font-size:13px; color:var(--danger); display:flex; gap:5px; align-items:center; cursor:pointer;}
input[type=file]{font-size:14.5px;}

/* ------------------------------------------------------------- テーブル */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.tbl{width:100%; border-collapse:collapse; background:var(--white); font-size:15px;}
table.tbl th,table.tbl td{border:1px solid var(--rule); padding:8px 11px; text-align:left; vertical-align:middle;}
table.tbl th{background:#f2f0ea; font-size:14px; color:var(--muted); font-weight:600; white-space:nowrap;}
table.tbl td.num{text-align:right; font-variant-numeric:tabular-nums;}
/* 参加者一覧から「この方を管理」で飛んできたとき、その行が目で追えるように色を付ける */
table.tbl tr:target td{background:#fdf6df;}

/* 管理→ユーザーのパスワード操作（打った文字が見える欄＋2つのボタン） */
.pw-ops{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px;}
.pw-ops form{display:flex; align-items:center; gap:4px;}
.pw-ops input[type=text]{
  width:15em; font-size:13.5px; padding:4px 7px; margin:0;
  font-family:var(--mono);
}
.tabs{display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--rule); margin-bottom:22px;}
.tabs a{padding:9px 18px; font-size:15.5px; border-radius:8px 8px 0 0; color:var(--muted);}
.tabs a.on{background:var(--white); border:1px solid var(--rule); border-bottom-color:var(--white); margin-bottom:-1px; color:var(--text); font-weight:700;}
.code{font-family:var(--mono); font-size:14px; background:#f2f0ea; padding:2px 6px; border-radius:4px; word-break:break-all;}

/* --------------------------------------------------------- ログイン */
.auth-head{text-align:center; margin-bottom:22px;}
.auth-head h1{font-size:21px; margin-bottom:6px;}
.auth-head p{font-size:14.5px; color:var(--muted);}
.auth-alt{text-align:center; font-size:14.5px; color:var(--muted); margin-top:16px;}
.auth-alt a{color:var(--moss-deep); text-decoration:underline;}

/* ---------------------------------------------------------- フッター */
.site-foot{
  flex:0 0 auto; background:var(--ink); color:var(--muted-on-ink);
  font-size:14px; padding:18px 0; margin-top:auto;
}
.foot-link{color:var(--moss-on-ink); text-decoration:underline; margin-left:12px; white-space:nowrap;}

.pager{display:flex; gap:6px; justify-content:center; margin-top:28px; flex-wrap:wrap;}
.pager a,.pager span{padding:6px 13px; border-radius:8px; border:1px solid var(--rule); font-size:14.5px; background:var(--white);}
.pager span.cur{background:var(--moss); color:#fff; border-color:var(--moss);}

@media (max-width:640px){
  .head-inner{min-height:auto; padding-top:10px; padding-bottom:10px;}
  .head-nav{margin-left:0; width:100%;}
  .grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;}
  .card-title{font-size:15.5px;}
  .form{padding:18px 16px;}
  .filter-search{margin-left:0; width:100%;}
  .filter-search input[type=search]{flex:1; max-width:none; width:auto;}
}

/* ------------------------------------------------------ 参加者一覧 */
.member-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.member-card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;
}
.member-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.member-name{font-size:16.5px; font-weight:700; color:var(--text);}
.member-badge{
  font-size:12.5px; padding:2px 8px; border-radius:999px;
  background:var(--moss); color:var(--white);
}
.member-genre{
  align-self:flex-start; font-size:13px; padding:3px 10px; border-radius:999px;
  background:#f0efea; color:var(--muted); border:1px solid #e5e2da;
}
.member-info{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px;
  font-size:14.5px; line-height:1.7; margin:0;
}
.member-info dt{color:var(--muted); font-size:13px; white-space:nowrap; padding-top:2px;}
.member-info dd{margin:0; overflow-wrap:anywhere;}
.member-foot{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--rule); font-size:14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.member-none{color:var(--muted);}
/* 管理者にだけ出る「この方を管理」。会員には見えないので控えめでよい */
.member-admin{font-size:13px; color:var(--muted); white-space:nowrap;}
.filter-note{
  font-size:14.5px; color:var(--muted); margin:-12px 0 18px;
}
.filter-note a{margin-left:10px;}

/* ------------------------------------------ はじめにお読みください */
.wel{max-width:720px; margin:0 auto;}
.wel a{color:var(--moss-deep); text-decoration:underline;}
.wel a.btn{color:var(--white); text-decoration:none;}
.wel a.btn.sub{color:var(--text);}

.wel-hero{padding-bottom:26px; border-bottom:1px solid var(--rule);}
.wel-eyebrow{
  font-family:var(--mono); font-size:13px; letter-spacing:.18em;
  color:var(--muted); margin-bottom:12px;
}
.wel-hero h1{
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  font-size:28px; line-height:1.65; letter-spacing:.01em; font-weight:600;
}
.wel-lead{margin-top:14px; font-size:16.5px; color:var(--muted); line-height:1.95;}

.wel-sec{padding:30px 0; border-bottom:1px solid var(--rule);}
.wel-sec-last{border-bottom:none;}
.wel-sec h2{font-size:19.5px; line-height:1.6; margin-bottom:14px;}
.wel-sec p{font-size:16.5px; line-height:1.95;}
.wel-sec p + p{margin-top:12px;}
.wel-note{font-size:15px !important; color:var(--muted); line-height:1.9 !important;}

.wel-list{list-style:none; margin-top:6px;}
.wel-list li{
  font-size:16.5px; line-height:1.9; padding:11px 0 11px 20px; position:relative;
  border-top:1px solid var(--rule);
}
.wel-list li:first-child{border-top:none;}
.wel-list li::before{
  content:""; position:absolute; left:2px; top:20px;
  width:6px; height:6px; border-radius:50%; background:var(--moss);
}
.wel-list-rule li::before{border-radius:1px; background:var(--clay);}

.wel-step{display:flex; gap:18px; padding:16px 0;}
.wel-step + .wel-step{border-top:1px dashed var(--rule);}
.wel-step-n{
  flex:0 0 58px; font-family:var(--mono); font-size:16.5px !important;
  color:var(--moss); letter-spacing:.06em; padding-top:2px;
}
.wel-step-n span{display:block; font-size:12.5px; color:var(--muted); letter-spacing:.04em; margin-top:3px;}
.wel-step-body{flex:1; min-width:0;}
.wel-step-body h3{font-size:17px; margin-bottom:6px;}
.wel-step-body p{font-size:16px; line-height:1.9;}
.wel-step-body .btn{margin-top:10px;}

.wel-template{
  background:var(--white); border:1px solid var(--rule); border-radius:10px;
  padding:14px 16px; margin-top:12px;
}
.wel-template pre{
  font-family:inherit; font-size:15.5px; line-height:1.95;
  white-space:pre-wrap; word-break:break-word; margin-bottom:12px;
}
.wel-copied{font-size:14px; color:var(--moss-deep); margin-left:10px;}

.wel-promise{
  margin-top:22px; padding:20px 22px; background:var(--white);
  border:1px solid var(--moss); border-radius:12px;
  font-size:18px !important; line-height:1.85 !important;
  color:var(--moss-deep); font-weight:700;
}

@media (max-width:640px){
  .wel-hero h1{font-size:23px;}
  .wel-step{gap:12px;}
  .wel-step-n{flex-basis:44px; font-size:15.5px !important;}
}

/* -------------------------------------------- AI活用レベルの分布（推計） */
.dist{max-width:860px; margin:0 auto;}
.dist a{color:var(--moss-deep); text-decoration:underline;}
.dist a.btn{color:var(--white); text-decoration:none;}
.dist a.btn.sub{color:var(--text);}   /* これが無いと白背景に白文字で消える */

.dist-hero{padding-bottom:28px; border-bottom:1px solid var(--rule);}
.dist-eyebrow{
  font-size:13.5px; letter-spacing:.16em; color:var(--moss-deep);
  font-weight:700; margin-bottom:12px;
}
.dist-hero h1{font-size:28px; line-height:1.55; letter-spacing:.01em;}
.dist-lead{margin-top:14px; font-size:16.5px; color:var(--muted); line-height:1.95; max-width:640px;}

.dist-stats{margin-top:26px; display:flex; gap:20px 44px; flex-wrap:wrap; align-items:flex-end;}
.dist-stats > div{max-width:300px;}
.dist-num{
  display:block; font-size:41px; line-height:1.15; font-weight:700;
  color:var(--danger); letter-spacing:-.01em;
}
.dist-num-sub{font-size:28px; color:var(--moss-deep);}
.dist-cap{display:block; margin-top:6px; font-size:14px; color:var(--muted); line-height:1.75;}

.dist-sec{padding:32px 0; border-bottom:1px solid var(--rule);}
.dist-sec-last{border-bottom:none;}
.dist-label{
  font-size:13px; letter-spacing:.18em; color:var(--muted);
  font-weight:700; margin-bottom:8px;
}
.dist-sec h2{font-size:20.5px; line-height:1.6; margin-bottom:14px;}
.dist-sec > p{font-size:16.5px; line-height:1.95; max-width:660px;}
.dist-sec > p + p{margin-top:12px;}
.dist-sec strong{color:var(--moss-deep);}
.dist-note{font-size:14.5px !important; color:var(--muted); line-height:1.9 !important; margin-top:14px;}

/* ※ 10,000社のワッフルチャート（.dist-waffle / .dist-legend / .dist-sw / .dist-callout）は
      2026-07-26 にページごと撤去したため、CSSも一緒に削除した。 */

/* レベル一覧 */
.dist-levels{margin-top:6px;}
.dist-lv{
  display:grid; grid-template-columns:104px 1fr 168px; gap:16px;
  align-items:start; padding:18px 0; border-top:1px solid var(--rule);
}
.dist-lv:last-child{border-bottom:1px solid var(--rule);}
.dist-lv-tag{font-size:20.5px; font-weight:700; line-height:1.3; color:var(--moss-deep);}
.dist-lv-tag small{
  display:block; margin-top:3px; font-size:12.5px; font-weight:500;
  letter-spacing:.04em; color:var(--muted); line-height:1.6;
}
.dist-lv-body{min-width:0;}
.dist-lv-name{font-size:16.5px; font-weight:700; margin-bottom:4px;}
.dist-lv-desc{font-size:15.5px; color:var(--muted); line-height:1.85;}
.dist-lv-share{text-align:right;}
.dist-lv-pct{display:block; font-size:22px; font-weight:700; line-height:1.2;}
.dist-lv-ratio{display:block; margin-top:2px; font-size:13.5px; color:var(--muted);}
.dist-lv-bar{
  display:block; height:6px; margin-top:8px; border-radius:3px;
  background:#EDEBE4; overflow:hidden;
}
.dist-lv-bar i{display:block; height:100%; border-radius:3px;}
.dist-lv.is-hot .dist-lv-tag,
.dist-lv.is-hot .dist-lv-pct{color:var(--danger);}

/* 3→4の谷 */
.dist-valley{
  margin-top:18px; padding:30px 28px; border-radius:12px;
  background:var(--ink); color:var(--text-on-ink);
}
.dist-valley svg{width:100%; height:auto; display:block; margin-bottom:18px;}
.dist-valley h3{font-size:19.5px; line-height:1.65; color:var(--white); margin-bottom:14px;}
.dist-valley p{font-size:16px; line-height:2; max-width:640px;}
.dist-valley p + p{margin-top:12px;}
.dist-valley em{
  font-style:normal; font-weight:700; color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.42);
}

/* 根拠カード */
.dist-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:6px;}
.dist-card{
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  padding:20px 20px 18px;
}
.dist-card-src{font-size:12.5px; letter-spacing:.06em; color:var(--muted); font-weight:700; line-height:1.7;}
.dist-card-fig{margin-top:10px; font-size:29px; font-weight:700; line-height:1.2; color:var(--moss-deep);}
.dist-card-cap{margin-top:2px; font-size:14.5px; font-weight:700; line-height:1.7;}
.dist-card-txt{margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.9;}

/* 前提と限界 */
.dist-method{list-style:none; margin-top:4px;}
.dist-method li{
  position:relative; padding:10px 0 10px 18px; font-size:15.5px;
  color:var(--muted); line-height:1.9; border-top:1px solid var(--rule);
}
.dist-method li:first-child{border-top:none;}
.dist-method li::before{
  content:""; position:absolute; left:0; top:19px;
  width:6px; height:6px; border-radius:50%; background:var(--moss);
}
.dist-sources{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--rule);
  font-size:14px !important; color:var(--muted); line-height:1.95 !important;
}

@media (max-width:700px){
  .dist-hero h1{font-size:22px;}
  .dist-num{font-size:33px;}
  .dist-num-sub{font-size:23px;}
  .dist-lv{grid-template-columns:76px 1fr; gap:12px;}
  .dist-lv-share{grid-column:2; text-align:left; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
  .dist-lv-bar{flex:1 1 100%; margin-top:6px;}
  .dist-cards{grid-template-columns:1fr;}
  .dist-valley{padding:24px 18px;}
}

/* ------------------------------------------------ 読み物（level-order） */
.esy{max-width:800px; margin:0 auto;}
.esy a{color:var(--moss-deep); text-decoration:underline;}
.esy a.btn{color:var(--white); text-decoration:none;}
.esy a.btn.sub{color:var(--text);}   /* これが無いと白背景に白文字で消える */

.esy-hero{padding-bottom:26px; border-bottom:1px solid var(--rule);}
.esy-hero h1{font-size:29px; line-height:1.55; letter-spacing:.01em; margin-top:8px;}
.esy-lead{margin-top:16px; font-size:16.5px; color:var(--muted); line-height:1.95;}

.esy-sec{padding:32px 0; border-bottom:1px solid var(--rule);}
.esy-sec-last{border-bottom:none;}
.esy-sec h2{font-size:21px; line-height:1.6; margin-bottom:16px;}
.esy-sec > p{font-size:17px; line-height:2;}
.esy-sec > p + p{margin-top:14px;}
.esy-sec strong{color:var(--moss-deep);}
.esy-note{margin-top:16px; font-size:14.5px !important; color:var(--muted); line-height:1.9 !important;}

/* 冒頭のレベル表 */
.esy-ladder{margin:4px 0 2px; border-top:1px solid var(--rule);}
.esy-rung{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 12px; border-bottom:1px solid var(--rule);
  border-left:5px solid var(--lc); background:var(--white);
}
.esy-rung-n{
  flex:0 0 52px; font-family:var(--mono); font-size:15.5px; font-weight:700;
  color:var(--lc); letter-spacing:.02em;
}
.esy-rung-b{flex:1 1 240px; min-width:0;}
.esy-rung-t{display:block; font-size:16.5px; font-weight:700; line-height:1.5;}
.esy-rung-s{display:block; margin-top:2px; font-size:13.5px; color:var(--muted); line-height:1.7;}
.esy-rung-flag{
  flex:0 0 auto; font-size:13px; font-weight:700; color:var(--danger);
  border:1px dashed var(--danger); border-radius:999px; padding:3px 11px; background:#fdf6f5;
}
.esy-rung.is-target{background:#fdf6f5;}

/* この記事の問い */
.esy-q{
  margin:28px 0 0; padding:26px 26px 24px; border-radius:12px;
  background:var(--ink); color:var(--text-on-ink);
}
.esy-q-l{font-size:12.5px; letter-spacing:.18em; color:var(--muted-on-ink); font-weight:700;}
.esy-q-t{margin-top:10px; font-size:21px; font-weight:700; line-height:1.65; color:var(--white);}
.esy-q-d{margin-top:12px; font-size:16px; line-height:1.95;}

/* 一言でまとめる行 */
.esy-kicker{
  margin:18px 0; padding:16px 20px; background:var(--white);
  border:1px solid var(--moss); border-left:5px solid var(--moss); border-radius:10px;
  font-size:19px !important; font-weight:700; line-height:1.8 !important; color:var(--moss-deep);
}
.esy-kicker-sm{font-size:17.5px !important;}

.esy-list{list-style:none; margin:14px 0;}
.esy-list li{
  position:relative; padding:5px 0 5px 20px; font-size:16.5px; line-height:1.9;
}
.esy-list li::before{
  content:""; position:absolute; left:3px; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--moss);
}
.esy-list-warn li::before{background:var(--danger); border-radius:1px;}

.esy-steps{list-style:none; counter-reset:esy; margin:14px 0;}
.esy-steps li{
  position:relative; padding:7px 0 7px 38px; font-size:16.5px; line-height:1.9;
  counter-increment:esy;
}
.esy-steps li::before{
  content:counter(esy); position:absolute; left:0; top:9px;
  width:25px; height:25px; border-radius:50%; background:var(--moss); color:var(--white);
  font-size:13.5px; font-weight:700; line-height:25px; text-align:center;
}

/* レベル1〜3で身につくもの */
.esy-gain{
  margin-top:18px; padding:20px 22px; background:var(--white);
  border:1px solid var(--rule); border-radius:12px;
}
.esy-gain p{font-size:16.5px; line-height:1.95;}
.esy-gain-h{
  font-size:17.5px !important; font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.esy-gain-n{
  font-family:var(--mono); font-size:14px; font-weight:700; color:var(--white);
  background:var(--moss); border-radius:6px; padding:2px 9px; letter-spacing:.02em;
}

/* レベル4に必要な3つの資産 */
.esy-assets{margin-top:6px;}
.esy-asset{padding:20px 0; border-top:1px solid var(--rule);}
.esy-asset p{font-size:16.5px; line-height:1.95;}
.esy-asset p + p{margin-top:10px;}
.esy-asset-h{
  font-size:18px !important; font-weight:700; margin-bottom:10px;
  display:flex; align-items:center; gap:11px;
}
.esy-asset-n{
  flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--clay); color:var(--white);
  font-size:14.5px; font-weight:700;
}

/* 読者への語りかけ */
.esy-talk{
  padding:24px 26px; background:var(--white);
  border:1px solid var(--rule); border-left:5px solid var(--clay); border-radius:12px;
}
.esy-talk p{font-size:17px; line-height:2;}
.esy-talk p + p{margin-top:14px;}

.esy-summary{list-style:none; margin:6px 0 20px;}
.esy-summary li{
  position:relative; padding:11px 0 11px 26px; font-size:16.5px; line-height:1.9;
  border-top:1px solid var(--rule);
}
.esy-summary li:last-child{border-bottom:1px solid var(--rule);}
.esy-summary li::before{
  content:"✓"; position:absolute; left:2px; top:11px;
  font-size:14.5px; font-weight:700; color:var(--moss);
}

@media (max-width:640px){
  .esy-hero h1{font-size:23px;}
  .esy-q{padding:20px 18px;}
  .esy-q-t{font-size:18.5px;}
  .esy-kicker{padding:14px 16px; font-size:17.5px !important;}
  .esy-kicker-sm{font-size:16.5px !important;}
  .esy-gain, .esy-talk{padding:18px 16px;}
  .esy-rung-flag{font-size:12.5px;}
}

/* 見出しの連番（vps-stack の「1.〜7.」） */
.esy-sec h2 .esy-n{
  display:inline-grid; place-items:center; width:29px; height:29px; margin-right:11px;
  vertical-align:-5px; border-radius:50%; background:var(--moss); color:var(--white);
  font-family:var(--mono); font-size:15px; font-weight:700; line-height:1;
}

/* 4要素の並び（VPS / MySQL / PHP / AI） */
.esy-quad{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0 4px;
}
.esy-quad-i{
  display:flex; flex-direction:column; gap:6px; padding:16px 14px;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--moss);
  border-radius:10px;
}
.esy-quad-n{
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--moss); text-transform:uppercase;
}
.esy-quad-t{font-size:15.5px; font-weight:700; line-height:1.6;}
.esy-quad-r{font-size:14.5px; color:var(--muted); line-height:1.75;}
.esy-quad-role .esy-quad-i{border-top-color:var(--clay);}
.esy-quad-role .esy-quad-n{color:var(--clay);}

@media (max-width:640px){
  .esy-quad{grid-template-columns:repeat(2,1fr); gap:10px;}
  .esy-quad-i{padding:14px 12px;}
  .esy-sec h2 .esy-n{width:26px; height:26px; font-size:14px; margin-right:9px; vertical-align:-4px;}
}

/* ------------------------------------------ セルフ判定（level-check） */
.chk-cost{margin-top:14px; font-size:15px; color:var(--muted);}

.chk-steps{margin-top:6px;}
.chk-step{display:flex; gap:18px; padding:16px 0;}
.chk-step + .chk-step{border-top:1px dashed var(--rule);}
.chk-step-n{
  flex:0 0 54px; font-size:18.5px; font-weight:700; color:var(--moss); line-height:1.4;
}
.chk-step h3{font-size:17px; margin-bottom:6px;}
.chk-step p{font-size:16px; line-height:1.9; color:var(--muted);}
.chk-step strong{color:var(--moss-deep);}

/* プロンプト */
.chk-prompt{
  border:1px solid var(--rule); border-radius:12px; background:var(--white);
  overflow:hidden; margin-top:6px;
}
.chk-prompt-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--rule); background:#F4F2EC;
}
.chk-copied{font-size:14.5px; color:var(--moss-deep); font-weight:700;}
.chk-prompt pre{
  margin:0; padding:16px 18px; max-height:420px; overflow-y:auto;
  font-family:var(--mono); font-size:14px; line-height:1.85; color:var(--ink-soft);
  white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
}

/* 判定サマリ */
.chk-summary{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 6px;
}
.chk-sum{
  background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:16px 14px;
}
.chk-sum.is-hot{border-color:var(--moss); background:#F3F6F0;}
.chk-sum-l{font-size:13px; color:var(--muted); font-weight:700; letter-spacing:.04em;}
.chk-sum-v{margin-top:4px; font-size:23px; font-weight:700; line-height:1.25; color:var(--moss-deep);}
.chk-sum.is-hot .chk-sum-v{color:var(--danger);}
.chk-sum-n{margin-top:6px; font-size:13px; color:var(--muted); line-height:1.7;}

.chk-quote{
  margin-top:16px; padding:20px 22px; border-radius:12px;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--moss);
}
.chk-quote p{font-size:16px; line-height:1.95; color:var(--ink-soft);}
.chk-quote p + p{margin-top:12px;}

.chk-h3{font-size:17.5px; margin:30px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--rule);}

/* レベル別テーブル */
.chk-table-wrap{overflow-x:auto; margin-top:6px;}
.chk-table{width:100%; border-collapse:collapse; font-size:15px; min-width:0;}
.chk-table th{
  text-align:left; font-size:13px; letter-spacing:.04em; color:var(--muted);
  padding:8px 10px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.chk-table td{padding:12px 10px; border-bottom:1px solid var(--rule); vertical-align:top;}
.chk-td-lv{font-weight:700; white-space:nowrap;}
.chk-td-lv span{
  display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--muted);
  white-space:normal;
}
.chk-td-body{color:var(--muted); line-height:1.85;}
.chk-badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:13px; font-weight:700; white-space:nowrap;
}
.chk-badge-ok{background:#E7EFE2; color:var(--moss-deep);}
.chk-badge-warn{background:#F5EEE2; color:#7A5A32;}
.chk-badge-no{background:#EFEDE8; color:var(--muted);}

/* 業務別 */
.chk-bywork{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:8px; margin-top:12px;
}
.chk-bw{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 14px; background:var(--white); border:1px solid var(--rule); border-radius:8px;
  font-size:15px;
}
.chk-bw b{color:var(--moss-deep); white-space:nowrap;}

/* 最大の課題 */
.chk-issue{
  margin-top:6px; padding:22px 24px; border-radius:12px;
  background:var(--ink); color:var(--text-on-ink);
}
.chk-issue-t{font-size:18px; font-weight:700; color:var(--white); margin-bottom:12px;}
.chk-issue p{font-size:16px; line-height:1.95;}
.chk-issue p + p{margin-top:12px;}
.chk-issue em{
  font-style:normal; font-weight:700; color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.42);
}

.chk-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}

/* 分布ページ → 判定ページ への導線 */
.dist-jump{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:26px; padding:18px 22px; border-radius:12px;
  background:var(--white); border:1px solid var(--moss);
}
.dist-jump-body{flex:1 1 300px; min-width:0;}
.dist-jump-t{font-size:16.5px; font-weight:700; line-height:1.6;}
.dist-jump-d{margin-top:4px; font-size:14.5px; color:var(--muted); line-height:1.8;}
.dist-jump .btn{flex:0 0 auto;}
.dist-jump-lg{padding:26px 26px; margin-top:18px;}
.dist-jump-lg .dist-jump-t{font-size:18.5px;}

@media (max-width:700px){
  .chk-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chk-step{gap:12px;}
  .chk-step-n{flex-basis:38px; font-size:16.5px;}
  .chk-prompt pre{font-size:13.5px; max-height:340px;}
  .chk-table{font-size:14.5px;}
  .chk-issue{padding:20px 18px;}
}

/* ============================================ トップページ（index.php） */
.top{max-width:900px; margin:0 auto;}
.top a{color:var(--moss-deep);}
.top a.btn{color:var(--white);}
.top a.btn.sub{color:var(--text);}

.top-hero{padding:14px 0 30px; border-bottom:1px solid var(--rule);}
.top-eyebrow{
  font-size:13.5px; letter-spacing:.2em; color:var(--moss-deep); font-weight:700; margin-bottom:14px;
}
.top-hero h1{font-size:31px; line-height:1.55; letter-spacing:.01em;}
.top-sub{margin-top:14px; font-size:16.5px; color:var(--muted);}
.top-facts{
  margin-top:10px; font-family:var(--mono); font-size:13.5px;
  letter-spacing:.08em; color:var(--muted);
}

/* 会員向けの帯 */
.top-member{
  margin-top:24px; padding:20px 22px; border-radius:12px;
  background:var(--white); border:1px solid var(--moss);
}
.top-member-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.top-member-hi{flex:1 1 auto; font-size:16.5px; font-weight:700;}
.top-new{list-style:none; margin-top:14px; border-top:1px solid var(--rule);}
.top-new li{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:15.5px;
}
.top-new li a{display:flex; align-items:baseline; gap:8px; flex:1 1 auto; min-width:0;}
.top-new-cat{
  flex:0 0 auto; font-size:12.5px; padding:1px 7px; border-radius:999px;
  background:#EDF1E9; color:var(--moss-deep);
}
.top-new-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.top-new time{flex:0 0 auto; font-size:13.5px; color:var(--muted);}

.top-sec{padding:34px 0; border-bottom:1px solid var(--rule);}
.top-sec-last{border-bottom:none;}
.top-sec-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
.top-sec-head > div{flex:1 1 auto;}
.top-more{font-size:14.5px; text-decoration:underline; white-space:nowrap;}
.top-label{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.2em;
  color:var(--muted); font-weight:700; margin-bottom:8px;
}
.top-sec h2{font-size:21px; line-height:1.6; margin-bottom:12px;}
.top-lead{font-size:16.5px; line-height:1.95; max-width:660px; color:var(--ink-soft);}
.top-lead strong{color:var(--moss-deep);}
.top-note{margin-top:12px; font-size:15px; color:var(--muted); line-height:1.9;}
.top-note a{text-decoration:underline;}

/* コンテンツカード */
.top-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px; margin-top:18px;
}
.top-card{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 20px; background:var(--white);
  border:1px solid var(--rule); border-radius:12px;
  transition:border-color .15s, transform .15s;
}
.top-card:hover{border-color:var(--moss); transform:translateY(-2px);}
.top-card-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.top-card-kind{
  align-self:flex-start; font-size:12.5px; padding:2px 9px; border-radius:999px;
  background:#EDF1E9; color:var(--moss-deep); font-weight:700;
}
.top-card-auth{
  font-size:12.5px; padding:2px 9px; border-radius:999px;
  background:#F7EBEA; color:var(--danger); font-weight:700;
}
.top-card-date{font-size:12.5px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em;}
.top-card-t{font-size:16.5px; font-weight:700; line-height:1.6; color:var(--text);}
.top-card-l{font-size:14.5px; color:var(--muted); line-height:1.85;}

/* 実例集の数字 */
.top-stats{display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 6px;}
.top-stats > div{
  flex:1 1 170px; padding:16px 18px; background:var(--white);
  border:1px solid var(--rule); border-radius:12px;
}
.top-stats b{display:block; font-size:25px; line-height:1.25; color:var(--moss-deep);}
.top-stats span{display:block; margin-top:4px; font-size:13.5px; color:var(--muted); line-height:1.7;}

/* 90分の内訳 */
.top-agenda{margin-top:14px;}
.top-ag{display:flex; gap:18px; padding:14px 0;}
.top-ag + .top-ag{border-top:1px dashed var(--rule);}
.top-ag-n{
  flex:0 0 66px; font-size:17.5px; font-weight:700; color:var(--moss); line-height:1.4;
}
.top-ag-n span{display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--muted);}
.top-ag h3{font-size:16.5px; margin-bottom:4px;}
.top-ag p{font-size:15.5px; color:var(--muted); line-height:1.9;}

.top-promise{
  margin-top:20px; padding:20px 22px; background:var(--white);
  border:1px solid var(--moss); border-radius:12px;
  font-size:18px; line-height:1.85; color:var(--moss-deep); font-weight:700;
}

.top-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}

/* ヘッダーのログインリンク（未ログイン時） */
.head-login{
  font-size:14.5px; color:var(--white) !important;
  background:var(--moss); padding:6px 14px !important; border-radius:999px;
}

/* ==================================== コンテンツ一覧（contents.php） */
.cnt{max-width:820px; margin:0 auto;}
.cnt-head{padding-bottom:22px; border-bottom:1px solid var(--rule);}
.cnt-head h1{font-size:25px; line-height:1.5;}
.cnt-lead{margin-top:12px; font-size:16px; color:var(--muted); line-height:1.95;}

/* 「初めての方へ／読む順番ガイド」への誘導バナー */
.cnt-guide{
  display:flex; align-items:center; gap:16px;
  margin-top:20px; padding:20px 22px;
  background:var(--moss); color:var(--white);
  border-radius:14px; box-shadow:var(--shadow);
  transition:background .15s, transform .15s;
}
.cnt-guide:hover{background:var(--moss-hi); transform:translateY(-2px);}
.cnt-guide-b{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px;}
.cnt-guide-l{
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  color:var(--moss-on-ink);
}
.cnt-guide-t{font-size:18.5px; font-weight:700; line-height:1.55; color:var(--white);}
.cnt-guide-d{font-size:14.5px; line-height:1.85; color:var(--text-on-ink);}
.cnt-guide-go{flex:0 0 auto; font-size:22px; color:var(--white);}
@media (max-width:700px){
  .cnt-guide{padding:16px 18px; gap:12px;}
  .cnt-guide-t{font-size:16.5px;}
}
/* トップのヒーロー直下に置くとき（index.php）だけ、余白を少し広く */
.top-guide{margin-top:24px;}

.cnt-filter{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:20px 0 6px;}
.chip-n{margin-left:6px; font-size:12.5px; opacity:.75;}

.cnt-list{margin-top:8px;}
.cnt-item{
  display:flex; align-items:center; gap:16px;
  padding:20px 20px; margin-bottom:12px;
  background:var(--white); border:1px solid var(--rule); border-radius:12px;
  transition:border-color .15s, transform .15s;
}
.cnt-item:hover{border-color:var(--moss); transform:translateY(-2px);}
.cnt-item-main{flex:1 1 auto; min-width:0;}
.cnt-item-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.cnt-item-meta time{font-size:13px; color:var(--muted); font-family:var(--mono);}
.cnt-kind{
  font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:999px;
  background:#EDF1E9; color:var(--moss-deep);
}
.cnt-kind-tool{background:#EFE9E1; color:#7A5A32;}
.cnt-kind-info{background:#EDEDE8; color:var(--muted);}
.cnt-auth{
  font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:999px;
  background:#F7EBEA; color:var(--danger);
}
.cnt-ext{font-size:12.5px; color:var(--muted); border:1px solid var(--rule); padding:1px 8px; border-radius:999px;}
.cnt-item-t{font-size:17.5px; font-weight:700; line-height:1.6; color:var(--text);}
.cnt-item-l{margin-top:6px; font-size:15px; color:var(--muted); line-height:1.9;}
.cnt-item-lock{margin-top:8px; font-size:14px; color:var(--danger);}
.cnt-item-go{flex:0 0 auto; font-size:19.5px; color:var(--moss);}
.cnt-item.is-locked{background:#FAF9F5;}
.cnt-item.is-locked .cnt-item-t{color:var(--muted);}

.cnt-foot{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:14.5px; color:var(--muted); line-height:1.9;
}

@media (max-width:700px){
  .top-hero h1{font-size:24px;}
  .top-sec h2{font-size:19.5px;}
  .top-ag{gap:12px;}
  .top-ag-n{flex-basis:52px; font-size:15.5px;}
  .top-promise{font-size:16.5px;}
  .top-stats > div{flex:1 1 100%;}
  .cnt-item{padding:16px; gap:10px;}
  .cnt-item-t{font-size:16.5px;}
}

/* =============================== 読む順番ガイド（start-guide.php） */
/* 章の説明文（見出し h2 の直後）。.esy-sec > p より少し落ち着いた見た目 */
.rg-lead{font-size:16px; color:var(--muted); line-height:1.95; margin-bottom:16px;}
.rg-list{margin-top:0;}
/* カード左の通し番号バッジ。.cnt-item（display:flex）の先頭に置く */
.rg-n{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--moss); color:var(--white);
  font-family:var(--mono); font-size:16px; font-weight:700; line-height:1;
}
.cnt-item.is-locked .rg-n{background:var(--muted);}
.rg-closing > p{font-size:17px; line-height:2;}

/* 章の目次。記事が増えて縦に長くなったので、全体像を先に見せて各章へ飛べるようにする */
.rg-toc{
  margin:0 0 34px; padding:20px 22px;
  background:var(--white); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow);
}
.rg-toc-h{font-size:12.5px; letter-spacing:.14em; color:var(--muted); margin-bottom:10px;}
.rg-toc-list{list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px;}
.rg-toc-list a{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 6px; border-bottom:1px solid var(--rule);
}
.rg-toc-list a:hover{background:var(--paper);}
.rg-toc-l{flex:0 0 auto; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--moss);}
.rg-toc-t{flex:1 1 auto; min-width:0; font-size:16px; line-height:1.7;}
.rg-toc-c{flex:0 0 auto; font-size:13px; color:var(--muted); font-family:var(--mono);}
/* 目次から飛んだとき、見出しが画面の上端に貼り付かないように少し余白を残す */
.esy-sec[id]{scroll-margin-top:20px;}

@media (max-width:700px){
  .rg-n{width:30px; height:30px; font-size:15px;}
  .rg-toc{padding:16px;}
  .rg-toc-list{grid-template-columns:1fr; gap:0;}
  .rg-toc-t{font-size:15.5px;}
}

/* ================================ AI活用レベルの詳しい説明（levels.php） */
.lvp{max-width:880px; margin:0 auto;}
.lvp a{color:var(--moss-deep);}
.lvp a.btn{color:var(--white); text-decoration:none;}
.lvp a.btn.sub{color:var(--text);}

.lvp-hero{padding-bottom:26px; border-bottom:1px solid var(--rule);}
.lvp-hero h1{font-size:28px; line-height:1.55;}
.lvp-lead{margin-top:14px; font-size:16.5px; line-height:1.95; color:var(--ink-soft); max-width:680px;}
.lvp-lead strong{color:var(--moss-deep);}
.lvp-note{margin-top:12px; font-size:14.5px; color:var(--muted); line-height:1.9;}
.lvp-note a{text-decoration:underline;}

.lvp-sec{padding:34px 0; border-bottom:1px solid var(--rule);}
.lvp-sec-last{border-bottom:none;}
.lvp-sec h2{font-size:21px; line-height:1.6; margin-bottom:10px;}

/* 全体像のはしご */
.lvp-ladder{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin-top:16px;
}
.lvp-rung{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 14px; border-radius:10px;
  background:var(--lc); color:#fff !important;
  transition:transform .15s, filter .15s;
}
.lvp-rung:hover{transform:translateY(-2px); filter:brightness(1.08);}
.lvp-rung-n{font-family:var(--mono); font-size:12.5px; font-weight:700; opacity:.9;}
.lvp-rung-s{font-size:15px; font-weight:700; line-height:1.4;}
.lvp-rung-r{font-size:12.5px; opacity:.92;}

.lvp-purpose{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px; margin-top:18px;
}
.lvp-purpose > div{
  background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:16px 18px;
}
.lvp-purpose-k{font-size:14px; font-weight:700; color:var(--moss-deep); margin-bottom:5px;}
.lvp-purpose p{font-size:15px; color:var(--muted); line-height:1.9;}

/* 5軸の表 */
.lvp-table-wrap{overflow-x:auto; margin-top:12px;}
.lvp-table{width:100%; border-collapse:collapse; font-size:15.5px; background:var(--white);}
.lvp-table th{
  text-align:left; font-size:13px; color:var(--muted); font-weight:700;
  padding:10px 14px; border-bottom:2px solid var(--rule); white-space:nowrap;
}
.lvp-table td{padding:13px 14px; border-bottom:1px solid var(--rule); vertical-align:top;}
.lvp-table tr:last-child td{border-bottom:none;}
.lvp-td-ax{font-weight:700; white-space:nowrap;}
.lvp-td-sp{font-weight:700; color:var(--moss-deep); white-space:nowrap;}

/* レベル別の詳細 */
.lvp-detail{
  background:var(--white); border:1px solid var(--rule); border-left:5px solid var(--lc);
  border-radius:12px; padding:20px 22px; margin-top:14px; scroll-margin-top:20px;
}
.lvp-detail-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.lvp-badge{
  flex:0 0 auto; display:grid; place-items:center; min-width:52px; height:44px; padding:0 10px;
  border-radius:10px; background:var(--lc); color:#fff;
  font-family:var(--mono); font-size:15.5px; font-weight:700;
}
.lvp-detail-ht{flex:1 1 auto; min-width:0;}
.lvp-detail-t{font-size:18.5px; font-weight:700; line-height:1.5;}
.lvp-detail-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:5px;}
.lvp-chip-role{
  font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px;
  background:#EDF1E9; color:var(--moss-deep);
}
.lvp-chip-period{
  font-size:13px; padding:2px 10px; border-radius:999px;
  border:1px solid var(--rule); color:var(--muted);
}
.lvp-detail-line{margin-top:14px; font-size:16px; line-height:1.9; font-weight:700;}

.lvp-wall{
  margin-top:12px; padding:10px 14px; border-radius:8px;
  background:#F8EDEB; border:1px dashed #D6A9A3;
  font-size:14.5px; color:var(--danger); line-height:1.85;
}
.lvp-wall b{font-weight:700;}

.lvp-blk{margin-top:14px;}
.lvp-blk-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.lvp-blk-h{
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--moss-deep); margin-bottom:6px;
  padding-left:9px; border-left:3px solid var(--moss);
}
.lvp-blk-need{color:#3F6B52; border-left-color:#3F6B52;}
.lvp-blk-pit{color:#8A6224; border-left-color:#C69A4A;}
.lvp-blk-next{color:var(--moss-deep); border-left-color:var(--moss);}
.lvp-blk ul{list-style:none; margin:0;}
.lvp-blk li{
  position:relative; padding-left:15px; font-size:15px; color:var(--muted); line-height:1.85; margin:3px 0;
}
.lvp-blk li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:5px; height:5px; border-radius:50%; background:var(--lc);
}
.lvp-blk p{font-size:15px; color:var(--muted); line-height:1.9;}

.lvp-next{
  margin-top:14px; padding:14px 16px; border-radius:10px; background:#F4F6F1;
}
.lvp-next p{font-size:15px; color:var(--ink-soft); line-height:1.9;}

/* 5原則 */
.lvp-principles{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px; margin-top:14px;
}
@media (max-width:860px){ .lvp-principles{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:560px){ .lvp-principles{grid-template-columns:repeat(2,minmax(0,1fr));} }
.lvp-principle{
  background:var(--white); border:1px solid var(--rule); border-radius:12px; padding:16px 16px;
}
.lvp-principle-n{
  display:grid; place-items:center; width:24px; height:24px; border-radius:7px;
  background:#EDF1E9; color:var(--moss-deep);
  font-family:var(--mono); font-size:13.5px; font-weight:700; margin-bottom:8px;
}
.lvp-principle-t{font-size:15px; font-weight:700; margin-bottom:4px; line-height:1.6;}
.lvp-principle-d{font-size:14px; color:var(--muted); line-height:1.85;}

@media (max-width:700px){
  .lvp-hero h1{font-size:22px;}
  .lvp-sec h2{font-size:19.5px;}
  .lvp-detail{padding:16px 16px 18px;}
  .lvp-detail-t{font-size:17px;}
  .lvp-table{font-size:14.5px;}
}

/* =========================================================================
   読み物 setup-claude-code.php 専用（.esy を共用。新規名前空間は増やさない）
   ・手作業ゾーン／おまかせゾーンの対比 … .esy-zones / .esy-zone*
   ・Claudeへの頼み方の例文             … .esy-ask*
   ========================================================================= */
.esy-zones{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 4px;}
.esy-zone{
  padding:20px 20px 18px; background:var(--white);
  border:1px solid var(--rule); border-radius:12px;
}
.esy-zone-hand{border-top:4px solid var(--clay);}
.esy-zone-auto{border-top:4px solid var(--moss);}
.esy-zone-chat{border-top:4px solid var(--muted);}   /* チャット（作業しない側） */
.esy-zone-code{border-top:4px solid var(--moss);}    /* Code（作業する側） */
.esy-zone-l{
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.12em; color:var(--muted);
}
.esy-zone-hand .esy-zone-l{color:var(--clay);}
.esy-zone-auto .esy-zone-l{color:var(--moss);}
.esy-zone-code .esy-zone-l{color:var(--moss);}
.esy-zone-h{margin-top:8px; font-size:18px; font-weight:700; line-height:1.6;}
.esy-zone-d{margin-top:10px; font-size:15.5px; color:var(--muted); line-height:1.9;}

.esy-ask{
  margin:14px 0; padding:16px 20px; background:var(--white);
  border:1px solid var(--rule); border-left:5px solid var(--moss); border-radius:10px;
}
.esy-ask-l{
  font-family:var(--mono); font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--moss);
}
.esy-ask-t{margin-top:8px; font-size:17.5px; font-weight:700; line-height:1.85; color:var(--moss-deep);}

/* 操作画面のスクリーンショット */
.esy-fig{margin:18px 0;}
.esy-fig img{
  display:block; width:100%; height:auto;
  border:1px solid var(--rule); border-radius:10px; background:var(--white);
}
.esy-fig figcaption{margin-top:9px; font-size:14.5px; color:var(--muted); line-height:1.85;}
.esy-fig figcaption b{color:var(--moss-deep);}
/* 小さい素材（ダイアログ等）は原寸まで。引き伸ばしてぼやけさせない */
.esy-fig-sm img{width:auto; max-width:100%;}

@media (max-width:640px){
  .esy-zones{grid-template-columns:1fr; gap:12px;}
  .esy-ask{padding:14px 16px;}
  .esy-ask-t{font-size:16.5px;}
}

/* =========================================================================
   読み物 local-vs-vps.php 専用（.esy を共用）
   ・ローカル環境とVPSの違いを並べる比較表 … .esy-cmp
   横スクロールバーは出さない（幅100%・table-fixed・セル内で折り返す）
   ========================================================================= */
.esy-cmp{margin:18px 0 6px; overflow:hidden; border:1px solid var(--rule); border-radius:12px;}
.esy-cmp table{width:100%; table-layout:fixed; border-collapse:collapse; background:var(--white);}
.esy-cmp th, .esy-cmp td{
  padding:13px 14px; text-align:left; vertical-align:top;
  font-size:15.5px; line-height:1.75; word-break:break-word;
  border-bottom:1px solid var(--rule);
}
.esy-cmp thead th{
  background:var(--ink); color:var(--white); font-weight:700; font-size:14.5px;
  letter-spacing:.02em; border-bottom:none;
}
.esy-cmp thead th.esy-cmp-vps{color:var(--moss-on-ink);}
.esy-cmp tbody tr:last-child td{border-bottom:none;}
.esy-cmp tbody tr:nth-child(even){background:#F5F3EE;}
.esy-cmp th[scope="row"]{font-weight:700; color:var(--moss-deep); width:26%;}
.esy-cmp td.esy-cmp-vps{color:var(--moss-deep);}
@media (max-width:640px){
  .esy-cmp th, .esy-cmp td{padding:11px 10px; font-size:14.5px;}
  .esy-cmp thead th{font-size:13px;}
  .esy-cmp th[scope="row"]{width:30%;}
}

/* 番号つきサブ見出し（h3）。ケース／ステップの列挙に使う（.esy-sec h2 の縮小版） */
.esy-sub{font-size:18px; line-height:1.65; font-weight:700; margin:26px 0 10px;}
.esy-sec h3:not([class]):not(.esy-mr h3){font-size:18px; line-height:1.65; font-weight:700; margin:26px 0 10px;}
.esy-sub-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-right:9px; vertical-align:-4px;
  border-radius:50%; background:var(--moss); color:var(--white);
  font-size:14px; font-weight:700;
}
.esy-sub-clay .esy-sub-n{background:var(--clay);}
@media (max-width:640px){
  .esy-sub{font-size:16.5px;}
  .esy-sec h3:not([class]):not(.esy-mr h3){font-size:16.5px;}
  .esy-sub-n{width:24px; height:24px; font-size:13px; margin-right:8px;}
}

/* =========================================================================
   勉強会 講義資料の目次（seminar.php）— .esy を共用
   ・公開済みの章はリンク行（a.esy-toc-row）、準備中の章は div の灰色行（.is-tbd）
   ========================================================================= */
.esy-toc{margin:6px 0; border-top:1px solid var(--rule);}
.esy-toc-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:15px 14px; border-bottom:1px solid var(--rule);
}
a.esy-toc-row{background:var(--white); text-decoration:none !important; transition:background .15s;}
a.esy-toc-row:hover{background:#F3F6F0;}
.esy-toc-n{flex:0 0 auto; min-width:58px; font-size:14.5px; font-weight:700; color:var(--moss); letter-spacing:.02em;}
.esy-toc-t{flex:1 1 200px; min-width:0; font-size:16.5px; font-weight:700; line-height:1.7; color:var(--text);}
.esy-toc-flag{
  flex:0 0 auto; font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 12px;
  color:var(--muted); border:1px dashed var(--rule);
}
a.esy-toc-row .esy-toc-flag{color:var(--moss-deep); border:1px solid var(--moss); background:#E7EFE2;}
.esy-toc-go{flex:0 0 auto; color:var(--moss); font-weight:700;}
.esy-toc-row.is-tbd .esy-toc-n{color:var(--muted);}
.esy-toc-row.is-tbd .esy-toc-t{color:var(--muted); font-weight:500;}
@media (max-width:640px){
  .esy-toc-row{padding:13px 10px; gap:10px;}
  .esy-toc-t{font-size:15.5px;}
}

/* =========================================================================
   勉強会 第2章（seminar-02）: フォルダ構成図・段階図・置き場所表 — .esy を共用
   ・.esy-tree … フォルダ構成のツリー図（pre）。注釈は .note（灰）と .bad（赤）
   ・.esy-flow … 縦の段階図（知識の階層）
   ========================================================================= */
.esy-tree{margin:16px 0 6px; border:1px solid var(--rule); border-radius:12px; background:var(--white); overflow:hidden;}
.esy-tree-cap{
  padding:9px 16px; background:#F4F2EC; border-bottom:1px solid var(--rule);
  font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.04em;
}
.esy-tree pre{
  margin:0; padding:15px 18px; overflow-x:auto;
  font-family:var(--mono); font-size:14.5px; line-height:1.95; color:var(--text);
  white-space:pre;
}
.esy-tree b{color:var(--moss-deep); font-weight:700;}
.esy-tree .note{color:var(--muted);}
.esy-tree .bad{color:var(--danger); font-weight:700;}
@media (max-width:640px){
  /* 12.5px はラベル下限。図（コード表示）なので本文14.5px基準は適用しない */
  .esy-tree pre{font-size:12.5px; padding:13px 10px; line-height:1.9;}
}

.esy-flow{margin:18px auto 6px; max-width:420px; display:flex; flex-direction:column; align-items:stretch;}
.esy-flow-i{
  text-align:center; padding:12px 14px; background:var(--white);
  border:1px solid var(--rule); border-radius:10px;
  font-size:15.5px; font-weight:700; line-height:1.7;
}
.esy-flow-i small{display:block; font-size:13px; font-weight:500; color:var(--muted); line-height:1.6;}
.esy-flow-a{text-align:center; color:var(--moss); font-weight:700; font-size:16px; line-height:1.4; padding:3px 0;}

/* 置き場所のパス表記（表・本文中） */
.esy-path{font-family:var(--mono); font-size:14px; font-weight:700; color:var(--moss-deep); word-break:break-all;}

/* ===================================================================
   カリキュラム（curriculum.php）— .esy 名前空間を共用
   ・段階の進行は左→右（モバイルは番号＋線の縦タイムライン）
   ・卒業条件(.esy-grad)を全段階同一の強調枠で最も目立たせる
   =================================================================== */

/* ② 地図の読み方（読み物・カード化しない） */
.esy-mr{padding:18px 0; border-top:1px solid var(--rule);}
.esy-mr:last-of-type{border-bottom:1px solid var(--rule);}
.esy-mr h3{font-size:18.5px; margin-bottom:8px;}
.esy-mr p{font-size:17px !important; color:var(--muted); line-height:2;}
.esy-mr strong{color:var(--moss-deep);}

/* ③ ロードマップ（左→右・道のり） */
.esy-road-cap{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--muted); margin:2px 0 14px;}
.esy-road-groups{display:grid; grid-template-columns:3fr 2fr 1fr; gap:10px; margin-bottom:12px;}
.esy-road-groups span{font-size:13px; font-weight:800; text-align:center; padding:7px 6px; border-radius:8px; background:var(--paper); border:1px solid var(--rule); color:var(--muted);}
.esy-road-groups b{color:var(--moss);}
.esy-road{list-style:none; display:grid; grid-template-columns:repeat(6,1fr); position:relative; margin:0; padding:0;}
.esy-road::before{content:""; position:absolute; top:20px; left:8%; right:8%; height:2px; background:var(--rule); z-index:0;}
.esy-road li{position:relative; z-index:1; text-align:center; padding:0 4px;}
.esy-road a{display:block; text-decoration:none;}
.esy-road-n{width:42px; height:42px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:800; font-size:16px; background:var(--white); color:var(--moss); border:2px solid var(--moss); transition:background .15s, color .15s;}
.esy-road a:hover .esy-road-n{background:var(--moss); color:var(--white);}
.esy-road-name{display:block; margin-top:9px; font-size:13px; font-weight:700; color:var(--text); line-height:1.5;}
.esy-road-stage{display:block; margin-top:3px; font-size:12px; color:var(--muted); font-family:var(--mono); letter-spacing:.06em;}
@media (max-width:640px){
  .esy-road-groups{display:none;}
  .esy-road{grid-template-columns:1fr;}
  .esy-road::before{top:0; bottom:0; left:20px; right:auto; width:2px; height:auto;}
  .esy-road li{text-align:left; padding:10px 0;}
  .esy-road a{display:flex; align-items:center; gap:15px;}
  .esy-road-n{margin:0; flex:none;}
  .esy-road-name{margin-top:0;}
}

/* 段階見出し */
.esy-stage-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:4px;}
.esy-stage-no{font-family:var(--mono); font-weight:800; font-size:13px; letter-spacing:.08em; color:var(--white); background:var(--moss); padding:5px 12px; border-radius:999px;}
.esy-stage-h h2{margin-bottom:0 !important;}

/* こんな方の段階です（自己判定・引用風） */
.esy-you{margin:18px 0 4px; background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--clay); border-radius:10px; padding:18px 22px;}
.esy-you-l{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; color:var(--clay); font-weight:700; display:block; margin-bottom:8px;}
.esy-you p{font-size:18px !important; font-weight:700; line-height:1.85; color:var(--text);}

/* 学ぶこと／演習課題 */
.esy-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:24px; margin:22px 0 0; align-items:start;}
@media (max-width:640px){ .esy-grid{grid-template-columns:1fr; gap:18px;} }
.esy-lbl{font-family:var(--mono); font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--moss); margin-bottom:12px;}
.esy-task{background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:18px 20px;}
.esy-task > p{font-size:16.5px; line-height:1.95;}
.esy-flow{margin-top:12px;}
.esy-flow-l{display:block; font-size:14px; color:var(--muted); margin-bottom:6px;}
.esy-flow span{display:block; background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:9px 14px; font-size:15px; line-height:1.6; margin-top:6px;}

/* 卒業条件（このページで一番目立つ・全段階同一） */
.esy-grad{margin:22px 0 0; background:var(--moss); color:var(--white); border-radius:14px; padding:24px 26px; display:flex; gap:18px; align-items:flex-start; box-shadow:0 16px 40px -22px rgba(70,96,63,.7);}
.esy-grad-ic{flex:none; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; line-height:1;}
.esy-grad-l{font-family:var(--mono); font-size:12.5px; font-weight:800; letter-spacing:.16em; color:#dfebd8; display:block; margin-bottom:8px;}
.esy-grad p{font-size:19px !important; font-weight:800; line-height:1.75; color:#fff !important;}
.esy-grad strong{color:#fff !important; text-decoration:underline; text-decoration-color:rgba(255,255,255,.55); text-underline-offset:3px;}
@media (max-width:480px){ .esy-grad{padding:20px 18px; gap:12px;} .esy-grad-ic{width:38px; height:38px; font-size:20px;} }

/* ④ まとめ（技術/マネジメント/経営＝0-2 / 3-4 / 5） */
.esy-phases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0;}
@media (max-width:700px){ .esy-phases{grid-template-columns:1fr;} }
.esy-phase{background:var(--ink-soft); border:1px solid var(--ink-line); border-top:3px solid var(--moss-hi); border-radius:12px; padding:22px 20px;}
.esy-phase:nth-child(1){border-top-color:#9dbb8f;}
.esy-phase:nth-child(3){border-top-color:var(--clay);}
.esy-phase-k{font-size:19px; color:#fff; line-height:1.7; margin:0;}
.esy-phase-k strong{color:#fff;}
.esy-phase-v{margin-top:12px; font-size:16px; color:var(--text-on-ink); line-height:1.9;}

/* ---------------------------------------------------------- AI活用レベル 16社比較（level-compare.php）
   会員限定。記号は ◎○△×－ の5種で、色は本文の配色トークンだけを使う。
   本文14.5px未満・ラベル12.5px未満は作らない（プロジェクト共通ルール）。
   横に広い表は .cmp-tw の中だけでスクロールさせ、ページ本体は横に振らせない。 */
.cmp{max-width:1180px; margin:0 auto; padding:44px 20px 90px;}

.cmp-head{border-bottom:1px solid var(--rule); padding-bottom:26px;}
.cmp-head h1{font-size:34px; line-height:1.35; margin:10px 0 0; letter-spacing:.01em;}
.cmp-lead{margin:16px 0 0; font-size:17.5px; line-height:1.9; color:var(--ink-soft);}
.cmp-meta{
  margin:18px 0 0; display:flex; flex-wrap:wrap; gap:6px 22px;
  font-size:13.5px; color:var(--muted); line-height:1.8;
}
.cmp-meta a{color:var(--moss); text-decoration:underline; text-underline-offset:3px;}
.cmp-private{
  margin:16px 0 0; padding:11px 15px; border-radius:8px;
  background:#F5EEE2; color:#7A5A32; font-size:14.5px; line-height:1.8;
}

/* 軸の見出し帯 */
.cmp-axis{
  display:flex; gap:18px; align-items:center; margin:52px 0 0;
  padding:18px 22px; border-radius:10px;
  background:#EEF2EA; border-left:4px solid var(--moss);
}
.cmp-axis-n{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; color:var(--moss-deep);
  white-space:nowrap; font-family:var(--mono);
}
.cmp-axis-b{font-size:14.5px; line-height:1.8; color:var(--ink-soft);}
.cmp-axis-b b{display:block; font-size:19px; color:var(--text); margin-bottom:2px;}

.cmp-sec{margin-top:40px;}
.cmp-sec h2{
  font-size:22px; line-height:1.5; margin:0 0 10px;
  padding-left:14px; border-left:4px solid var(--moss);
}
.cmp-h3{font-size:17.5px; margin:32px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--rule);}
.cmp-note{margin:10px 0 0; font-size:14.5px; line-height:1.9; color:var(--muted);}
.cmp-note b{color:var(--text);}
.cmp-note-warn{color:#7A5A32;}
.cmp-note a{color:var(--moss); text-decoration:underline; text-underline-offset:3px;}

/* 記号 */
.cmp-s{font-size:17px; font-weight:700; line-height:1; font-style:normal;}
.cmp-s-a{color:var(--moss-deep);}
.cmp-s-b{color:var(--moss-hi);}
.cmp-s-c{color:var(--clay);}
.cmp-s-x{color:#B08A85;}
.cmp-s-n{color:#BFBCB2;}
.cmp-legend{
  margin:12px 0 0; display:flex; flex-wrap:wrap; gap:6px 20px;
  font-size:13.5px; color:var(--muted);
}
.cmp-legend i{margin-right:6px;}

/* レベルの帯 */
.cmp-lv{
  display:inline-block; min-width:46px; text-align:center;
  padding:2px 8px; border-radius:5px;
  font-size:13px; font-weight:700; white-space:nowrap; color:#fff;
}
.cmp-lv1{background:#B9BCAF; color:#2A2C27;}
.cmp-lv2{background:#93A987; color:#1F2A1B;}
.cmp-lv3{background:#6E8F5E;}
.cmp-lv4{background:var(--moss-hi);}
.cmp-lv5{background:var(--moss);}
.cmp-lv6{background:var(--moss-deep);}

/* 広さランキング */
.cmp-rank{
  margin-top:16px; padding:18px 20px; border:1px solid var(--rule);
  border-radius:10px; background:var(--white);
}
.cmp-rank-row{
  display:grid; grid-template-columns:216px 1fr 34px 58px;
  gap:14px; align-items:center; padding:5px 0;
}
.cmp-rank-name{font-size:14.5px; font-weight:700; line-height:1.4; min-width:0;}
.cmp-rank-name small{display:block; font-size:12.5px; font-weight:400; color:var(--muted);}
.cmp-rank-bar{
  height:14px; border-radius:3px; background:#EDEBE4;
  border:1px solid var(--rule); overflow:hidden;
}
.cmp-rank-bar i{display:block; height:100%; background:var(--moss-hi);}
.cmp-rank-n{
  font-family:var(--mono); font-size:15px; font-weight:700;
  text-align:right; font-variant-numeric:tabular-nums;
}
.cmp-rank-lv{text-align:right;}

/* ものさし */
.cmp-ladder{
  margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.cmp-rung{
  border:1px solid var(--rule); border-radius:9px; background:var(--white);
  padding:12px 14px 13px; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.cmp-rung-n{font-family:var(--mono); font-size:22px; font-weight:700; line-height:1;}
.cmp-rung-t{font-size:14.5px; font-weight:700; line-height:1.55;}
.cmp-rung-t small{display:block; font-size:12.5px; font-weight:400; color:var(--muted);}
.cmp-rung-bar{height:5px; border-radius:3px; margin-top:auto;}
.cmp-bar0{background:#D3D0C6;}
.cmp-bar1{background:#B9BCAF;}
.cmp-bar2{background:#93A987;}
.cmp-bar3{background:#6E8F5E;}
.cmp-bar4{background:var(--moss-hi);}
.cmp-bar5{background:var(--moss);}
.cmp-bar6{background:var(--moss-deep);}

/* 表 */
.cmp-tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:14px;}
.cmp-tbl,.cmp-mx{
  width:100%; border-collapse:collapse; background:var(--white);
  border:1px solid var(--rule); border-radius:10px;
}
.cmp-tbl th,.cmp-tbl td,.cmp-mx th,.cmp-mx td{
  border-bottom:1px solid var(--rule); vertical-align:top; text-align:left;
}
.cmp-tbl thead th,.cmp-mx thead th{
  font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.03em;
  background:#F5F3EE; line-height:1.45; white-space:nowrap;
}
.cmp-tbl thead th small,.cmp-mx thead th small{display:block; font-weight:400; font-size:12.5px;}
.cmp-tbl th,.cmp-tbl td{padding:12px 13px; font-size:14.5px; line-height:1.85;}
.cmp-mx th,.cmp-mx td{padding:8px 12px; font-size:14.5px;}
.cmp-tbl tbody tr:last-child th,.cmp-tbl tbody tr:last-child td,
.cmp-mx tbody tr:last-child th,.cmp-mx tbody tr:last-child td{border-bottom:none;}
.cmp-who{font-weight:700; white-space:nowrap; font-size:14.5px;}
.cmp-who small{display:block; font-weight:400; font-size:12.5px; color:var(--muted);}
.cmp-nw{white-space:nowrap;}
.cmp-num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
.cmp-num-big{color:var(--danger); font-weight:700;}
.cmp-strong{font-weight:700;}
.cmp-soft{color:var(--muted);}
.cmp-mx .cmp-sym{text-align:center; padding-left:2px; padding-right:2px; min-width:50px;}
/* マトリクスの1列目はニックネームを主にして幅を抑える。店舗名は折り返してよい */
.cmp-mx .cmp-who{white-space:nowrap; max-width:184px;}
.cmp-mx .cmp-who small{white-space:normal;}
.cmp-mx thead th.cmp-sym{font-size:12.5px; white-space:nowrap;}

/* 所見・レシピ */
.cmp-find{
  margin-top:16px; border:1px solid var(--rule); border-radius:10px;
  background:var(--white); overflow:hidden;
}
.cmp-find-row{
  display:grid; grid-template-columns:58px 1fr; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--rule);
}
.cmp-find-row:last-child{border-bottom:none;}
.cmp-find-k{
  font-size:12.5px; font-weight:700; color:var(--moss-deep);
  background:#EEF2EA; border-radius:5px; text-align:center;
  padding:3px 0; height:fit-content; line-height:1.7;
}
.cmp-find-k-n{font-family:var(--mono); font-size:13px;}
.cmp-find-t{margin:0; font-size:16.5px; font-weight:700; line-height:1.6;}
.cmp-find-who{display:block; font-size:13px; font-weight:400; color:var(--muted); margin-top:2px;}
.cmp-find-b{margin:6px 0 0; font-size:14.5px; line-height:1.9; color:var(--ink-soft);}
.cmp-find-b b{color:var(--text);}

/* 各社カード */
.cmp-cards{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.cmp-card{
  border:1px solid var(--rule); border-radius:10px; background:var(--white);
  display:grid; grid-template-columns:230px 1fr; overflow:hidden;
}
.cmp-card-h{padding:16px 18px; border-right:1px solid var(--rule); background:#FCFBF8;}
.cmp-card-t{margin:0; font-size:17.5px; font-weight:700; line-height:1.5;}
.cmp-card-s{margin:3px 0 0; font-size:12.5px; color:var(--muted); line-height:1.7;}
.cmp-card-lv{margin:12px 0 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;}
.cmp-card-lv > span{font-size:12.5px; color:var(--muted); white-space:nowrap;}
/* ↑ 直接の子だけに効かせる。子孫セレクタにすると中の .cmp-lv（白文字）まで薄い色で
   上書きされ、帯の数字が読めなくなる（2026-08-22に踏んだ） */
.cmp-card-lv b{font-family:var(--mono); font-size:15px; color:var(--text);}
.cmp-card-b{padding:16px 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.cmp-row{display:flex; flex-direction:column; gap:6px; align-content:start;}
.cmp-tag{
  font-size:12.5px; font-weight:700; border-radius:999px; padding:2px 12px;
  align-self:flex-start; white-space:nowrap; line-height:1.75;
}
.cmp-tag-g{background:#E7EFE2; color:var(--moss-deep);}
.cmp-tag-r{background:#F3E4E2; color:#8A362F;}
.cmp-tag-w{background:#F5EEE2; color:#7A5A32;}
.cmp-row p{margin:0; font-size:14.5px; line-height:1.9; color:var(--ink-soft);}
.cmp-row p b{color:var(--text);}

/* 注意 */
.cmp-caution{
  margin-top:44px; padding:22px 24px; border-radius:10px;
  background:#F5EEE2; border-left:4px solid var(--clay);
}
.cmp-caution h2{font-size:19px; margin:0;}
.cmp-caution ul{margin:12px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:9px;}
.cmp-caution li{font-size:14.5px; line-height:1.9; color:#5B4A34;}
.cmp-caution li b{color:#3E3226;}
.cmp-src{margin:16px 0 0; font-size:12.5px; color:#7A6A55;}

@media (max-width:820px){
  .cmp{padding:30px 16px 70px;}
  .cmp-head h1{font-size:27px;}
  .cmp-axis{flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px;}
  .cmp-ladder{grid-template-columns:repeat(2,1fr);}
  .cmp-rank-row{grid-template-columns:150px 1fr 30px 52px; gap:10px;}
  .cmp-card{grid-template-columns:1fr;}
  .cmp-card-h{border-right:none; border-bottom:1px solid var(--rule);}
  .cmp-card-b{grid-template-columns:1fr; gap:14px;}
  .cmp-find-row{grid-template-columns:1fr; gap:8px;}
  .cmp-find-k{justify-self:start; padding:3px 14px;}
}

/* ================================ 会員ダッシュボード（dashboard.php） */
.dash-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px; margin-top:6px;
}
.dash-card{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:22px 54px 24px 24px;
  background:var(--white); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow);
  transition:border-color .15s, transform .15s;
}
.dash-card:hover{border-color:var(--moss); transform:translateY(-2px);}
.dash-card-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.dash-card-label{
  font-size:12.5px; font-weight:700; padding:2px 10px; border-radius:999px;
  background:#EDF1E9; color:var(--moss-deep);
}
.dash-card-meta{font-size:13.5px; color:var(--muted);}
.dash-card-t{font-size:19px; font-weight:700; line-height:1.55; color:var(--text);}
.dash-card-d{font-size:14.5px; line-height:1.9; color:var(--muted);}
.dash-card-go{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--moss);
}
.dash-foot{margin-top:26px; font-size:15px; color:var(--muted); line-height:1.9;}
.dash-foot a{text-decoration:underline;}

@media (max-width:700px){
  .dash-card{padding:18px 44px 20px 18px;}
  .dash-card-t{font-size:17.5px;}
  .dash-card-go{right:16px;}
}

/* ================================ AI活用の健康診断（ai-kenshin.php・会員限定）
   .esy を土台に、このページだけで要るものを .kn-* で足す。
   ・見出しの副題            … .kn-sub
   ・全体の流れ（縦積みの図） … .kn-flow / .kn-branch
   ・提出ファイルの表         … .kn-files
   ・提出先と締切             … .kn-due / .kn-ph（ボスが後で埋めるプレースホルダー）
   ・よくある質問             … .kn-faq / .kn-q / .kn-a
   ・ダウンロード枠           … .kn-dl                                     */
.kn-label{letter-spacing:.06em;}   /* 【】が入るので字間を詰める（原稿の見出しをそのまま出すため） */
.kn-sub{font-size:19.5px; color:var(--muted); font-weight:400; line-height:1.6;}

/* 全体の流れ。原稿の罫線図は狭い画面で必ずはみ出すので縦積みにした */
.kn-flow{list-style:none; margin:18px 0 4px;}
.kn-flow-i{position:relative; display:flex; gap:16px; padding:0 0 22px 0;}
.kn-flow-i::before{               /* ①→②をつなぐ縦線 */
  content:""; position:absolute; left:16px; top:36px; bottom:0;
  width:2px; background:var(--rule);
}
.kn-flow-last{padding-bottom:0;}
.kn-flow-last::before{display:none;}
.kn-flow-n{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  background:var(--moss); color:var(--white);
  font-size:16px; font-weight:700; line-height:34px; text-align:center;
  position:relative; z-index:1;
}
.kn-flow-b{flex:1 1 auto; min-width:0; padding-top:3px;}
.kn-flow-t{font-size:16.5px; line-height:1.8; font-weight:700;}
.kn-flow-d{margin-top:6px; font-size:15px; color:var(--muted); line-height:1.85;}

.kn-branch{list-style:none; margin-top:12px;}
.kn-branch li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:11px 14px; background:var(--white);
  border:1px solid var(--rule); border-radius:10px;
}
.kn-branch li + li{margin-top:8px;}
.kn-branch li b{font-size:15.5px; line-height:1.7;}
.kn-branch-a{color:var(--muted); flex:0 0 auto;}
.kn-branch-r{font-size:14.5px; color:var(--muted); line-height:1.8; flex:1 1 220px;}
.kn-branch-go{color:var(--moss-deep); font-weight:700;}
.kn-branch li:last-child{border-color:var(--moss); background:#F3F6F0;}

/* やること3ステップ。ピルは curriculum.php の .esy-stage-* を流用する */
.kn-stage-gap{margin-top:30px;}
.kn-h3{font-size:19px; line-height:1.6; margin-bottom:0;}

/* 提出ファイルの表。.chk-table は列見出しを nowrap にしているので行見出しは戻す */
.kn-files tbody th{
  white-space:normal; font-size:14.5px; color:var(--text); font-weight:700;
  vertical-align:top; width:34%;
}
.kn-files tbody th .code{display:inline-block; font-size:13.5px; line-height:1.7;}
.kn-files tbody th small{display:block; margin-top:4px; font-size:13px; color:var(--muted); font-weight:500;}
.kn-files-go{background:#F3F6F0;}
.kn-no{color:var(--danger);}
.kn-yes{color:var(--moss-deep);}

/* 提出先と締切 */
.kn-due{
  margin:20px 0 4px; padding:16px 20px;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--moss);
  border-radius:10px;
}
.kn-due-r{font-size:16.5px; line-height:1.9;}
.kn-due-r + .kn-due-r{margin-top:6px;}
.kn-due-l{
  display:inline-block; min-width:5.2em; font-size:13px; font-weight:700;
  color:var(--muted); letter-spacing:.04em;
}
.kn-ph{                            /* ★ボスが後で埋める箇所。埋まるまで目立たせる */
  display:inline-block; padding:1px 8px; border-radius:6px;
  background:#FBE9C6; border:1px dashed #C79B3F; color:#7A5A32; font-weight:700;
}

/* 見本レポートの誌面。2枚並べ、狭い画面では1枚ずつ */
.kn-shots-h{margin-top:28px;}
.kn-shots{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; margin-top:6px;}
.kn-shots .esy-fig{margin:0;}
.kn-shots .esy-fig img{box-shadow:var(--shadow);}
.kn-shots .esy-fig figcaption{font-size:14px;}

/* よくある質問 */
.kn-faq{padding:18px 0; border-top:1px solid var(--rule);}
.kn-faq:last-child{border-bottom:1px solid var(--rule);}
.kn-q{font-size:17px; font-weight:700; line-height:1.75; color:var(--moss-deep);}
.kn-a{margin-top:8px; font-size:16px; line-height:1.95; color:var(--ink-soft);}

/* ダウンロード枠 */
.kn-dl{
  padding:24px 26px; background:var(--ink); color:var(--text-on-ink);
  border-radius:14px; margin-top:6px;
}
.kn-dl-f{font-family:var(--mono); font-size:17px; font-weight:700; color:var(--white); overflow-wrap:anywhere;}
.kn-dl-d{margin-top:10px; font-size:15.5px; line-height:1.9;}
.kn-dl .top-cta{margin-top:18px;}
.kn-close{margin-top:28px; font-size:16.5px; line-height:1.95;}

@media (max-width:700px){
  .kn-sub{font-size:16.5px;}
  .kn-flow-i{gap:12px;}
  .kn-flow-i::before{left:14px;}
  .kn-flow-n{flex-basis:30px; width:30px; height:30px; font-size:14.5px; line-height:30px;}
  .kn-flow-t{font-size:15.5px;}
  .kn-h3{font-size:17px;}
  /* 狭い画面では2列をやめて縦に積む。ファイル名が1文字ずつ折れて読めなくなるため */
  .kn-files, .kn-files tbody, .kn-files tr, .kn-files tbody th, .kn-files td{display:block; width:auto;}
  .kn-files thead{display:none;}
  .kn-files tr{padding:14px 0; border-bottom:1px solid var(--rule);}
  .kn-files tr:last-child{border-bottom:none;}
  .kn-files-go{padding-left:12px; padding-right:12px; border-radius:10px;}
  .kn-files tbody th{padding:0 0 6px; border-bottom:none;}
  .kn-files tbody th .code{font-size:14px; word-break:normal; overflow-wrap:anywhere;}
  .kn-files td{padding:0; border-bottom:none;}
  .kn-shots{grid-template-columns:1fr; gap:22px;}
  .kn-shots-h{margin-top:22px;}
  .kn-due{padding:14px 16px;}
  .kn-due-r{font-size:15.5px;}
  .kn-due-l{min-width:0; display:block;}
  .kn-dl{padding:20px 18px;}
  .kn-dl-f{font-size:15px;}
}

/* ------------------------------------------------------------------
   AI運用基盤診断 2026 結果発表（ai-kenshin-result.php）の会社リスト
   ------------------------------------------------------------------ */
.knr-list{margin-top:18px; border:1px solid var(--rule); border-radius:10px; overflow:hidden;}
.knr-row{display:grid; grid-template-columns:1fr 1.2fr 92px 56px 28px; gap:10px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--rule); text-decoration:none !important; background:var(--white);}
.knr-row:last-child{border-bottom:none;}
.knr-row:hover{background:var(--paper, #F7F6F2);}
.knr-name{font-size:15.5px; font-weight:700; color:var(--moss-deep);}
.knr-biz{font-size:14.5px; color:var(--muted);}
.knr-avg{font-size:15.5px; font-weight:700; text-align:right; color:var(--text); font-feature-settings:'tnum';}
.knr-avg small{font-size:12.5px; font-weight:400; color:var(--muted);}
.knr-flag{font-size:14.5px; text-align:right; color:var(--muted);}
.knr-go{color:var(--moss-deep); text-align:right;}
@media(max-width:640px){
  .knr-row{grid-template-columns:1fr 78px 50px 20px; padding:12px 13px;}
  .knr-biz{display:none;}
}

/* ------------------------------------------------------------------
   SlackをAIの職場にする（slack-agent-setup.php）
   ------------------------------------------------------------------ */

/* チャンネルの一覧（部屋割り） */
.sag-ch{margin:18px 0 4px; border-top:1px solid var(--rule);}
.sag-ch-row{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:12px 12px; border-bottom:1px solid var(--rule); background:var(--white);
}
.sag-ch-name{
  flex:0 0 auto; min-width:150px; font-family:var(--mono); font-size:15px; font-weight:700;
  color:var(--moss-deep); letter-spacing:.01em;
}
.sag-ch-who{
  flex:0 0 auto; font-size:14px; font-weight:700; color:var(--white);
  background:var(--clay); border-radius:999px; padding:2px 11px;
}
.sag-ch-d{flex:1 1 260px; min-width:0; font-size:15.5px; line-height:1.8; color:var(--muted);}

/* 3つの層 */
.sag-tri{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 4px;}
.sag-tri-i{
  display:flex; flex-direction:column; gap:7px; padding:18px 16px;
  background:var(--white); border:1px solid var(--rule); border-top:4px solid var(--moss);
  border-radius:10px;
}
.sag-tri-n{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--moss);}
.sag-tri-t{font-size:16.5px; font-weight:700; line-height:1.6;}
.sag-tri-d{font-size:14.5px; color:var(--muted); line-height:1.8;}

/* 各ステップの「やること」 */
.sag-do{
  margin:18px 0 0; padding:18px 20px; background:var(--white);
  border:1px solid var(--rule); border-left:5px solid var(--moss); border-radius:10px;
}
.sag-do-h{
  font-size:14px !important; font-weight:700; letter-spacing:.12em; color:var(--moss);
  margin-bottom:10px;
}
.sag-do ol, .sag-do ul{list-style:none; margin:0;}
.sag-do li{
  position:relative; padding:5px 0 5px 22px; font-size:16px; line-height:1.9;
}
.sag-do li::before{
  content:""; position:absolute; left:4px; top:15px;
  width:7px; height:7px; border-radius:2px; background:var(--moss);
}

/* 各ステップの「やらないとこうなる」 */
.sag-bad{
  margin:16px 0 0; padding:16px 20px; background:#fdf6f5;
  border:1px solid #e8d3d0; border-left:5px solid var(--danger); border-radius:10px;
}
.sag-bad-h{
  font-size:14px !important; font-weight:700; letter-spacing:.12em; color:var(--danger);
  margin-bottom:8px;
}
.sag-bad p{font-size:15.5px !important; line-height:1.9 !important; color:var(--ink-soft);}

/* 45項目チェックリスト */
.sag-chk{margin-top:8px;}
.sag-chk-g{margin-top:22px;}
.sag-chk-gh{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:2px solid var(--moss);
}
.sag-chk-gl{
  font-family:var(--mono); font-size:16px; font-weight:700; color:var(--moss);
}
.sag-chk-gt{font-size:17.5px; font-weight:700;}
.sag-chk-gd{flex:1 1 240px; min-width:0; font-size:14px; color:var(--muted); line-height:1.75;}
.sag-chk-row{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:11px 2px; border-bottom:1px solid var(--rule);
}
.sag-chk-b{
  flex:0 0 auto; min-width:46px; text-align:center;
  font-size:12.5px; font-weight:700; border-radius:4px; padding:3px 8px;
  border:1px solid var(--rule); color:var(--muted); background:var(--white);
}
.sag-chk-b.is-must{color:var(--white); background:var(--danger); border-color:var(--danger);}
.sag-chk-b.is-rec{color:var(--white); background:var(--moss); border-color:var(--moss);}
.sag-chk-t{flex:0 0 auto; font-size:16px; font-weight:700; line-height:1.7;}
.sag-chk-d{flex:1 1 300px; min-width:0; font-size:14.5px; color:var(--muted); line-height:1.8;}

/* 凡例 */
.sag-legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:14.5px; color:var(--muted);}
.sag-legend span{display:flex; align-items:center; gap:8px;}

@media (max-width:640px){
  .sag-tri{grid-template-columns:1fr;}
  .sag-ch-name{min-width:0; flex:1 1 100%;}
  .sag-do, .sag-bad{padding:15px 15px;}
  .sag-chk-t{flex:1 1 100%;}
}

/* 2本セットの記事（考え方編 report-place ／ 作り方編 slack-agent-setup）を
   互いに案内する帯。両方の記事の冒頭と末尾に置く。 */
.sag-pair{
  display:flex; flex-direction:column; gap:6px;
  margin:22px 0 0; padding:15px 18px;
  background:var(--white); border:1px solid var(--rule);
  border-left:5px solid var(--clay); border-radius:10px;
}
.sag-pair-l{
  font-size:13.5px !important; font-weight:700; letter-spacing:.1em; color:var(--clay);
}
.sag-pair-d{font-size:15.5px !important; line-height:1.9 !important; color:var(--ink-soft);}
.sag-pair-d a{color:var(--moss-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.sag-pair-d a:hover{color:var(--moss-hi);}

@media (max-width:640px){
  .sag-pair{padding:14px 15px;}
}

/* ================================================= 記事の反応（2026-08-31）
   読み物の一番下に自動で出る。lib.php の render_article_reactions() が正本。
   ★ボタンは横に並べて折り返す。全幅の帯にしない（押し間違いが増えるため）。
   ★狭い画面でも横スクロールを出さないこと（375px で確認済み）。 */
.react{
  margin:44px 0 0; padding:22px 24px;
  background:var(--white); border:1px solid var(--rule);
  border-top:4px solid var(--moss); border-radius:12px;
}
.react-thx{
  margin:0 0 14px; padding:9px 14px; border-radius:8px;
  background:#eaf1e6; border:1px solid #c3d7ba; color:var(--moss-deep);
  font-size:15px;
}
.react-q{font-size:18px; font-weight:700; line-height:1.6; margin:0 0 6px;}
.react-lead{font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 16px;}

.react-btns{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px;}
.react-b{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  border:1px solid var(--rule); background:var(--paper); color:var(--text);
  font-family:inherit; font-size:15px; line-height:1.4; cursor:pointer;
  transition:border-color .12s, background .12s, color .12s;
}
.react-b:hover{border-color:var(--moss); background:var(--white); color:var(--moss-deep);}
.react-b.on{background:var(--moss); border-color:var(--moss); color:var(--white);}
.react-b-i{font-size:17px; line-height:1;}
.react-b-n{
  min-width:22px; padding:1px 7px; border-radius:999px;
  background:var(--rule); color:var(--ink-soft);
  font-size:13px; font-weight:700; text-align:center;
}
.react-b.on .react-b-n{background:var(--moss-deep); color:var(--white);}

.react-priv{font-size:13.5px; color:var(--muted); line-height:1.8; margin:14px 0 0;}

@media (max-width:640px){
  .react{padding:18px 16px; margin-top:34px;}
  .react-b{padding:9px 13px; font-size:14.5px;}
}

/* 記事への質問・感想（2026-08-31 ボス指示で、ほかの読者にも見えるようにした）。
   反応欄 .react の中に入る。会員は投稿即表示、未ログインは事務局の承認後。 */
.say{margin-top:22px; padding-top:20px; border-top:1px solid var(--rule);}
.say-h{font-size:17px; font-weight:700; line-height:1.6; margin:0 0 6px;}
.say-lead{font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 16px;}

.say-list{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px;}
.say-item{
  padding:14px 16px; border:1px solid var(--rule); border-radius:10px; background:var(--paper);
}
.say-meta{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:13.5px; color:var(--muted); margin:0 0 6px;
}
.say-who{font-weight:700; color:var(--ink-soft); font-size:14.5px;}
.say-body{font-size:15.5px; line-height:1.95; margin:0; overflow-wrap:anywhere;}

.say-reply{
  margin:12px 0 0; padding:11px 14px;
  background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--moss);
  border-radius:8px;
}
.say-reply-h{
  font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--moss-deep); margin:0 0 4px;
}

.say-f{display:flex; flex-wrap:wrap; gap:10px;}
.say-f-l{flex:1 1 100%; font-size:13.5px; font-weight:700; color:var(--muted); letter-spacing:.04em;}
.say-f textarea{
  flex:1 1 100%; min-width:0; max-width:100%;
  padding:10px 12px; border:1px solid var(--rule); border-radius:8px;
  background:var(--white); font-family:inherit; font-size:15.5px; line-height:1.8; resize:vertical;
}
.say-f textarea:focus{outline:2px solid var(--moss-hi); outline-offset:1px;}
.say-f-foot{
  flex:1 1 100%; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.say-f-note{flex:1 1 220px; font-size:13.5px; color:var(--muted); line-height:1.8;}
.say-f-foot .btn{flex:0 0 auto; margin-left:auto;}

@media (max-width:640px){
  .say-item{padding:12px 13px;}
  .say-body{font-size:15px;}
}