html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: rgb(245,242,238); }
* { box-sizing: border-box; }
@keyframes g5In { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
#go5-blog { --g5-content: 1500px; --g5-gutter: 48px; }
@media (min-width: 1025px) {
#go5-blog header,
#go5-blog > main > nav.g5-crumb,
#go5-blog section[data-screen-label="Blog Hero"],
#go5-blog section[data-screen-label="Search Filters"],
#go5-blog section[data-screen-label="Article Grid"],
#go5-blog section[data-screen-label="Soft CTA"],
#go5-blog footer {
padding-left: max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
padding-right: max(var(--g5-gutter), calc((100% - var(--g5-content)) / 2)) !important;
}
}
#go5-blog .g5-eyebrow { font-family:'Inter',sans-serif; font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#8c8c8c; margin:0; }
#go5-blog .g5-eyebrow-light { color:rgba(255,255,255,0.7); }
#go5-blog .g5-h1 { font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:48px; line-height:1.4; letter-spacing:-0.5px; color:#fff; margin:0; }
#go5-blog .g5-h2 { font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:clamp(26px,3vw,36px); line-height:1.32; letter-spacing:-0.01em; color:#222; margin:0; }
#go5-blog .g5-lead { font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:18px; line-height:30px; color:rgba(255,255,255,0.78); max-width:620px; margin:0; }
#go5-blog .g5-body { font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:15px; line-height:1.75; color:#5a5a5a; margin:0; }
#go5-blog a { transition: transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease; }
.g5-in { animation: g5In .7s cubic-bezier(.2,.75,.3,1) both; }
/* filter pills */
#go5-blog .g5-filter-pill { text-decoration: none; font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:14px; padding:9px 18px; border-radius:100px; border:1px solid rgb(222,219,214); color:rgb(90,90,90); white-space:nowrap; }
#go5-blog .g5-filter-pill:hover { border-color: rgb(38,150,175); color: rgb(38,150,175); }
#go5-blog .g5-filter-pill.is-active { background: rgb(30,30,30); border-color: rgb(30,30,30); color: #fff; }
/* article cards (light theme, matches Home article-card visual language) */
#go5-blog .g5-article-card { border-radius:12px; overflow:hidden; background: rgb(250,248,245); box-shadow: 0 1px 8px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(0,0,0,0.05); display:flex; flex-direction:column; text-decoration:none; transition: transform .4s cubic-bezier(.2,.75,.3,1), box-shadow .4s cubic-bezier(.2,.75,.3,1); }
#go5-blog .g5-article-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(0,0,0,0.22); }
#go5-blog .g5-article-card .g5-thumb { transition: transform .55s cubic-bezier(.2,.75,.3,1); }
#go5-blog .g5-article-card:hover .g5-thumb { transform: scale(1.05); }
#go5-blog .g5-read-more { display:flex; align-items:center; gap:4px; font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:12px; color:rgb(34,34,34); }
#go5-blog .g5-article-card:hover .g5-read-more { color: rgb(38,150,175); }
#go5-blog .g5-article-card:hover .g5-read-more svg { transform: translateX(3px); }
#go5-blog .g5-read-more svg { transition: transform .3s cubic-bezier(.2,.75,.3,1); }
/* pagination */
#go5-blog .g5-page { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:rgb(90,90,90); }
#go5-blog .g5-page.is-active { background: rgb(30,30,30); color:#fff; }
#go5-blog .g5-page:hover:not(.is-active) { background: rgb(232,228,222); }
#go5-blog .g5-pagenav { font-family:'Noto Sans JP',sans-serif; font-weight:500; font-size:14px; color:rgb(90,90,90); text-decoration:none; display:flex; align-items:center; gap:6px; }
#go5-blog .g5-pagenav:hover { color: rgb(34,34,34); }
/* search form */
#go5-blog .g5-search-form { display:flex; align-items:center; gap:0; background:#fff; border:1px solid rgb(222,219,214); border-radius:100px; padding:4px 4px 4px 20px; max-width: 420px; width:100%; }
#go5-blog .g5-search-form input { border:none; outline:none; flex:1; font-family:'Noto Sans JP',sans-serif; font-size:14px; color:rgb(40,40,40); background:transparent; min-width:0; }
#go5-blog .g5-search-form input::placeholder { color: rgb(160,160,160); }
#go5-blog .g5-search-form button { border:none; cursor:pointer; border-radius:100px; padding:11px 22px; font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:13px; color:#fff; background: linear-gradient(90deg, rgb(100,200,220), rgb(231,100,122)); flex-shrink:0; }
#go5-blog .g5-search-form button:hover { opacity:.9; }
/* sort/filter toolbar (A-Z, date, author, mini search) */
#go5-blog .g5-select { box-sizing: border-box; appearance: none; -webkit-appearance: none; border: 1px solid rgb(222,219,214); background: #fff; border-radius: 8px; padding: 7px 34px 7px 12px; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; font-size: 13px; color: rgb(50,50,50); cursor: pointer; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
#go5-blog .g5-select:hover { border-color: rgb(38,150,175); }
#go5-blog .g5-mini-search { display: flex; align-items: center; gap: 8px; border: 1px solid rgb(222,219,214); background: #fff; border-radius: 8px; padding: 7px 12px; }
#go5-blog .g5-mini-search input { border: none; outline: none; background: transparent; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; color: rgb(40,40,40); width: 150px; }
#go5-blog .g5-mini-search input::placeholder { color: rgb(170,170,170); }
#go5-blog .g5-mini-search:focus-within { border-color: rgb(38,150,175); }
/* CTA button */
#go5-blog .g5-cta-soft { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:100px; background: rgb(34,34,34); color:#fff; text-decoration:none; font-family:'Noto Sans JP',sans-serif; font-weight:600; font-size:15px; }
#go5-blog .g5-cta-soft:hover { transform: translateY(-3px); background: rgb(20,20,20); }
/* responsive */
@media (max-width: 1024px) {
#go5-blog header,
#go5-blog > main > nav.g5-crumb,
#go5-blog section[data-screen-label="Blog Hero"],
#go5-blog section[data-screen-label="Search Filters"],
#go5-blog section[data-screen-label="Article Grid"],
#go5-blog section[data-screen-label="Soft CTA"] { padding-left: 44px !important; padding-right: 44px !important; }
#go5-blog .g5-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
#go5-blog section[data-screen-label="Blog Hero"] h1 { font-size: 36px !important; }
#go5-blog section[data-screen-label="Search Filters"] { flex-wrap: wrap !important; row-gap: 16px !important; }
#go5-blog .g5-sort-row { flex-direction: column !important; align-items: flex-start !important; }
#go5-blog .g5-sort-form { width: 100% !important; }
#go5-blog .g5-select { flex: 1 1 auto !important; min-width: 0 !important; }
#go5-blog .g5-sort-form label { flex: 1 1 auto !important; min-width: 0 !important; }
#go5-blog .g5-mini-search { flex: 1 1 100% !important; }
#go5-blog .g5-mini-search input { width: 100% !important; }
}
@media (max-width: 640px) {
#go5-blog header,
#go5-blog > main > nav.g5-crumb,
#go5-blog section[data-screen-label="Blog Hero"],
#go5-blog section[data-screen-label="Search Filters"],
#go5-blog section[data-screen-label="Article Grid"],
#go5-blog section[data-screen-label="Soft CTA"] { padding-left: 22px !important; padding-right: 22px !important; }
#go5-blog section[data-screen-label="Blog Hero"] { min-height: 380px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
#go5-blog section[data-screen-label="Blog Hero"] h1 { font-size: clamp(28px, 8vw, 36px) !important; }
#go5-blog section[data-screen-label="Blog Hero"] p { font-size: 15px !important; line-height: 25px !important; }
#go5-blog .g5-grid-3 { grid-template-columns: 1fr !important; }
#go5-blog .g5-filters { flex-wrap: wrap !important; }
#go5-blog section[data-screen-label="Search Filters"] { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; }
#go5-blog .g5-search-form { max-width: 100% !important; }
#go5-blog .g5-soft-cta-inner { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; padding: 32px 26px !important; }
#go5-blog .g5-cta-soft { justify-content: center !important; width: 100% !important; }
#go5-blog .g5-pagination { flex-wrap: wrap !important; gap: 8px !important; }
}