/* ブログの記事と記事一覧の共通の見た目（白ベース。2026-10-28 嶋田「白ベースがいい」でCに決定）
   サービスと会社のページは黒基調のまま（assets/deck-dark.css）。ブログだけこのファイルを使う */
:root{--bg:#F3F5F9;--paper:#FFFFFF;--ink:#1F2433;--text:#3A4152;--sub:#6B7385;--line:#DDE2EC;--soft:#EEF2F9;--blue:#2F6BFF;--grad:linear-gradient(90deg,#E056A0 0%,#8B5CF6 50%,#2F6BFF 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans JP',sans-serif;font-size:16px;line-height:1.95;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}

/* ヘッダー */
.hd{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd .in{max-width:1160px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between}
.hd .logo{display:flex;align-items:center;text-decoration:none}
.hd .logo img{height:30px;width:auto;display:block}
.hd nav{display:flex;gap:24px;align-items:center}
.hd nav a{color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.hd nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--grad);color:#fff!important;text-decoration:none;font-weight:700;border-radius:999px;padding:10px 22px;font-size:14px;line-height:1.5}
.btn:hover{opacity:.9}

/* パンくず */
.crumb{max-width:1160px;margin:0 auto;padding:20px 24px 0;font-size:12px;color:var(--sub);line-height:1.6}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* 記事のページ：左に目次、右に記事 */
.layout{max-width:1160px;margin:0 auto;padding:24px 24px 80px;display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.side{position:sticky;top:88px}
.toc{background:var(--paper);border-radius:12px;padding:20px 20px 16px;max-height:calc(100vh - 110px);overflow:auto;box-shadow:0 1px 3px rgba(20,30,60,.06)}
.toc b{display:block;text-align:center;color:var(--ink);font-size:15px;margin-bottom:10px}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;font-size:13px;line-height:1.6;margin:0 0 10px;padding-left:22px;position:relative}
.toc li::before{content:counter(t);position:absolute;left:0;color:var(--blue);font-weight:700}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--blue)}
.toc .btn{display:block;text-align:center;margin-top:12px}
.toc-m{display:none}

.article{background:var(--paper);border-radius:16px;padding:48px 56px 56px;box-shadow:0 1px 3px rgba(20,30,60,.06);min-width:0}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--sub);margin-bottom:12px}
.cat{color:var(--blue);font-weight:700}
.article h1{color:var(--ink);font-size:28px;line-height:1.55;font-weight:900;margin-bottom:28px}
.by{font-size:13px;color:var(--sub);padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:32px}
.article h2{color:var(--ink);font-size:22px;line-height:1.55;font-weight:900;margin:64px 0 22px;padding-bottom:12px;border-bottom:2px solid var(--line);position:relative;scroll-margin-top:84px}
.article h2::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--grad)}
.article h3{color:var(--ink);font-size:18px;font-weight:700;margin:36px 0 14px;padding-left:12px;border-left:4px solid var(--blue)}
.article p{margin-bottom:20px}
.article strong{color:var(--ink)}
.article ol,.article ul{margin:0 0 22px 1.4em}
.article li{margin-bottom:8px}
.tbl{overflow-x:auto;margin:8px 0 24px}
.article table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.article th,.article td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.7}
.article th{background:var(--soft);color:var(--ink);font-weight:700}
.article td:first-child,.article th:first-child{white-space:nowrap}
.qa{background:var(--soft);border-radius:12px;padding:20px 24px;margin-bottom:14px}
.qa .q{color:var(--ink);font-weight:700;margin-bottom:6px}
.qa p:last-child{margin-bottom:0}

/* 記事の下の相談の案内 */
.cta{margin-top:64px;border-radius:16px;padding:36px 32px;text-align:center;background:linear-gradient(135deg,#FCEFF7,#EEF0FF 55%,#E9F0FF)}
.article .cta h2{border:none;margin:0 0 12px;padding:0;font-size:22px}
.article .cta h2::after{display:none}
.cta p{margin:0 auto 20px;max-width:620px;text-align:left}

/* 記事一覧のページ */
.list-hero{max-width:1160px;margin:0 auto;padding:40px 24px 8px}
.list-hero h1{color:var(--ink);font-size:30px;font-weight:900;line-height:1.5;margin-bottom:8px}
.list-hero p{color:var(--sub);font-size:15px}
.cards{max-width:1160px;margin:0 auto;padding:24px 24px 80px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{display:block;background:var(--paper);border-radius:16px;padding:28px 28px 26px;text-decoration:none;color:var(--text);box-shadow:0 1px 3px rgba(20,30,60,.06);border:1px solid transparent;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--blue);transform:translateY(-2px)}
.card .meta{margin-bottom:8px}
.card h2{color:var(--ink);font-size:19px;line-height:1.6;font-weight:900;margin-bottom:10px}
.card p{font-size:14px;line-height:1.85;color:var(--text)}
.empty{max-width:1160px;margin:0 auto;padding:24px 24px 80px;color:var(--sub)}

.foot{text-align:center;font-size:12px;color:var(--sub);padding:32px 16px 48px}
.foot a{color:var(--sub);margin:0 6px}

@media(max-width:900px){
  .hd .in{padding:0 16px;height:56px}
  .hd .logo img{height:24px}
  .hd nav{gap:12px}
  .hd nav a:not(.btn){display:none}
  .btn{padding:8px 18px;font-size:13px}
  .crumb{padding:14px 16px 0}
  .layout{grid-template-columns:1fr;gap:16px;padding:16px 16px 56px}
  .side{display:none}
  .toc-m{display:block;background:var(--soft);border-radius:12px;padding:14px 18px;margin:-12px 0 28px}
  .toc-m summary{color:var(--ink);font-weight:700;cursor:pointer;font-size:15px}
  .toc-m ol{margin:10px 0 0 1.3em}
  .toc-m li{font-size:14px;line-height:1.6;margin-bottom:8px}
  .toc-m a{color:var(--text);text-decoration:none}
  .article{padding:28px 20px 36px;border-radius:12px}
  .article h1{font-size:22px}
  .article h2{font-size:19px;margin-top:48px;scroll-margin-top:72px}
  /* スマホでは表の1行を1枚のカードにして、全部の列を縦に並べる（列の名前は td の data-label） */
  .tbl{overflow:visible}
  .article table{min-width:0;font-size:14px}
  .article thead{display:none}
  .article table,.article tbody,.article tr,.article td{display:block;width:100%}
  .article tr{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
  .article td{border:none;border-bottom:1px solid var(--line);padding:10px 14px;white-space:normal!important}
  .article td:last-child{border-bottom:none}
  .article td::before{content:attr(data-label);display:block;font-size:12px;color:var(--sub);font-weight:700;margin-bottom:2px}
  .article td:first-child{background:var(--soft);color:var(--ink);font-weight:700}
  .article td:first-child::before{display:none}
  .cta{padding:28px 20px}
  .list-hero{padding:28px 16px 4px}
  .list-hero h1{font-size:24px}
  .cards{grid-template-columns:1fr;padding:16px 16px 56px;gap:16px}
  .card{padding:22px 20px}
  .empty{padding:16px 16px 56px}
}