@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&display=swap"); :root {
--primary: #0071e3;
--primary-hover: #0077ed;
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-300: #d1d5db;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
--accent: #f59e0b;
}  #header {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
box-shadow: none !important;
padding: 0 !important;
}
.site-title {
font-family: 'Noto Sans JP', -apple-system, sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
margin: 0;
padding: 12px 0;
}
.site-title a {
color: #111827 !important;
text-decoration: none;
} #nav .nav {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
font-weight: 500;
}
#nav .nav > li > a {
padding: 14px 16px;
color: #374151;
transition: color 0.2s;
}
#nav .nav > li > a:hover {
color: var(--primary);
background: transparent;
} #nav .nav-search {
padding: 8px 0;
}
#nav .nav-search input {
border-radius: 6px;
border: 1px solid #d1d5db;
padding: 6px 12px;
font-size: 14px;
}  .article-container {
background: #ffffff;
border: 1px solid #f3f4f6;
border-radius: 8px;
overflow: hidden;
margin-bottom: 28px;
transition: transform 0.2s, box-shadow 0.2s;
}
.article-container:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
} .article-container .thumb-wrapper {
margin: 0;
aspect-ratio: 16/9;
overflow: hidden;
}
.article-container .thumb-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.article-container:hover .thumb-wrapper img {
transform: scale(1.05);
} .article-container h2.entry-title {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 1.5;
margin: 14px 16px 10px;
color: #111827;
}
.article-container h2.entry-title a {
color: #111827;
text-decoration: none;
}
.article-container h2.entry-title a:hover {
color: var(--primary);
} .article-container .entry-meta {
font-size: 13px;
color: #6b7280;
margin: 0 16px 14px;
}
.article-container .entry-meta a {
color: #6b7280;
} .article-container .cat-links a {
display: inline-block;
background: var(--gray-100);
color: var(--gray-700);
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin: 0 16px 12px 0;
text-decoration: none;
transition: background 0.2s;
}
.article-container .cat-links a:hover {
background: var(--gray-300);
}  #sidebar {
font-family: 'Noto Sans JP', sans-serif;
} .sidebar .widget-title {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
font-size: 16px;
color: #111827;
border-bottom: 2px solid var(--primary);
padding-bottom: 8px;
margin-bottom: 16px;
} .sidebar .widget {
background: #ffffff;
border: 1px solid #f3f4f6;
border-radius: 8px;
padding: 20px;
margin-bottom: 24px;
} .sidebar .widget ul li {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #f3f4f6;
}
.sidebar .widget ul li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}  .advertisement,
.textwidget {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 16px;
background: #fafafa;
text-align: center;
position: relative;
}
.advertisement::before {
content: "SPONSORED";
display: block;
font-size: 10px;
color: #9ca3af;
margin-bottom: 8px;
letter-spacing: 0.08em;
text-align: center;
} body {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 15px;
line-height: 1.7;
color: #1f2937;
letter-spacing: 0.02em;
} h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.01em;
color: #111827;
} a {
color: var(--primary);
text-decoration: none;
transition: color 0.2s;
}
a:hover {
color: var(--primary-hover);
} .entry-content {
font-size: 16px;
line-height: 1.8;
}
.entry-content p {
margin-bottom: 1.5em;
} .btn,
.button,
input[type="submit"] {
background: var(--primary);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.btn:hover,
.button:hover,
input[type="submit"]:hover {
background: var(--primary-hover);
transform: translateY(-1px);
} @media (max-width: 768px) {
.site-title {
font-size: 18px;
}
.article-container h2.entry-title {
font-size: 15px;
}
#nav .nav > li > a {
padding: 12px 14px;
font-size: 13px;
}
}  .article-container {
animation: fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} html {
scroll-behavior: smooth;
}