*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;
  background:#FAF7F1;color:#2B2B2B;line-height:1.85;-webkit-font-smoothing:antialiased;}
.wrap{max-width:720px;margin:0 auto;padding:8px 18px 70px;}
header.site{background:#fff;border-bottom:1px solid #efeae0;}
.head-inner{max-width:720px;margin:0 auto;padding:20px 18px 0;}
.logo{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;letter-spacing:.04em;}
.logo a{color:#222;text-decoration:none;display:flex;align-items:center;gap:9px;}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3D7CC0,#1A5F9E);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;}
.tag{font-size:12.5px;color:#8a8a8a;margin:3px 0 0 1px;}
.gnav{display:flex;gap:4px;margin-top:14px;}
.gnav a{font-size:13px;font-weight:600;color:#666;text-decoration:none;padding:9px 13px;border-radius:10px 10px 0 0;}
.gnav a:hover{color:#1A5F9E;background:#F4F8FC;}
h1{font-size:22px;margin:14px 0 10px;line-height:1.5;}
h2{font-size:16px;margin:30px 0 12px;padding-left:11px;border-left:4px solid #1A5F9E;}
h3{font-size:14px;margin:18px 0 8px;}
p{margin:9px 0;font-size:14.5px;}
ul,ol{margin:9px 0 9px 22px;font-size:14.5px;}
li{margin:3px 0;}
a{color:#1A5F9E;}
blockquote{background:#EAF4FB;border-radius:14px;padding:13px 16px;margin:12px 0;font-size:14.5px;color:#234;}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:13px;background:#fff;border-radius:12px;overflow:hidden;}
th,td{border:1px solid #ece8df;padding:8px 11px;text-align:left;}
th{background:#F4F8FC;font-size:12.5px;}

/* 導入リード */
.intro{background:#fff;border:1px solid #eee6d8;border-radius:16px;padding:16px 18px;margin:18px 0 6px;
  box-shadow:0 2px 12px rgba(120,100,60,.05);}
.intro .lead{font-size:15px;font-weight:700;margin:0 0 4px;}
.intro .sub{font-size:13px;color:#777;margin:0;}

/* タブ */
.tabbar{display:flex;gap:8px;margin:22px 0 18px;flex-wrap:wrap;}
.tabbar button{font-family:inherit;font-size:13px;font-weight:700;padding:9px 17px;border-radius:99px;
  border:1px solid #e6e0d2;background:#fff;color:#6a6a6a;cursor:pointer;transition:all .15s;}
.tabbar button:hover{border-color:#1A5F9E;color:#1A5F9E;}
.tabbar button.on{background:#1A5F9E;color:#fff;border-color:#1A5F9E;box-shadow:0 3px 10px rgba(26,95,158,.25);}
.tabbar .n{display:inline-block;font-size:11px;font-weight:800;background:rgba(0,0,0,.08);border-radius:99px;padding:0 7px;margin-left:6px;}
.tabbar button.on .n{background:rgba(255,255,255,.28);}
.tabpane{display:none;}.tabpane.on{display:block;}
.tablead{font-size:12.5px;color:#8a8a8a;margin:0 0 14px;}

/* カード */
.card{display:flex;gap:13px;align-items:stretch;background:#fff;border:1px solid #ece6da;border-radius:16px;
  padding:13px 15px;margin-bottom:11px;text-decoration:none;color:#2B2B2B;
  box-shadow:0 2px 10px rgba(120,100,60,.05);transition:transform .12s,box-shadow .12s;}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(120,100,60,.12);}
.card-ec{flex:0 0 52px;width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  font-size:26px;align-self:center;}
.card-body{flex:1;min-width:0;display:block;}
.card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.card .t{display:block;font-size:15.5px;font-weight:700;margin:1px 0 2px;}
.card .s{display:block;font-size:12.5px;color:#888;}

/* バッジ(大きめ) */
.badge{display:inline-block;font-size:12px;padding:3px 12px;border-radius:99px;font-weight:700;}
.badge-lg{display:inline-block;font-size:13px;padding:5px 15px;border-radius:99px;font-weight:800;
  background:rgba(255,255,255,.9);}
.b-green{background:#DFF3E9;color:#0A6B53;}
.b-red{background:#FCE9E1;color:#A24A28;}
.b-purple{background:#ECEAFD;color:#4036A0;}
.b-gray{background:#eee;color:#666;}
.meta{font-size:12px;color:#9a9a9a;}

/* ヒーロー(記事上部のアイキャッチ自動生成) */
.hero{border-radius:18px;padding:22px 22px 20px;margin:8px 0 18px;color:#fff;
  box-shadow:0 6px 20px rgba(60,60,60,.12);}
.hero-icon{font-size:38px;line-height:1;display:block;margin-bottom:10px;}
.hero h1{color:#fff;margin:9px 0 8px;font-size:23px;text-shadow:0 1px 2px rgba(0,0,0,.12);}
.hero-meta{font-size:12.5px;color:rgba(255,255,255,.92);}

/* 解決ナレッジ カードUI */
.knowledge{display:grid;gap:10px;margin:12px 0;}
.k-row{display:grid;grid-template-columns:104px 1fr;gap:0;background:#fff;border:1px solid #e9e3d6;
  border-radius:13px;overflow:hidden;box-shadow:0 2px 8px rgba(120,100,60,.04);}
.k-key{background:#F4F8FC;color:#1A5F9E;font-weight:800;font-size:12.5px;padding:12px 13px;display:flex;align-items:center;}
.k-val{padding:12px 14px;font-size:13.5px;line-height:1.7;}

footer{max-width:720px;margin:0 auto;padding:24px 18px 44px;font-size:11.5px;color:#aaa;line-height:1.85;}
.crumb{font-size:12.5px;margin-bottom:8px;color:#999;}
.crumb a{color:#1A5F9E;}
.empty{font-size:13px;color:#888;background:#fff;border-radius:13px;padding:16px;border:1px solid #ece6da;}
@media(max-width:480px){.k-row{grid-template-columns:88px 1fr;}}