.demo-ribbon{position:fixed;z-index:10001;top:0;left:0;right:0;height:38px;background:#f3f3ef;color:#343c35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;border-bottom:1px solid #cdd0c9;font:11px/1.4 Meiryo,sans-serif;letter-spacing:0}.demo-ribbon a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.demo-ribbon p{margin:0}.demo-ribbon b{font-weight:700}.has-demo{padding-top:38px!important}.has-demo .header{top:38px!important}.has-demo.has-notice .header:not(.is-solid){top:70px!important}.demo-dialog{border:0;width:min(540px,calc(100% - 36px));max-height:calc(100svh - 50px);padding:38px;background:#faf9f5;color:#29352d;box-shadow:0 20px 90px #0004;font-family:"Yu Gothic",Meiryo,sans-serif}.demo-dialog::backdrop{background:#15211bbb;backdrop-filter:blur(4px)}.demo-dialog h2{font-size:25px;margin:0 35px 16px 0}.demo-dialog p{font-size:14px;line-height:1.9}.demo-dialog .dialog-close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:26px;width:40px;height:40px;color:inherit;cursor:pointer}.demo-dialog label{display:block;margin:24px 0 8px;font-size:14px;font-weight:bold}.demo-dialog select{width:100%;padding:12px;font:inherit;background:#fff;border:1px solid #acb7aa;color:inherit}.demo-dialog .dialog-submit{border:0;background:#354f40;color:white;font:inherit;font-size:14px;width:100%;padding:15px;margin-top:25px;cursor:pointer}.demo-dialog .dialog-note{font-size:12px;color:#526153;margin-top:18px}.demo-dialog .demo-result{border:1px solid #b8c6b4;background:#edf1e9;padding:16px;margin-top:20px}.demo-dialog a{color:inherit;text-decoration:underline}.demo-result:empty{display:none}[hidden]{display:none!important}@media(max-width:650px){.demo-ribbon{height:48px;padding:0 12px;font-size:10px;gap:10px}.demo-ribbon p{max-width:205px}.has-demo{padding-top:48px!important}.has-demo .header{top:48px!important}.has-demo.has-notice .header:not(.is-solid){top:100px!important}.demo-dialog{padding:30px 24px}.demo-dialog h2{font-size:23px}}

.has-demo .toc,.has-demo .modal{top:38px}
@media(max-width:960px){.has-demo.menu-open .nav{top:114px}}
@media(max-width:650px){.has-demo .toc,.has-demo .modal{top:48px}.has-demo.menu-open .nav{top:112px}}

.demo-ribbon .demo-links{display:flex;align-items:center;gap:18px;flex-shrink:0}.demo-ribbon .demo-consult{font-weight:700}.demo-ribbon p{min-width:0}@media(max-width:650px){.demo-ribbon .demo-links{gap:10px}.demo-ribbon .demo-links a{font-size:10px}}