.cafe-demo{background:#eee8dd;color:#35392f;padding:22px;border:1px solid #d7cebf;border-radius:12px;overflow:hidden;font-family:Arial,sans-serif}.cafe-demo-preview{display:block!important;min-height:360px!important;padding:0!important}.demo-top{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.08em;margin-bottom:18px}.demo-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:24px}.demo-console{display:flex;flex-direction:column;gap:14px;justify-content:center}.demo-action,.demo-switch button,.demo-pause{border:1px solid #b9aa8d;background:#fffaf0;color:#35392f;padding:12px 16px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1.5}.demo-action{background:#35392f;color:#fffaf0}.demo-action.is-pressed{box-shadow:0 0 0 5px #b39a6060;transform:translateY(2px)}.demo-action:disabled{cursor:wait}.demo-request{background:#fffaf0;border-left:3px solid #9c803e;padding:14px;font-size:13px;line-height:1.8;min-height:75px}.demo-switch{display:flex;gap:8px}.demo-switch button[aria-pressed=true]{background:#9c803e;color:white}.demo-site{background:#faf7ef;border-radius:7px;overflow:hidden;border:1px solid #d7cebf}.demo-site-nav{padding:12px 18px;border-bottom:1px solid #e5dece;font-size:12px;display:flex;justify-content:space-between}.demo-site-body{padding:22px}.demo-site h3{font-family:serif;font-size:23px;line-height:1.6;margin:0 0 12px}.demo-site p{font-size:12px;line-height:1.8;margin:8px 0}.demo-season{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:15px;background:#eee5d6;margin-top:18px;animation:demo-rise .8s ease both}.demo-season[hidden]{display:none}.demo-season img{width:90px;height:110px;object-fit:cover;border-radius:45px 45px 3px 3px}.demo-season strong{font-family:serif;font-size:16px}.demo-season small{display:block;font-size:11px;line-height:1.8;margin-top:8px}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:11px}.demo-pause{padding:5px 10px;font-size:11px}.cafe-demo-preview .cafe-demo{height:100%;border-radius:0;padding:20px}.cafe-demo-preview .demo-layout{grid-template-columns:1fr;gap:12px}.cafe-demo-preview .demo-console{gap:8px}.cafe-demo-preview .demo-request{min-height:0;padding:9px}.cafe-demo-preview .demo-site-body{padding:12px 18px}.cafe-demo-preview .demo-site h3{font-size:19px}.cafe-demo-preview .demo-season{margin-top:10px;padding:10px;grid-template-columns:65px 1fr}.cafe-demo-preview .demo-season img{width:65px;height:75px}.cafe-demo-preview .demo-season small{margin-top:3px}.cafe-demo button:focus-visible{outline:3px solid #806329;outline-offset:3px}@keyframes demo-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(max-width:820px){.demo-layout{grid-template-columns:1fr}.cafe-demo{padding:16px}.demo-site h3{font-size:21px}}@media(prefers-reduced-motion:reduce){.demo-season{animation:none}.demo-action.is-pressed{transform:none}}
/* The interactive scene needs its full content height, unlike cropped photo cards. */
.service-photo.cafe-demo-preview{height:auto!important;min-height:0!important;align-self:stretch;overflow:visible}
.cafe-demo-preview .cafe-demo{height:auto;min-height:100%;box-sizing:border-box}
.cafe-demo-preview .demo-season img{width:65px;height:75px;object-fit:cover}
.cafe-demo-preview .demo-top{margin-bottom:12px}
.cafe-demo-preview .demo-site-body>h3{font-size:19px;line-height:1.45;margin-bottom:6px}
.cafe-demo-preview .demo-site-body>p{margin:4px 0}
.cafe-demo-preview .demo-season{min-height:95px;box-sizing:border-box}
@media(max-width:820px){.cafe-demo-preview .cafe-demo{padding:18px}.cafe-demo-preview .demo-layout{grid-template-columns:1fr 1.3fr;align-items:center;gap:16px}.cafe-demo-preview .demo-season{grid-template-columns:65px 1fr}.cafe-demo-preview .demo-footer{margin-top:12px}}
@media(max-width:560px){.cafe-demo-preview .demo-layout{grid-template-columns:1fr}.cafe-demo-preview .demo-top{font-size:10px}.cafe-demo-preview .demo-footer{flex-wrap:wrap}.cafe-demo-preview .demo-site-body>h3{font-size:18px}}
/* Separate the operation from the result so the change is visible. */
.demo-console{background:#303b37;color:#fffaf0;padding:18px;border-radius:8px}
.demo-console .demo-action{position:relative;background:#ead6a5;color:#27332e;border-color:#ead6a5;font-weight:700;padding-right:36px}
.demo-console .demo-request{background:#42514a;color:#fffaf0;border-color:#d9b76c}
.demo-console .demo-switch button{background:#42514a;color:#fffaf0;border-color:#839086}
.demo-click-mark{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:22px;opacity:0}
.demo-action.is-pressed .demo-click-mark{opacity:1;animation:demo-click .7s ease-in-out 2}
.demo-console .demo-action.is-pressed{box-shadow:0 0 0 6px #ead6a54d}
.demo-season{position:relative;background:#e1ebdf;border:2px solid #69846a;padding-top:32px!important;animation:demo-highlight 1.2s ease both}
.demo-added{position:absolute;top:0;right:0;background:#45644a;color:#fff;padding:3px 10px;font-size:11px;line-height:1.6}
.cafe-demo-preview .demo-season{min-height:120px}
@keyframes demo-click{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-40%) scale(.85)}}
@keyframes demo-highlight{from{opacity:0;transform:translateY(18px);box-shadow:0 0 0 8px #8faa8560}to{opacity:1;transform:translateY(0);box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.demo-season,.demo-action.is-pressed .demo-click-mark{animation:none}}
/* 2026-09-13 公開前レビュー：停止ボタンの押せる範囲を広げる（見た目は変えない） */
.demo-pause{position:relative}.demo-pause::after{content:"";position:absolute;inset:-9px -4px}
/* 2026-09-13 デモの色を生成り・墨・金茶に統一（緑をやめる） */
.demo-season{background:#efe6d3;border-color:#b59c6e}
.demo-added{background:#88652f}
.demo-action{color:#31332f}