:root{--space-50:.125rem;--space-100:.25rem;--space-150:.375rem;--space-200:.5rem;--space-300:.75rem;--space-400:1rem;--space-500:1.25rem;--space-600:1.5rem;--space-1000:2.5rem;--space-2000:5rem;--space-page-inline:1.5rem;--space-section:2.5rem;--radius-xs:.125rem;--radius-sm:.375rem;--radius-md:.625rem;--radius-full:9999px;--radius-mark:.125rem;--radius-control:.375rem;--radius-surface:.625rem;--radius-pill:9999px;--border-width-thin:1px;--border-width-thick:2px}@font-face{font-family:LINE Seed JP;src:url(/assets/LINESeedJP-Regular-DWYFgYPx.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:LINE Seed JP;src:url(/assets/LINESeedJP-Bold-COcYo0OG.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--font-family-sans:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-weight-regular:400;--font-weight-bold:700;--font-line-height-tight:1.3;--font-line-height-ui:1.5;--font-line-height-body:1.75;--typography-title-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-title-font-size:1.5rem;--typography-title-font-weight:700;--typography-title-letter-spacing:0px;--typography-title-line-height:1.3;--typography-heading-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-heading-font-size:1.25rem;--typography-heading-font-weight:700;--typography-heading-letter-spacing:0px;--typography-heading-line-height:1.3;--typography-body-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-body-font-size:1rem;--typography-body-font-weight:400;--typography-body-letter-spacing:0px;--typography-body-line-height:1.75;--typography-ui-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-ui-font-size:1rem;--typography-ui-font-weight:400;--typography-ui-letter-spacing:0px;--typography-ui-line-height:1.5;--typography-control-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-control-font-size:1rem;--typography-control-font-weight:700;--typography-control-letter-spacing:0px;--typography-control-line-height:1.5;--typography-caption-font-family:"LINE Seed JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;--typography-caption-font-size:.875rem;--typography-caption-font-weight:400;--typography-caption-letter-spacing:0px;--typography-caption-line-height:1.5;--size-control-height-sm:2rem;--size-control-height-md:2.5rem;--size-control-height-lg:3rem;--size-control-min-width-sm:4.5rem;--size-control-min-width-md:6rem;--size-control-min-width-lg:7.5rem;--size-target-min:1.5rem;--duration-120:.12s;--duration-160:.16s;--duration-state:.12s;--duration-press:.16s;--easing-standard:cubic-bezier(.25, .1, .25, 1);--easing-out:cubic-bezier(0, 0, .58, 1)}:where(.button-showcase) :where(*){box-sizing:border-box}:where(.button-showcase) :where(h1,h2,h3,h4,p,dl,dt,dd){margin:0}.button-showcase{color:var(--color-on-surface,#242424);font-family:var(--typography-ui-font-family);font-size:var(--typography-ui-font-size);font-weight:var(--typography-ui-font-weight);line-height:var(--typography-ui-line-height)}.button-showcase:not(.button-showcase--embedded){--color-background:#f9f8f8;--color-surface:#fefefe;--color-on-surface:#1f1f1f;--color-on-surface-variant:#4d4d4d;--color-outline:#757575;--color-primary:#2b2b2b;--color-on-primary:#fffdf9;--color-primary-text:#4d4d4d;--color-primary-container:#e6e6e6;--color-on-primary-container:#201d1b;--color-focus:#525252;--color-error:#9c3e37;min-height:100vh;padding:clamp(var(--space-400), 4vw, var(--space-600));background:var(--color-background,#fff);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){.button-showcase:not(.button-showcase--embedded){--lightningcss-light: ;--lightningcss-dark:initial}.button-showcase:not(.button-showcase--embedded):not([data-theme=light]){--color-background:#1b1a1a;--color-surface:#272525;--color-on-surface:#f0f0f0;--color-on-surface-variant:#c9c9c9;--color-outline:#9c8b8b;--color-primary:#2b2b2b;--color-on-primary:#fffdf9;--color-primary-text:#c7c7c7;--color-primary-container:#4d4d4d;--color-on-primary-container:#fffdf9;--color-focus:#eb6101;--color-error:#e59a91}}.button-showcase__header{gap:var(--space-100);margin-block-end:var(--space-500);display:grid}.button-showcase__eyebrow,.button-showcase__section-head>p,.button-showcase__role>p,.button-showcase__tokens,.button-showcase__size-spec,.button-showcase__size>span{color:var(--color-on-surface-variant,#666);font-family:var(--typography-caption-font-family);font-size:var(--typography-caption-font-size);line-height:var(--typography-caption-line-height)}.button-showcase__eyebrow{letter-spacing:.12em}.button-showcase h1{font-family:var(--typography-title-font-family);font-size:var(--typography-title-font-size);font-weight:var(--typography-title-font-weight);letter-spacing:var(--typography-title-letter-spacing);line-height:var(--typography-title-line-height)}.button-showcase h2,.button-showcase h3{font-family:var(--typography-heading-font-family);font-size:var(--typography-heading-font-size);font-weight:var(--typography-heading-font-weight);letter-spacing:var(--typography-heading-letter-spacing);line-height:var(--typography-heading-line-height)}.button-showcase--embedded{inline-size:100%;min-inline-size:0;min-height:0;color:inherit;font:inherit;background:0 0;padding:0}.button-showcase__section-head{justify-content:space-between;align-items:baseline;gap:var(--space-100) var(--space-300);flex-wrap:wrap;margin-block-end:var(--space-200);display:flex}.button-showcase__rows{display:grid}.button-showcase__size-header{gap:var(--space-50) var(--space-400);padding-block:var(--space-300) var(--space-100);border-block-end:var(--border-width-thin) solid var(--color-outline,#d6d6d6);grid-template-rows:repeat(4,auto);grid-template-columns:minmax(16rem,.9fr) minmax(0,1.8fr);display:grid}.button-showcase__size-title,.button-showcase__size-specs,.button-showcase__size-spec{grid-row:1/-1;grid-template-rows:subgrid;display:grid}.button-showcase__size-title{column-gap:var(--space-300);grid-template-columns:minmax(0,1fr) max-content}.button-showcase__size-title h2{grid-row:1/-1;align-self:end}.button-showcase__size-keys{grid-area:2/2/-1;grid-template-rows:subgrid;color:var(--color-on-surface-variant,#666);font-family:var(--typography-caption-font-family);text-align:end;margin:0;padding:0;font-size:.75rem;line-height:1.4;list-style:none;display:grid}.button-showcase__size-specs{justify-items:center;column-gap:var(--space-500);grid-template-columns:repeat(3,minmax(9rem,1fr))}.button-showcase__size-spec{text-align:start;justify-items:start;min-inline-size:0}.button-showcase__size-spec>p{color:var(--color-on-surface,#242424);font-family:var(--typography-control-font-family);font-size:.8125rem;font-weight:var(--typography-control-font-weight);justify-self:center;margin-block-end:var(--space-50);line-height:1.45}.button-showcase__size-spec dl{grid-row:2/-1;grid-template-rows:subgrid;display:grid}.button-showcase__size-spec dd{min-inline-size:0;color:var(--color-on-surface,#242424);font-variant-numeric:tabular-nums;font-size:.75rem;line-height:1.4}.button-showcase__visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.button-showcase__size-spec>span{display:none}.button-showcase__row{align-items:end;gap:var(--space-400);padding-block:var(--space-500);border-block-end:var(--border-width-thin) solid var(--color-outline,#d6d6d6);grid-template-columns:minmax(16rem,.9fr) minmax(0,1.8fr);display:grid}.button-showcase__role{align-items:baseline;gap:var(--space-100) var(--space-400);grid-template-columns:max-content minmax(0,1fr);display:grid}.button-showcase__role>p{font-size:.75rem}.button-showcase__role h3{font-family:var(--typography-control-font-family);font-size:var(--typography-control-font-size);font-weight:var(--typography-control-font-weight);line-height:var(--typography-control-line-height)}.button-showcase__tokens{gap:var(--space-100);grid-column:1/-1;margin-block-start:var(--space-100);display:grid}.button-showcase__tokens>div{align-items:center;gap:var(--space-100);grid-template-columns:minmax(4.25rem,max-content) minmax(0,1fr);display:grid}.button-showcase__tokens dt{color:var(--color-on-surface-variant,#666)}.button-showcase__tokens dd{overflow-wrap:anywhere;min-inline-size:0;color:var(--color-on-surface,#242424)}.button-showcase__sizes{align-items:end;gap:var(--space-300) var(--space-500);grid-template-columns:repeat(3,minmax(9rem,1fr));display:grid}.button-showcase__size{align-content:end;justify-items:center;gap:var(--space-150);min-block-size:5.75rem;display:grid}.button-showcase__size>span{color:var(--color-on-surface,#242424);font-variant-numeric:tabular-nums;font-weight:var(--typography-control-font-weight);text-align:center;display:none}.button-showcase__states{margin-block-start:var(--space-500)}.button-showcase__examples{align-items:center;gap:var(--space-200);flex-wrap:wrap;display:flex}.button{--button-bg:var(--color-primary,#333);--button-fg:var(--color-on-primary,#fff);--button-border:var(--color-primary,#333);--button-motion-duration:var(--duration-press);--button-motion-ease:var(--easing-out);--button-padding-inline:var(--space-500);justify-content:center;align-items:center;gap:var(--space-150);min-height:var(--size-control-height-md);padding:0 var(--button-padding-inline);border:var(--border-width-thin) solid var(--button-border);border-radius:var(--radius-control);color:var(--button-fg);background:var(--button-bg);font-family:var(--typography-control-font-family);font-size:var(--typography-control-font-size);font-weight:var(--typography-control-font-weight);line-height:var(--typography-control-line-height);text-align:center;white-space:nowrap;cursor:pointer;transition:color var(--duration-state) var(--easing-standard), background-color var(--duration-state) var(--easing-standard), border-color var(--duration-state) var(--easing-standard), transform var(--button-motion-duration) var(--button-motion-ease), box-shadow var(--button-motion-duration) var(--button-motion-ease);display:inline-flex;position:relative}.button--small{--button-padding-inline:var(--space-300);min-inline-size:var(--size-control-min-width-sm);min-height:var(--size-control-height-sm);font-size:var(--typography-caption-font-size)}.button--medium{--button-padding-inline:var(--space-500);min-inline-size:var(--size-control-min-width-md);min-height:var(--size-control-height-md)}.button--large{--button-padding-inline:var(--space-600);min-inline-size:var(--size-control-min-width-lg);min-height:var(--size-control-height-lg)}.button--secondary{--button-bg:var(--color-surface,#fff);--button-fg:var(--color-on-surface,#242424);--button-border:var(--color-outline,#777)}.button--quiet{--button-bg:transparent;--button-fg:var(--color-primary-text,var(--color-on-surface,#242424));--button-border:transparent}.button--danger{--button-bg:var(--color-surface,#fff);--button-fg:var(--color-error,#b3261e);--button-border:var(--color-error,#b3261e)}.button:focus-visible{outline:var(--border-width-thick) solid var(--color-focus,#005fcc);outline-offset:2px}.button:disabled{cursor:not-allowed}.button__leading,.button__trailing{flex:none;place-items:center;width:1em;height:1em;display:inline-grid}.button__leading:empty,.button__trailing:empty{display:none}.button__leading svg,.button__trailing svg{width:1em;height:1em;display:block}.button:has(.button__leading:not(:empty)){padding-inline-start:calc(var(--button-padding-inline) - var(--space-100))}.button:has(.button__trailing:not(:empty)){padding-inline-end:calc(var(--button-padding-inline) - var(--space-100))}.button__spinner{border:1.5px solid;border-inline-end-color:#0000;border-radius:50%;width:.8em;height:.8em;animation:.7s linear infinite button-spin;display:block}@keyframes button-spin{to{transform:rotate(1turn)}}@media (hover:hover) and (pointer:fine){.button:not(:disabled):hover{box-shadow:0 2px 0 color-mix(in srgb, var(--button-fg) 35%, transparent);transform:translateY(-1px)}}@media (prefers-reduced-motion:reduce){.button{--button-motion-duration:0s}.button__spinner{border-inline-end-color:currentColor;animation:none}}@media (width<=34rem){.button-showcase__row{gap:var(--space-100);grid-template-columns:1fr}.button-showcase__size-header{grid-template-rows:none;grid-template-columns:1fr;gap:0}.button-showcase__size-title,.button-showcase__size-specs,.button-showcase__size-spec{grid-row:auto;grid-template-rows:none}.button-showcase__size-title{margin-block-end:var(--space-200);display:block}.button-showcase__size-keys{display:none}.button-showcase__size-specs,.button-showcase__sizes{justify-items:start;gap:var(--space-300);grid-template-columns:1fr}.button-showcase__size-spec{justify-items:start;gap:var(--space-50);text-align:start}.button-showcase__size-spec dl{display:none}.button-showcase__size-spec>span{color:var(--color-on-surface,#242424);font-variant-numeric:tabular-nums;display:block}.button-showcase__role{grid-template-columns:1fr}.button-showcase__size{justify-items:start;min-block-size:0}.button-showcase__size>span{text-align:start;justify-items:start;display:block}.button-showcase__examples{align-items:stretch}.button-showcase__examples>.button{flex:auto}}.button-pill-action .button,.button-pill-action .button:focus-visible{border-radius:var(--radius-pill)}.button-pill-action .button--secondary{--button-bg:transparent;--button-fg:var(--color-on-surface)}.button-pill-action .button--quiet{--button-bg:transparent;--button-fg:var(--color-primary-text);--button-border:transparent;min-inline-size:auto;min-height:var(--size-target-min);font-weight:var(--font-weight-regular);padding:0}.button-pill-action .button--danger{--button-bg:transparent;--button-fg:var(--color-error);--button-border:var(--color-error)}@media (hover:hover) and (pointer:fine){.button-pill-action .button--quiet:not(:disabled):hover{box-shadow:none;text-underline-offset:.2em;text-decoration:underline;transform:none}}.button-pill-action .button.button--quiet:not(:disabled):active{transform:none}.button-pill-action .button:not(:disabled):active{transform:scale(.97)}.button-pill-action .button:disabled{filter:grayscale(.25);opacity:.5}@media (prefers-reduced-motion:reduce){.button-pill-action .button:not(:disabled):hover,.button-pill-action .button:not(:disabled):active{transform:none}}