@charset "UTF-8";
/* サイト・デモ・相談画面で共有。黄緑の装飾色と操作の緑を分ける。 */
:root{--qz-action:#245e4c;--qz-action-hover:#194735;--qz-action-pressed:#133829;--qz-action-soft:#edf4ef;--qz-action-border:#9ebaae;--qz-on-action:#fff}
.button:not(.secondary):not(.quiet),.nav-contact{background:var(--qz-action);color:var(--qz-on-action);border-color:var(--qz-action);filter:none}
.button:not(.secondary):not(.quiet):not(:disabled):not([aria-disabled="true"]):hover,.nav-contact:hover{background:var(--qz-action-hover);border-color:var(--qz-action-hover);filter:none}
.button:not(.secondary):not(.quiet):not(:disabled):not([aria-disabled="true"]):active,.nav-contact:active{background:var(--qz-action-pressed);border-color:var(--qz-action-pressed)}
.button.secondary,.button.quiet{background:#fff;color:var(--qz-action);border-color:var(--qz-action-border);filter:none}
.button.secondary:not(:disabled):hover,.button.quiet:not(:disabled):hover{background:var(--qz-action-soft);color:var(--qz-action);border-color:var(--qz-action);filter:none}
.button:focus-visible,.nav-contact:focus-visible{outline:3px solid var(--qz-action);outline-offset:4px}
.button:disabled,.button[aria-disabled="true"],.button:not(.secondary):not(.quiet):is(:disabled,[aria-disabled="true"]){background:#e2e8e4;color:#607368;border-color:#d0d9d3;opacity:1;cursor:not-allowed;filter:none;transform:none}

/* ECサンプルの2画面は同じ階層で選ぶ。選択中のページを明示する。 */
.ec-demo-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:540px;margin:0 0 28px}
.ec-demo-nav>a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border:1px solid var(--qz-action-border);border-radius:6px;background:#fff;color:var(--qz-action);font-size:14px;font-weight:700;line-height:1.5;text-decoration:none}
.ec-demo-nav>a:hover{background:var(--qz-action-soft);border-color:var(--qz-action)}
.ec-demo-nav>a[aria-current="page"]{background:var(--qz-action);border-color:var(--qz-action);color:#fff}
.ec-demo-nav>a:focus-visible{outline:3px solid var(--qz-action);outline-offset:3px}
@media(max-width:400px){.ec-demo-nav{gap:8px}.ec-demo-nav>a{font-size:12px;padding:10px 6px}}