:root{
  --bg:#dbe5f0; --text:#1a1a1a; --muted:#666;
  --card:#fff; --border:#e5e7ee; --accent:#6b6fcf;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.7 sans-serif;
}

.site-header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.site-nav{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;gap:16px;align-items:center}
.site-logo{font-weight:700;text-decoration:none;color:var(--text)}
.site-nav-spacer{flex:1}

.wrap{max-width:1100px;margin:0 auto;padding:20px 16px 64px}

/* タブ */
.tabs{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 18px}
.tab{
  appearance:none;border:none;background:transparent;color:var(--text);opacity:.8;cursor:pointer;
  padding:8px 12px;border-radius:9999px;transition:.15s;
}
.tab[aria-selected="true"]{background:var(--accent);color:#fff;opacity:1}
.tab:focus-visible{outline:2px solid var(--accent)}

/* グリッド */
.grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:stretch;
}
.grid a{
  color: var(--text);
  text-decoration: none;
}

/* カード（画像なし版） */
.card * {
  color: inherit;
  text-decoration: none;
}
.card{
  display:flex;flex-direction:column;
  gap:12px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  min-height:200px;
  color: inherit;
  text-decoration: none;
}
.card:hover{
  transform:translateY(-1px);
  transition:.12s;
}
.card time{
  color:var(--muted);
  font-size:.9rem;
  color: inherit;
  text-decoration: none;
}
.card-title{
  font-weight:800;
  font-size:1.12rem;
  line-height:1.35;
  margin:0;
  color: inherit;
  text-decoration: none;
}
.card-ex{
  color:var(--muted);
  font-size:.98rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color: inherit;
  text-decoration: none;
}
.card-hr{
  height:1px;
  background:var(--border);
  border:0;
  margin:8px 0 0;
  color: inherit;
  text-decoration: none;
}
.card a{
  color: inherit;
  text-decoration: none;
}

/* 空表示 */
.empty{color:var(--muted);text-align:center;margin:24px 0}



/* 記事######################################################################### */
.post-header{
  padding: 30px 25px;
  margin: 20px 15% 0px;
  background: white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  border-radius: 10px;/*角の丸み*/
}
.prose{
  padding: 30px 25px;
  margin: 20px 15%;
  background: white;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  border-radius: 10px;/*角の丸み*/
}
.prose p{
  padding: 15px 0px;
}
.post-footer a {
  background: #303030;
  border-radius: 3px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 2em auto;
  max-width: 280px;
  padding: 10px 25px;
  color: #ffffff;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  text-decoration: none;
}
.post-footer a:hover {
  background: #ffffff;
  color: #000000;
}
.post-footer a:after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #313131;
  border-right: 3px solid #313131;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: 20px;
  border-radius: 1px;
  transition: 0.3s ease-in-out;
}
.post-footer a:hover:after {
  border-color: #FFF;
}
blockquote {
  margin: 1em 0;
  padding: 1em;
  border-left: 4px solid #888;
  background: #f9f9f9;
  font-style: italic;
  color: #3a3a3a;
}