/* SaaS OSS AI News — exbridge.jp と同じデザイントークンを使う。
   別ドメインで色や字面が変わると、同じ会社のサイトだと分かられない。 */
:root{
  --ink:#132329; --muted:#5a6a72; --paper:#f4f7f7; --line:#dbe5e8;
  --blue:#007f96; --green:#58be2f; --dark:#10242b; --amber:#c17a00;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink); line-height:1.85;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15.5px;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

/* ---- ヘッダー ---- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px;
  justify-content:space-between; padding:11px 26px;
  background:rgba(255,255,255,.95); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid var(--line)}
.brand span{display:flex; flex-direction:column; line-height:1.25}
.brand strong{font-size:14.5px; font-weight:900; letter-spacing:.01em}
.brand small{font-size:10.5px; color:var(--muted)}
.toplinks{display:flex; align-items:center; gap:16px; font-size:12.5px; font-weight:700; flex-wrap:wrap}
.toplinks .nav-cta{background:var(--blue); color:#fff; border-radius:999px; padding:6px 14px}
.toplinks .nav-cta:hover{background:#0a94ad; text-decoration:none}

/* ---- ヒーロー ---- */
.hero{background:linear-gradient(135deg,var(--dark) 0%,#0d3440 55%,#0a5a54 100%); color:#fff}
.hero-inner{
  width:min(1080px,calc(100% - 34px)); margin:auto; padding:46px 0 42px;
  display:grid; grid-template-columns:1.55fr .95fr; gap:30px; align-items:center;
}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.16em; color:#5fe3d4; margin:0 0 12px}
.hero h1{margin:0 0 14px; font-size:40px; line-height:1.28; font-weight:900; letter-spacing:-.01em}
.hero .lead{margin:0 0 20px; font-size:14.5px; color:#cfe6e5; max-width:44em}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap; margin:0}
.hero-mascot{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:18px; padding:20px; text-align:center;
}
.hero-mascot img{width:150px; height:150px; margin:0 auto 10px; object-fit:contain}
.hero-mascot p{margin:0; font-size:12.5px; color:#cfe6e5; line-height:1.7}
.hero-mascot strong{color:#fff}

/* ---- ボタン ---- */
.btn{
  display:inline-block; border-radius:999px; padding:10px 20px; font-size:13px; font-weight:800;
  border:1px solid rgba(255,255,255,.4); color:#fff;
}
.btn:hover{text-decoration:none; opacity:.9}
.btn-main{background:var(--green); border-color:var(--green); color:#08210b}
.post-single .btn, .side-cta .btn{border-color:var(--line); color:var(--blue); background:#fff}
.post-single .btn-main, .side-cta .btn-main{background:var(--blue); border-color:var(--blue); color:#fff}

/* ---- レイアウト ---- */
.container{
  width:min(1080px,calc(100% - 34px)); margin:auto; padding:30px 0 60px;
  display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start;
}
.container.single{grid-template-columns:1fr 300px}

/* ---- 一覧 ---- */
.post-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin:0 0 14px; transition:box-shadow .18s ease, transform .18s ease;
}
.post-card:hover{box-shadow:0 10px 26px rgba(19,35,41,.08); transform:translateY(-1px)}
.post-meta{display:flex; gap:12px; align-items:center; font-size:11.5px; color:var(--muted); margin-bottom:6px}
.post-meta .rt{border-left:1px solid var(--line); padding-left:12px}
.post-card h2{margin:0 0 8px; font-size:19px; line-height:1.5; font-weight:800}
.post-card h2 a{color:var(--ink)}
.post-card h2 a:hover{color:var(--blue); text-decoration:none}
.excerpt{margin:0 0 12px; font-size:13.5px; color:var(--muted)}
.read-more{font-size:13px; font-weight:800}

/* ---- 詳細 ---- */
.post-single{background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 34px}
.crumb{font-size:11.5px; color:var(--muted); margin:0 0 14px}
.post-single h1{margin:6px 0 18px; font-size:29px; line-height:1.42; font-weight:900}
.post-body{font-size:15px}
.post-body p{margin:0 0 1.3em}
.post-body a{word-break:break-all}
.post-body h2,.post-body h3{margin:1.7em 0 .6em; font-size:18px; font-weight:800}
.post-body ul{padding-left:1.3em}
.tags{margin:22px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.tags a{background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px 12px; font-size:11.5px; font-weight:700}
.single-cta{margin:26px 0 0; background:linear-gradient(135deg,#f2fbfa,#eaf6f4); border:1px solid #cfe7e4; border-left:4px solid var(--blue); border-radius:14px; padding:20px 22px}
.single-cta h2{margin:0 0 8px; font-size:17px; font-weight:900}
.single-cta p{margin:0 0 12px; font-size:13.5px; color:#25454c}
.cta-row{display:flex; gap:9px; flex-wrap:wrap}
.back{margin:20px 0 0; font-size:13px; font-weight:700}

/* ---- サイドバー ---- */
.sidebar{display:flex; flex-direction:column; gap:14px; position:sticky; top:76px}
.side-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:17px 18px}
.side-card h2{margin:0 0 8px; font-size:14px; font-weight:900}
.side-card p{margin:0 0 8px; font-size:12.5px; color:var(--muted); line-height:1.8}
.side-about{text-align:center}
.side-about img{width:72px; height:72px; margin:0 auto 8px}
.side-about p{text-align:left}
.side-note{font-size:11px !important; color:var(--muted)}
.side-links{list-style:none; margin:0; padding:0; font-size:13px}
.side-links li{padding:6px 0; border-bottom:1px dotted var(--line)}
.side-links li:last-child{border-bottom:0}
.side-cta{background:linear-gradient(135deg,#f2fbfa,#eaf6f4); border-color:#cfe7e4}
.side-price{font-weight:900; color:var(--blue); font-size:13px !important}
.side-cta .btn{width:100%; text-align:center}

/* ---- ページ送り・空 ---- */
.pager{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 0; font-size:13px; font-weight:700}
.pg{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px}
.pg-now{color:var(--muted); font-size:12px}
.empty{background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px; text-align:center; color:var(--muted)}

/* ---- フッター ---- */
.sitefoot{background:var(--dark); color:#b6cdd2; padding:28px 0 34px; margin-top:20px}
.foot-inner{width:min(1080px,calc(100% - 34px)); margin:auto; font-size:12.5px; line-height:1.9}
.foot-inner p{margin:0 0 8px}
.foot-inner strong{color:#fff}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}
.foot-links a{color:#7fe0d4}
.foot-inner .note{font-size:11px; color:#7f9aa1; margin-top:10px}

/* ---- 狭い画面 ---- */
@media (max-width:900px){
  .container,.container.single{grid-template-columns:1fr}
  .sidebar{position:static}
  .hero-inner{grid-template-columns:1fr; padding:34px 0 30px}
  .hero h1{font-size:31px}
  .hero-mascot{display:flex; align-items:center; gap:16px; text-align:left}
  .hero-mascot img{width:92px; height:92px; margin:0}
}
@media (max-width:620px){
  .topbar{flex-direction:column; align-items:flex-start; gap:9px; padding:10px 18px}
  .toplinks{gap:11px; font-size:11.5px}
  .hero h1{font-size:26px}
  .post-single{padding:22px 18px}
  .post-single h1{font-size:22px}
  .post-card{padding:16px 17px}
}