.blog-hero { position: relative; overflow: hidden; padding: 105px 0 112px; background: #f2f5ff; border-bottom: 1px solid #dce3f4; }
.blog-hero::before { content: ''; position: absolute; width: 650px; height: 650px; right: -150px; top: -240px; background: radial-gradient(circle, rgba(202,255,61,.58), transparent 65%); }
.blog-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 80px; align-items: center; }
.blog-hero h1 { max-width: 850px; margin: 24px 0; font-size: clamp(56px, 6.5vw, 94px); letter-spacing: -.066em; line-height: .98; }
.blog-hero h1 span { color: var(--blue); }
.blog-hero p { max-width: 640px; margin: 0; color: #5a6578; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
.blog-hero-visual { position: relative; display: grid; place-items: center; width: 280px; height: 280px; justify-self: end; border-radius: 55px; color: var(--ink); background: var(--lime); transform: rotate(8deg); box-shadow: 0 32px 70px rgba(38,63,97,.16); }
.blog-hero-visual span { font-size: 172px; font-weight: 900; line-height: 1; transform: rotate(-8deg); }
.blog-hero-visual i { position: absolute; width: 74px; height: 74px; top: -23px; right: -25px; border-radius: 50%; background: var(--blue); border: 12px solid #f2f5ff; }
.blog-hero-visual b { position: absolute; left: -32px; bottom: 10px; display: grid; place-items: center; width: 78px; height: 78px; color: #fff; background: var(--deep); border-radius: 22px; font-size: 50px; transform: rotate(-8deg); }
.blog-list-section { padding: 104px 0 120px; background: #fff; }
.blog-section-top { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 38px; }
.blog-section-top h2 { margin: 14px 0 0; font-size: clamp(37px, 4vw, 56px); letter-spacing: -.05em; line-height: 1.1; }
.blog-count { color: #687487; font-size: 15px; font-weight: 700; }
.blog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.blog-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dce4ef; border-radius: 27px; box-shadow: 0 15px 35px rgba(30,48,78,.045); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.blog-card:hover { transform: translateY(-5px); border-color: #9fb6ed; box-shadow: 0 22px 48px rgba(30,48,78,.11); }
.blog-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.blog-card-art { position: relative; display: block; height: 215px; overflow: hidden; background: linear-gradient(135deg, #e9efff, #d9e4ff); }
.blog-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.blog-card:hover .blog-card-art img { transform: scale(1.035); }
.blog-card:nth-child(3n+2) .blog-card-art { background: linear-gradient(135deg, #e6f6e4, #d5efbb); }
.blog-card:nth-child(3n+3) .blog-card-art { background: linear-gradient(135deg, #f7f2e7, #e9edfb); }
.blog-art-grid { position: absolute; inset: 34px; border-radius: 22px; border: 2px solid rgba(37,75,146,.18); background: repeating-linear-gradient(to bottom, transparent 0 36px, rgba(37,75,146,.12) 37px 38px); transform: rotate(-5deg); }
.blog-art-line { position: absolute; top: 38px; left: 42%; color: var(--blue); font-size: 125px; font-weight: 900; line-height: 1; transform: rotate(-12deg); }
.blog-art-dot { position: absolute; right: 28px; top: 24px; width: 58px; height: 58px; border: 11px solid var(--lime); border-radius: 50%; }
.blog-card-body { display: flex; flex: 1; flex-direction: column; padding: 27px; }
.blog-card-meta, .blog-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.blog-card-meta { color: #586b8c; font-size: 13px; font-weight: 800; }
.blog-card-meta span:first-child { color: var(--blue); }
.blog-card-body > h3 { margin: 17px 0 11px; font-size: 25px; line-height: 1.16; letter-spacing: -.035em; }
.blog-card-excerpt { color: #606d7d; font-size: 16px; line-height: 1.55; }
.blog-card-bottom { margin-top: auto; padding-top: 30px; color: #788394; font-size: 14px; }
.blog-card-arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--blue); background: #eff3ff; font-size: 23px; }
.blog-pagination { display: flex; justify-content: space-between; gap: 16px; margin-top: 46px; font-weight: 750; }
.blog-pagination a { color: var(--blue); }
.blog-pagination [aria-disabled] { color: #a9b1bd; }
.blog-empty { font-size: 18px; color: #606d7d; }
.blog-cta { padding: 60px 0; color: #fff; background: var(--deep); }
.blog-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.blog-cta h2 { margin: 16px 0 10px; font-size: clamp(34px, 3.5vw, 50px); letter-spacing: -.05em; }
.blog-cta p { margin: 0; color: #c9d2df; font-size: 17px; line-height: 1.5; }
.blog-cta .button { flex-shrink: 0; }
.article-hero { padding: 54px 0 72px; background: #f2f5ff; }
.article-hero-inner { max-width: 1100px; }
.blog-breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 72px; color: #68758a; font-size: 14px; font-weight: 700; }
.blog-breadcrumbs a:hover { color: var(--blue); }
.article-hero h1 { max-width: 1000px; margin: 22px 0; font-size: clamp(44px, 5.5vw, 78px); line-height: 1.04; letter-spacing: -.055em; }
.article-lead { max-width: 780px; margin: 0; color: #5b6678; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; color: #66758b; font-size: 15px; font-weight: 700; }
.article-cover { margin-top: 46px; overflow: hidden; border-radius: 28px; background: #e8edfb; box-shadow: 0 25px 55px rgba(30,48,78,.1); }
.article-cover img { display: block; width: 100%; max-height: 520px; object-fit: cover; aspect-ratio: 3 / 2; }
.article-main { padding: 78px 0 100px; }
.article-content { max-width: 800px; margin: 0 auto; font-size: 19px; line-height: 1.8; }
.article-content p { margin: 0 0 27px; color: #374357; }
.article-content h2 { margin: 48px 0 19px; font-size: clamp(29px, 3vw, 38px); line-height: 1.18; letter-spacing: -.035em; }
.article-content ul { padding-left: 30px; margin: 0 0 31px; color: #374357; }
.article-content li { padding-left: 4px; margin-bottom: 10px; }
.article-content li::marker { color: var(--blue); }
.article-inline-image { margin: 42px 0 48px; }
.article-inline-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; background: #e8edfb; box-shadow: 0 16px 36px rgba(30,48,78,.09); }
.article-inline-image figcaption { margin-top: 13px; color: #68758a; font-size: 14px; line-height: 1.5; }
.article-note { margin: 42px 0; padding: 28px 33px; border-left: 5px solid var(--blue); border-radius: 0 20px 20px 0; background: #f1f5ff; }
.article-note strong { display: block; margin-bottom: 7px; color: var(--blue); font-size: 16px; }
.article-note p { margin: 0; }
.article-end { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 70px; padding-top: 25px; border-top: 1px solid #dbe2ed; color: #788394; font-size: 15px; }
.article-end a { color: var(--blue); font-weight: 800; }
.blog-related { background: #f7f9fc; }
.home-blog { background: #f7f9fc; }
.home-blog-all { color: var(--blue); font-size: 17px; font-weight: 800; white-space: nowrap; }
@media (max-width: 960px) { .blog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-hero-inner { grid-template-columns: 1fr 210px; gap: 20px; } .blog-hero-visual { width: 180px; height: 180px; border-radius: 36px; } .blog-hero-visual span { font-size: 110px; } }
@media (max-width: 680px) { .blog-hero { padding: 72px 0; } .blog-hero-inner { display: block; } .blog-hero-visual { display: none; } .blog-list-section { padding: 72px 0; } .blog-card-grid { grid-template-columns: 1fr; } .blog-card-art { height: 175px; } .blog-section-top { align-items: start; flex-direction: column; } .blog-cta-inner { align-items: start; flex-direction: column; } .article-hero { padding: 30px 0 55px; } .blog-breadcrumbs { margin-bottom: 50px; } .article-main { padding: 55px 0 70px; } .article-content { font-size: 17px; line-height: 1.7; } .article-end { align-items: start; flex-direction: column; } }