.guide-main .guide-links{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:16px;margin:24px 0}
.guide-main a:not(.renew-chip){color:var(--on-surface-accent)}
.guide-main .guide-links>a:not(.renew-chip){font-weight:900;color:var(--on-surface-accent);text-underline-offset:4px}
.guide-main .guide-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:28px 0}
.guide-swatches>div{background:white;border:1px solid #ddd;border-radius:16px;overflow:hidden}
.guide-swatches i{display:block;height:80px;border-bottom:1px solid #ddd}
.guide-swatches strong,.guide-swatches code{display:block;margin:12px;font-size:12px}
.guide-swatches code{font-family:Inter,"Noto Sans JP",sans-serif}
.guide-main .guide-label{color:var(--on-surface-accent);font-size:12px;letter-spacing:.14em;font-weight:900}
.guide-main .guide-type,.guide-main .guide-card{background:white;border-radius:24px;padding:32px;margin-top:24px}
.guide-main .guide-title{font-size:32px;font-weight:900;line-height:1.5;margin:24px 0}
.guide-main .guide-lead{font-weight:900}
.guide-main .guide-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.guide-table th,.guide-table td{text-align:left;padding:16px;border-bottom:1px solid #ccc;vertical-align:top}
.guide-table th{font-weight:900}.guide-table td{font-weight:400}
.guide-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.guide-main .guide-card-dark{background:#444;color:white;display:flex;flex-direction:column;gap:16px}
.guide-main .guide-card-dark .guide-logo{background:#444}.guide-main .guide-card-dark .guide-logo img{filter:brightness(0) invert(1)}
.guide-main .guide-card-dark strong{font-weight:900}.guide-main .guide-card-dark p{color:white;border-top:1px solid #ffffff40;padding-top:16px}
.guide-layout{display:flex;gap:16px;padding:48px 24px;position:relative;isolation:isolate;margin:24px 0}
.guide-layout::before{content:"";position:absolute;inset:0 18% 16px -32px;background:#e3e3e3;border-radius:0 64px 64px 0;z-index:-1}
.guide-layout>div{height:100px;flex:1;background:white;border:1px solid #ddd;border-radius:24px}
.guide-video{display:block;width:100%;max-width:640px;border-radius:24px;margin:24px 0;filter:grayscale(1)}
.guide-logo{padding:32px;background:white;border-radius:24px;margin:24px 0}.guide-logo img{width:214px;height:auto}
#assets>.guide-cards{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start;background:#fff;border:1px solid #e5e5e5;border-radius:24px;padding:24px}#assets>.guide-cards>.guide-video{max-width:320px;margin:0;filter:none;border-radius:16px}#assets>.guide-cards>div>.guide-cards{gap:16px}#assets .guide-card{display:block;padding:20px;background:#f5f5f5;align-self:stretch}#assets .guide-card-dark{background:#444}#assets .guide-logo{padding:16px;margin:12px 0}
.guide-icons{display:flex;gap:24px;margin:24px 0;color:var(--on-surface-accent)}.guide-icons span{font-size:28px}
.guide-main section[id]{scroll-margin-top:140px}
@media(max-width:767px){.guide-main .guide-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-cards,#assets>.guide-cards{grid-template-columns:1fr}.guide-main .guide-title{font-size:24px}.guide-main .guide-type,.guide-main .guide-card{padding:24px}.guide-table th,.guide-table td{padding:12px 6px;font-size:12px}.guide-layout{padding-inline:0;gap:8px}.guide-layout>div{border-radius:16px}#assets>.guide-cards>.guide-video{max-width:100%;margin-inline:auto}}

.guide-main .renew-nav-group{display:block;width:280px;margin-top:16px}
.guide-main .renew-submenu{position:static;margin:8px 0 0;box-shadow:0 12px 28px #0002}
.guide-main .renew-submenu a{color:#111;text-decoration:none}
.guide-main .renew-submenu a:hover,.guide-main .renew-submenu a:focus-visible{color:#111;background:#eee}

/* 色見本: renewal.css のトークンをそのまま塗る。値の文字は renewal.js の guide-swatches ブロックが書く */
.guide-swatches [data-token="--interactive"] i{background:var(--interactive)}
.guide-swatches [data-token="--on-interactive"] i{background:var(--on-interactive)}
.guide-swatches [data-token="--on-dark-accent"] i{background:var(--on-dark-accent)}
.guide-swatches [data-token="--on-surface-accent"] i{background:var(--on-surface-accent)}
.guide-swatches [data-token="--surface-card"] i{background:var(--surface-card)}
.guide-swatches [data-token="--surface"] i{background:var(--surface)}
.guide-swatches [data-token="--surface-2"] i{background:var(--surface-2)}
.guide-swatches [data-token="--surface-3"] i{background:var(--surface-3)}
.guide-swatches [data-token="--line"] i{background:var(--line)}
.guide-swatches [data-token="--surface-dark"] i{background:var(--surface-dark)}
.guide-swatches [data-token="--surface-hero"] i{background:var(--surface-hero)}
.guide-swatches [data-token="--surface-deep"] i{background:var(--surface-deep)}
.guide-swatches [data-token="--on-surface"] i{background:var(--on-surface)}
.guide-swatches .guide-swatch-logo i{background:#438093}