@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap);.break-time-widget{position:fixed;bottom:20px;right:16px;z-index:999;font-family:'Noto Sans JP',sans-serif!important}.break-time-widget h3,.break-time-widget p,.break-time-popup-window .popup-header h2{font-family:'Noto Sans JP',sans-serif!important;margin:0}.break-time-widget .speech-bubble{position:absolute;bottom:90px;right:0;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgb(0 0 0 / .15);min-width:250px;opacity:0;transform:translateY(10px);animation:fadeInUp 0.5s ease forwards;pointer-events:auto}.break-time-widget .speech-bubble::before{content:'';position:absolute;top:-57px;right:0;width:96px;height:57px;background:url(/wp-content/themes/binal2018/assets/break-time-popup/images/breaktime_pop_karahashi.png) 0 0 / contain no-repeat}.break-time-widget .speech-bubble.hidden{display:none}.break-time-widget .speech-bubble .close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:14px;line-height:1;color:#fff;cursor:pointer;padding:0;font-weight:400;width:13px;height:13px;display:flex;align-items:center;justify-content:center;transition:color 0.3s ease}.break-time-widget .speech-bubble .close-button:hover{color:#fff}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.break-time-widget .speech-bubble::after{content:'';position:absolute;bottom:-15px;right:21px;width:0;height:0;border-left:10px solid #fff0;border-right:10px solid #fff0;border-top:15px solid #fff;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1))}.break-time-widget .speech-bubble h3{display:flex;align-items:center;gap:.25em;color:#fff;font-size:14px;font-weight:500;letter-spacing:.05em;padding:12px 15px;background:#1b395b;border-radius:10px 10px 0 0}.break-time-widget .speech-bubble h3::before{content:'';display:block;width:20px;height:22px;background:url(/wp-content/themes/binal2018/assets/break-time-popup/images/icon_teacup.svg) 0 0 / contain no-repeat}.break-time-widget .speech-bubble p{font-size:14px;padding:15px;line-height:1.8}.break-time-widget .break-time-button{width:60px;height:60px;border-radius:50%;background:url(/wp-content/themes/binal2018/assets/break-time-popup/images/btn_speaker.svg) 0 0 / contain no-repeat;cursor:pointer;box-shadow:0 4px 12px rgb(0 0 0 / .3);transition:all 0.3s ease;border:none}.break-time-widget .break-time-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(0 0 0 / .4)}.break-time-widget .break-time-button:active{transform:translateY(0)}.break-time-widget .break-time-button .icon{font-size:28px;margin-bottom:2px}.break-time-widget .break-time-button:focus,.binal-scroll-top:focus{outline:none}.break-time-popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .3);z-index:1000;opacity:0;transition:opacity 0.3s ease}.break-time-popup-overlay.active{display:block;opacity:1}.break-time-popup-window{position:fixed;bottom:-500px;right:30px;width:340px;height:480px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgb(0 0 0 / .3);z-index:1001;transition:bottom 0.4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:'Noto Sans JP',sans-serif}.break-time-popup-window.active{bottom:30px}.break-time-popup-window img{vertical-align:bottom}.break-time-popup-window .popup-header{display:flex;align-items:center;justify-content:space-between;gap:.5em;color:#fff;font-size:14px;font-weight:500;letter-spacing:.05em;padding:23px 20px;background:#1b395b;border-radius:10px 10px 0 0}.break-time-popup-window .popup-header h2{display:flex;align-items:center;gap:.25em;color:#fff;font-size:18px;font-weight:500;letter-spacing:.05em;background:#1b395b;border-radius:10px 10px 0 0}.break-time-popup-window .popup-header h2::before{content:'';display:block;width:24px;height:27px;background:url(/wp-content/themes/binal2018/assets/break-time-popup/images/icon_teacup.svg) 0 0 / contain no-repeat}.break-time-popup-window .popup-header .close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:18px;line-height:1;color:#fff;cursor:pointer;padding:0;font-weight:400;width:13px;height:13px;display:flex;align-items:center;justify-content:center;transition:color 0.3s ease}.break-time-popup-window .popup-header .close-button:hover{color:#fff}.break-time-popup-window .popup-content{flex:1;overflow-y:auto;padding:20px}.break-time-popup-window .content-card{background:#f9f9f9;border-radius:8px;overflow:hidden;margin-bottom:16px}.break-time-popup-window .content-card-image{width:100%;height:200px;object-fit:contain;background:#000;cursor:pointer;transition:opacity 0.3s ease}.break-time-popup-window .content-card-image:hover{opacity:.9}.break-time-popup-window .content-card-text{padding:16px;font-size:16px;line-height:1.6;min-height:calc(16px * 1.6 * 2 + 16px * 2);background-color:#fff4e4}.break-time-popup-window .next-button{background:#eb9316;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;width:100%;transition:background 0.3s ease}.break-time-popup-window .next-button:hover{background:#f9a733}.break-time-popup-window .next-button:active{background:#eb9316}.break-time-popup-window .next-button:focus{outline:none}.break-time-popup-window .popup-content::-webkit-scrollbar{width:6px}.break-time-popup-window .popup-content::-webkit-scrollbar-track{background:#f1f1f1}.break-time-popup-window .popup-content::-webkit-scrollbar-thumb{background:#888;border-radius:3px}.break-time-popup-window .popup-content::-webkit-scrollbar-thumb:hover{background:#555}.break-time-popup-window .thumbnail-wrapper{position:relative;cursor:pointer;display:block;height:197px}.break-time-popup-window .thumbnail-wrapper .overlay-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgb(0 0 0 / .55);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background 0.3s ease}.break-time-popup-window .thumbnail-wrapper:hover .overlay-icon{background:rgb(0 0 0 / .75)}.break-time-popup-window .thumbnail-wrapper .overlay-icon svg{width:24px;height:24px;fill:#fff}.break-time-popup-window .page-indicator{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}.break-time-popup-window .page-indicator .dot{width:8px;height:8px;border-radius:50%;background:#ddd;transition:all 0.3s ease;cursor:pointer}.break-time-popup-window .page-indicator .dot:hover:not(.active){background:#aaa}.break-time-popup-window .page-indicator .dot.active{background:#eb9316;width:10px;height:10px}@media (max-width:480px){.break-time-popup-window{right:15px;width:calc(100vw - 30px);max-width:340px}.break-time-popup-window.active{bottom:15px}.break-time-widget{right:15px;bottom:15px}}