.blog-shell { background: #fff; color: #222629; }
.blog-index { width: min(1120px, calc(100% - 48px)); min-height: 70vh; margin: 0 auto; padding: var(--public-page-heading-offset) 0 120px; }
.blog-index-head { margin-bottom: var(--public-title-content-gap); }
.blog-index-head h1 { margin: 0; text-align: center; font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.blog-card { min-width: 0; }
.blog-card a { display: block; color: inherit; text-decoration: none; }
.blog-card img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 5px; background: #f1f3f2; object-fit: cover; }
.blog-card h2 { display: -webkit-box; overflow: hidden; margin: 11px 0 0; font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: .01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-card a:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.blog-empty-public { grid-column: 1 / -1; color: #747b80; }

.blog-article { width: min(640px, calc(100% - 40px)); min-height: 70vh; margin: 0 auto; padding: 28px 0 100px; }
.blog-back-link { display: inline-block; margin-top: 70px; color: #64706e; text-decoration: none; }
.blog-article article > header { margin-top: 30px; }
.blog-article article > header h1 { margin: 0; color: #24292d; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", Arial, sans-serif; font-size: clamp(28px, 4.8vw, 38px); font-weight: 700; line-height: 1.45; letter-spacing: -.025em; overflow-wrap: anywhere; }
.blog-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; margin-top: 14px; color: #858b90; font-size: 13px; }
.blog-article-meta a { color: #126fbe; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-article-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-article-meta time { display: inline; margin: 0; color: inherit; }
.blog-cover { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; margin: 0; border-radius: 7px; background: #f1f3f2; object-fit: cover; cursor: zoom-in; }
.blog-content { width: 35em; max-width: 100%; margin-top: 46px; font-size: 17px; line-height: 2; }
.blog-content p { margin: 0 0 1.35em; }
.blog-content h2 { margin: 2.5em 0 .85em; padding-bottom: .35em; border-bottom: 1px solid #e1e5e6; font-size: 30px; line-height: 1.45; }
.blog-content h3 { margin: 2.1em 0 .75em; font-size: 23px; line-height: 1.5; }
.blog-content h2,
.blog-content h3 { scroll-margin-top: 86px; }
.blog-content ul,
.blog-content ol { margin: 1em 0 1.5em; padding-left: 1.75em; }
.blog-content ul { list-style: disc outside; }
.blog-content ol { list-style: decimal outside; }
.blog-content li { display: list-item; margin: .35em 0; }
.blog-content li p { margin: 0; }
.blog-content blockquote { margin: 1.6em 0; border: 0; background: #f3f5f6; color: #3f464a; padding: 22px 26px; }
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-speech { display: flex; align-items: flex-start; gap: 16px; margin: 2.2em 0; }
.blog-speech-right { flex-direction: row-reverse; }
.blog-speech-person { display: flex; width: 74px; flex: 0 0 74px; flex-direction: column; align-items: center; gap: 6px; }
.blog-speech-avatar,
.blog-speech-avatar-fallback { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #dfe3e5; border-radius: 50%; background: #edf7f5; color: #16816d; object-fit: cover; font-size: 21px; font-weight: 800; }
.blog-speech-avatar { position: relative; box-sizing: border-box; overflow: hidden; flex-shrink: 0; }
.blog-speech-name { overflow: hidden; width: 78px; color: #737b80; font-size: 12px; line-height: 1.35; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.blog-speech-message { position: relative; box-sizing: border-box; min-width: 100px; min-height: 62px; max-width: calc(100% - 90px); border: 1px solid #d7dcde; border-radius: 9px; background: #fff; padding: 14px 18px; font-size: 18px; line-height: 1.75; }
.blog-speech-message::before,
.blog-speech-message::after { position: absolute; top: 23px; width: 0; height: 0; border-style: solid; content: ""; }
.blog-speech-left .blog-speech-message::before { left: -9px; border-width: 8px 9px 8px 0; border-color: transparent #d7dcde transparent transparent; }
.blog-speech-left .blog-speech-message::after { left: -7px; border-width: 7px 8px 7px 0; border-color: transparent #fff transparent transparent; }
.blog-speech-right .blog-speech-message::before { right: -9px; border-width: 8px 0 8px 9px; border-color: transparent transparent transparent #d7dcde; }
.blog-speech-right .blog-speech-message::after { right: -7px; border-width: 7px 0 7px 8px; border-color: transparent transparent transparent #fff; }
.blog-speech-message p { margin: 0; }
.blog-content :not(pre) > code { border-radius: 4px; background: #eff2f2; padding: .15em .38em; font-size: .9em; }
.blog-code-block { position: relative; margin: 1.7em 0; }
.blog-content .blog-code-block pre { overflow-x: auto; margin: 0; border-radius: 9px; background: #202529; color: #f4f6f7; padding: 52px 20px 20px; line-height: 1.7; }
.blog-code-copy { position: absolute; z-index: 2; top: 10px; right: 10px; border: 1px solid #596268; border-radius: 6px; background: #30373c; color: #f4f6f7; cursor: pointer; padding: 6px 11px; font: inherit; font-size: 12px; line-height: 1.2; }
.blog-code-copy:hover { border-color: #879196; background: #3a4247; }
.blog-code-copy.is-copied { border-color: #56bda7; color: #8ce0ce; }
.blog-content hr { margin: 3.5em auto; border: 0; border-top: 1px solid #dfe3e4; }
.blog-content figure { margin: 2em 0; }
.blog-content figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 7px; cursor: zoom-in; }
.blog-content figure.blog-image-small { width: min(78%, 480px); margin-right: auto; margin-left: auto; }
.blog-content figcaption { margin-top: 9px; color: #6d7579; font-size: 14px; line-height: 1.65; text-align: center; }
.blog-content figcaption p { margin: 0; }
.blog-content .blog-image-link { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
.blog-content .blog-image-link img { cursor: pointer; }
.blog-table-scroll { overflow-x: auto; margin: 2em 0; }
.blog-content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.65; }
.blog-content th,
.blog-content td { border: 1px solid #dce1e2; padding: 10px 12px; text-align: left; vertical-align: top; }
.blog-content th { background: #f2f6f5; font-weight: 700; }
.blog-content a { color: #126fbe; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-content u { color: #d94b43; font-weight: 700; text-decoration: none; }
.blog-content .blog-link-card-wrap { margin: 1.8em 0; }
.blog-content .blog-link-card { display: grid; box-sizing: border-box; width: 100%; min-height: 124px; grid-template-columns: 168px minmax(0, 1fr); overflow: hidden; border: 1px solid #cfd5d8; border-radius: 10px; background: #fff; color: #23282b; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.blog-content .blog-link-card:hover { border-color: #9da8ad; background: #fafbfb; }
.blog-link-card-media { position: relative; display: grid; min-height: 122px; place-items: center; overflow: hidden; border-right: 1px solid #e1e5e7; background: #f1f4f5; }
.blog-link-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; opacity: 0; transition: opacity .15s ease; }
.blog-link-card.has-preview-image .blog-link-card-media img { opacity: 1; }
.blog-link-card-fallback { color: #859096; font-size: 25px; font-weight: 700; }
.blog-link-card-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 15px 17px; }
.blog-link-card-domain { overflow: hidden; color: #657079; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.blog-link-card-title { display: -webkit-box; overflow: hidden; margin-top: 4px; color: #202528; font-size: 16px; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-link-card-description { display: -webkit-box; overflow: hidden; margin-top: 5px; color: #687177; font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.blog-link-card-description[hidden] { display: none; }
.blog-content p:has(> .blog-cta-button:only-child) { margin: 2em 0; }
.blog-content .blog-cta-button { display: flex; box-sizing: border-box; width: 100%; min-height: 56px; align-items: center; justify-content: center; border-radius: 8px; background: #ef5b4d; box-shadow: 0 3px 0 #bc3f35; color: #fff; padding: 14px 20px; font-weight: 800; line-height: 1.45; text-align: center; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.blog-content .blog-cta-button::after { margin-left: .6em; content: "↗"; font-size: .9em; }
.blog-content .blog-cta-button:hover { background: #df4c40; box-shadow: 0 1px 0 #a9342c; transform: translateY(2px); }
.blog-toc { margin: 2em 0; border: 1px solid #e0e5e5; border-radius: 10px; background: #f7f9f8; padding: 20px 24px; }
.blog-toc summary { display: flex; align-items: center; cursor: pointer; font-weight: 700; list-style: none; }
.blog-toc summary::-webkit-details-marker { display: none; }
.blog-toc summary::before { margin-right: 9px; color: #687174; content: "▶"; font-size: 11px; font-weight: 400; line-height: 1; transition: transform .15s ease; }
.blog-toc[open] summary { margin-bottom: 12px; }
.blog-toc[open] summary::before { transform: rotate(90deg); }
.blog-toc ul { margin: 0; padding: 0; list-style: none; }
.blog-toc li { margin: .55em 0; }
.blog-toc a { display: block; }
.blog-embed { position: relative; width: 100%; margin: 2em 0; padding-top: 56.25%; }
.blog-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.blog-embed-link { overflow-wrap: anywhere; border: 1px solid #e0e4e5; border-radius: 8px; padding: 14px 16px; }
.blog-lightbox { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; overflow: hidden; border: 0; background: transparent; padding: 48px; box-sizing: border-box; }
.blog-lightbox[open] { display: grid; place-items: center; }
.blog-lightbox::backdrop { background: rgba(10, 13, 15, .88); }
.blog-lightbox img { display: block; max-width: min(calc(100vw - 96px), 1600px); max-height: calc(100vh - 96px); border-radius: 4px; object-fit: contain; }
.blog-lightbox-close { position: fixed; z-index: 2; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: transparent; cursor: pointer; font-size: 0; }
.blog-lightbox-close::before,
.blog-lightbox-close::after { position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 2px; background: #202629; content: ""; transform-origin: center; }
.blog-lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.blog-lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.blog-to-top { position: fixed; right: max(18px, calc((100vw - 1120px) / 2)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 30; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #d9ddde; border-radius: 50%; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 18px rgba(20, 28, 31, .14); color: #292f32; cursor: pointer; opacity: 0; font: inherit; font-size: 24px; line-height: 1; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.blog-to-top:hover { background: #f2f5f4; }
.blog-to-top:focus-visible { outline: 2px solid #16816d; outline-offset: 3px; }
.blog-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 820px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .blog-index { width: min(100% - 32px, 420px); }
  .blog-grid { grid-template-columns: 1fr; gap: 38px; }
  .blog-article { padding-top: 16px; }
  .blog-back-link { margin-top: 52px; }
  .blog-content { font-size: 16px; }
  .blog-content table { min-width: 560px; }
  .blog-lightbox { padding: 28px 16px; }
  .blog-lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 56px); }
  .blog-speech { gap: 11px; }
  .blog-speech-person { width: 58px; flex-basis: 58px; }
  .blog-speech-avatar,
  .blog-speech-avatar-fallback { width: 52px; height: 52px; }
  .blog-speech-message { min-height: 52px; max-width: calc(100% - 69px); padding: 11px 13px; font-size: 17px; }
  .blog-content .blog-link-card { min-height: 104px; grid-template-columns: 118px minmax(0, 1fr); }
  .blog-link-card-media { min-height: 102px; }
  .blog-link-card-copy { padding: 11px 13px; }
  .blog-link-card-title { font-size: 14px; line-height: 1.4; }
  .blog-link-card-description { display: none; }
  .blog-to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; font-size: 22px; }
}