/*
* blog.htmlのページ固有のスタイル（custom.css・site.css の後に読み込む）。
* Tailwind のユーティリティクラス（px-4、lg:grid 等）は定義していないので、HTML に書いても効かない。
* 新しい見た目が必要なときは、このファイルにクラスを追加して HTML から使うこと。
*
* ブレークポイント: sm 640px / md 768px / lg 1024px / xl 1280px / 2xl 1536px
*/
/* ================================================================ ページ全体（body） */
.blog-list-page { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f8fafc; }
/* ================================================================ blog-list-hero（ブログ記事一覧） */
.blog-list-hero { padding-bottom: 2.5rem; padding-top: 7rem; }
.blog-list-hero-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.blog-list-hero-container { margin-left: auto; margin-right: auto; max-width: 72rem; }
.blog-list-hero-eyebrow { margin-bottom: 0.75rem; }
.blog-list-hero-title {
margin-bottom: 1rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 900;
color: #0f172a;
}
.blog-list-hero-lead {
max-width: 48rem;
font-size: 1rem;
line-height: 1.625;
color: #475569;
}
.blog-list-hero-link { font-weight: 600; color: #1d4ed8; }
.blog-list-hero-link:hover { text-decoration-line: underline; }
@media (min-width: 640px) {
.blog-list-hero-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.blog-list-hero-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.blog-list-hero { padding-bottom: 3.5rem; padding-top: 9rem; }
.blog-list-hero-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.blog-list-hero-title { font-size: 3rem; line-height: 1; }
.blog-list-hero-lead { font-size: 1.125rem; line-height: 1.75rem; }
}
@media (min-width: 1280px) {
.blog-list-hero-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.blog-list-hero-inner { max-width: 1536px; }
}
/* ================================================================ blog-list-posts */
.blog-list-posts { padding-bottom: 4rem; }
.blog-list-posts-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.blog-list-posts-index {
margin-left: auto;
margin-right: auto;
display: grid;
max-width: 72rem;
column-gap: 2rem;
border-radius: 1rem;
border-width: 1px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
border-color: #e2e8f0;
background-color: #ffffff;
}
@media (min-width: 640px) {
.blog-list-posts-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.blog-list-posts-index { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
.blog-list-posts-inner { max-width: 768px; }
.blog-list-posts-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.blog-list-posts { padding-bottom: 6rem; }
.blog-list-posts-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.blog-list-posts-index {
column-gap: 2.5rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
@media (min-width: 1280px) {
.blog-list-posts-inner { max-width: 1280px; }
.blog-list-posts-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1536px) {
.blog-list-posts-inner { max-width: 1536px; }
}
/* ================================================================ blog-list-post（【2027年展望】AI積算の今後｜標準労務費・AIエージェン） */
.blog-list-post-date {
margin-bottom: 0.375rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: #64748b;
}
.blog-list-post-title {
margin-bottom: 0.375rem;
font-size: 1rem;
font-weight: 800;
line-height: 1.375;
color: #0f172a;
}
.blog-list-post-title-link:hover { color: #1d4ed8; }
.blog-list-post-excerpt {
margin-bottom: 0.5rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.875rem;
line-height: 1.625;
color: #475569;
}
.blog-list-post-read-link {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: #1d4ed8;
}
.blog-list-post-read-link:hover { text-decoration-line: underline; }
/* ================================================================ blog-list-about（Connected Baseの実務知見を、このサイトで継続公） */
.blog-list-about { padding-bottom: 4rem; }
.blog-list-about-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.blog-list-about-panel {
margin-left: auto;
margin-right: auto;
max-width: 72rem;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
border-width: 1px;
border-left-width: 4px;
padding: 1.5rem;
border-color: #e2e8f0;
border-left-color: #0066ff;
background-color: #ffffff;
}
.blog-list-about-title {
margin-bottom: 0.75rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 900;
color: #0f172a;
}
.blog-list-about-text {
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.625;
color: #334155;
}
.blog-list-about-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
}
.blog-list-about-link { color: #1d4ed8; }
.blog-list-about-link:hover { text-decoration-line: underline; }
@media (min-width: 640px) {
.blog-list-about-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.blog-list-about-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.blog-list-about { padding-bottom: 5rem; }
.blog-list-about-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.blog-list-about-panel { padding: 2rem; }
.blog-list-about-text { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1280px) {
.blog-list-about-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.blog-list-about-inner { max-width: 1536px; }
}