.resistor-calculator-container,.resistor-calculator-container *{word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto}.resistor-color-code-calculator-page{background:#f2f4f8;padding-bottom:30px}.resistor-calculator-container{max-width:1380px;margin:0 auto;padding:20px;background:#fff;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.page-title{text-align:center;color:#2c3e50;margin-bottom:10px;font-size:2.5em;font-weight:bold;line-height:1.2}.page-description{text-align:center;color:#7f8c8d;margin-bottom:30px;font-size:1.1em;line-height:1.4;max-width:800px;margin-left:auto;margin-right:auto}.resistor-type-selector{display:flex;justify-content:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}.type-btn{padding:12px 24px;border:2px solid #3498db;background:white;color:#3498db;border-radius:25px;cursor:pointer;font-size:1em;font-weight:bold;transition:all .3s ease;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.type-btn:hover,.type-btn.active{background:#3498db;color:white;transform:translateY(-2px);box-shadow:0 4px 8px rgba(52,152,219,0.3)}.resistor-display{display:flex;justify-content:center;margin:40px 0;padding:20px}.resistor-body{background-image:url('/static/thumbnail/tool/resistor-color-code-body.webp');background-size:contain;background-position:center;background-repeat:no-repeat;width:417px;height:80px;position:relative;box-sizing:border-box}.resistor-band{background:#ccc;border-radius:2px;border:1px solid rgba(0,0,0,0.15);transition:all .3s ease;position:absolute;width:16px;height:65px}.resistor-body .resistor-band.band-1{height:76px;top:2px;left:18%}.resistor-body .resistor-band.band-2{height:64px;top:8px;left:32.4%}.resistor-body .resistor-band.band-3{height:64px;top:8px;left:42%}.resistor-body .resistor-band.band-4{height:76px;top:2px;left:76.7%}.resistor-body .resistor-band.band-5{height:64px;top:8px;left:62.4%}.resistor-body .resistor-band.band-6{height:64px;top:8px;left:51.6%}.resistor-image{display:block;max-width:100%;height:auto;margin:20px auto;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);transition:all .3s ease;background:#f8f9fa;border:1px solid #e9ecef}.resistor-image:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.2)}.resistor-image[src*="placeholder"]{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;min-height:120px}@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.color-selector-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:30px 0}.band-selector{background:white;padding:20px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border:2px solid #ecf0f1;transition:all .3s ease}.band-selector:hover{border-color:#3498db;box-shadow:0 4px 8px rgba(52,152,219,0.2)}.band-selector h3{margin:0 0 15px 0;color:#2c3e50;font-size:1.1em;text-align:center;border-bottom:2px solid #ecf0f1;padding-bottom:10px;line-height:1.3}.color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:16px;justify-items:center}.color-option{width:40px;height:40px;border-radius:50%;cursor:pointer;transition:all .3s ease;border:2px solid transparent;position:relative}.color-option:hover{transform:scale(1.2);border-color:#2c3e50;box-shadow:0 4px 8px rgba(0,0,0,0.3)}.color-option.hover-effect{transform:scale(1.2);border-color:#2c3e50;box-shadow:0 4px 8px rgba(0,0,0,0.3)}.color-option.selected{transform:scale(1.3);border-color:#e74c3c;border-width:3px;box-shadow:0 0 0 2px white,0 0 0 4px #e74c3c}.result-container{margin:40px 0;display:flex;justify-content:center}.result-display{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;padding:30px;border-radius:15px;text-align:center;min-width:300px;box-shadow:0 8px 16px rgba(0,0,0,0.2)}.result-display h3{margin:0 0 20px 0;font-size:1.5em;line-height:1.3}.resistance-value{font-size:3em;font-weight:bold;margin:20px 0;text-shadow:2px 2px 4px rgba(0,0,0,0.3);line-height:1.1;max-width:100%;overflow:hidden;word-break:break-all}.resistance-value .unit{font-size:.7em;margin-left:5px;white-space:nowrap}.tolerance,.temp-coefficient,.range{margin:10px 0;font-size:1.1em;opacity:.9;line-height:1.3}.action-buttons{display:flex;justify-content:center;margin:30px 0}.reset-btn{padding:15px 30px;background:#e74c3c;color:white;border:0;border-radius:25px;font-size:1.1em;font-weight:bold;cursor:pointer;transition:all .3s ease;white-space:nowrap}.reset-btn:hover{background:#c0392b;transform:translateY(-2px);box-shadow:0 4px 8px rgba(231,76,60,0.3)}.info-section{background:white;padding:30px;border-radius:10px;margin-top:40px}.info-section h2{color:#2c3e50;margin-bottom:15px;border-bottom:2px solid #3498db;padding-bottom:10px;font-size:1.6em;font-weight:bold;padding-top:15px;line-height:1.5;margin-top:30px}.info-section .overview{font-size:1.2em;line-height:1.6;color:#34495e;margin-bottom:25px;font-weight:400}.info-section ul{margin:15px 0;padding-left:20px}.info-section ul li{background:0;border:0;margin:8px 0;padding:0;list-style:disc;color:inherit;line-height:1.6}.info-section h2:nth-of-type(2){margin-top:30px;color:#2c3e50;border-bottom:2px solid #3498db;font-size:1.6em;padding-bottom:10px;margin-bottom:20px}.info-section h3{color:#34495e;font-size:1.4em;font-weight:bold;margin:30px 0 0 0;padding:10px 0 10px 0;border-bottom:1px solid #ecf0f1}.info-section p{margin:15px 0;line-height:1.6;font-size:1em}.info-section .bands-text{background:#f8f9fa;padding:12px 16px;border-left:4px solid #6c757d;margin:15px 0;font-weight:500}.info-section .formula-text{background:#fff3cd;padding:12px 16px;border-left:4px solid #ffc107;font-family:'Courier New',monospace;font-weight:bold;color:#856404;margin:15px 0}.info-section .example-text{background:#d1ecf1;padding:12px 16px;border-left:4px solid #17a2b8;color:#0c5460;margin:15px 0}.info-section .result-text{background:#d4edda;padding:12px 16px;border-left:4px solid #28a745;color:#155724;font-weight:bold;margin:15px 0}.info-section .summary{background:linear-gradient(135deg,#f8f9fa 0,#e9ecef 100%);padding:20px 24px;border-radius:8px;border:1px solid #dee2e6;border-left:5px solid #6f42c1;margin:40px 0 0 0;font-size:1.2em;line-height:1.6;color:#34495e;font-weight:400;box-shadow:0 2px 4px rgba(0,0,0,0.05)}.info-section ul{margin:15px 0;padding-left:30px}.info-section ul li{list-style:disc}.info-section h3:nth-of-type(4){color:#e74c3c;border-bottom-color:#e74c3c}.info-section h4{color:#2d3748;font-size:1.2em;font-weight:600;margin:20px 0 10px 0;padding:5px 0}.info-section strong,.info-section b{color:#2b6cb0;font-weight:600}.info-section .math-symbol,.info-section .unit-symbol{font-family:'Courier New',monospace;font-weight:bold;color:#2d3748}@media(max-width:768px){.info-section h2:nth-of-type(2){font-size:1.6em;margin-top:30px}.info-section h3{font-size:1.4em;margin:25px 0 12px 0}.info-section h4{font-size:1.2em;margin:15px 0 8px 0}.info-section p{font-size:.95em;margin:12px 0}.info-section .overview{font-size:1.1em;line-height:1.5}.info-section ul li{margin:6px 0;font-size:.95em}.info-section .summary{padding:16px 20px;font-size:1.2em;line-height:1.6;margin:20px 0}.info-section .summary::before{width:20px;height:20px;font-size:.8em;top:12px}}@media(max-width:480px){.info-section h2:nth-of-type(2){font-size:1.6em;margin-top:30px}.info-section h3{font-size:1.4em;margin:20px 0 10px 0}.info-section h4{font-size:1.2em;margin:12px 0 6px 0}.info-section p{font-size:.9em;margin:10px 0;padding:10px 12px}.info-section .overview{font-size:1.2em;line-height:1.6;margin-bottom:18px}.info-section ul li{margin:5px 0;font-size:.9em}.info-section .summary{padding:14px 16px;font-size:1.2em;line-height:1.6;margin:18px 0;border-radius:6px}.info-section .summary::before{width:18px;height:18px;font-size:.7em;top:10px;left:-1px}}@media(max-width:320px){.info-section h2:nth-of-type(2){font-size:1.6em;margin-top:30px}.info-section h3{font-size:1.4em;margin:15px 0 8px 0}.info-section h4{font-size:1.2em;margin:10px 0 5px 0}.info-section p{font-size:.85em;margin:8px 0;padding:8px 10px}.info-section .overview{font-size:1.2em;line-height:1.6;margin-bottom:18px}.info-section ul li{margin:4px 0;font-size:.85em}.info-section .summary{padding:12px 14px;font-size:1.2em;line-height:1.6;margin:15px 0;border-radius:5px;word-break:break-all;overflow-wrap:anywhere}.info-section .summary::before{width:16px;height:16px;font-size:.6em;top:8px;left:0}}@media(prefers-color-scheme:dark){.resistor-calculator-container{background:#2c3e50;color:#ecf0f1}.resistor-body{filter:brightness(0.9) contrast(1.1)}.resistor-band{border-color:rgba(255,255,255,0.2);box-shadow:inset -3px 0 6px rgba(0,0,0,0.4),inset 3px 0 6px rgba(255,255,255,0.3),0 2px 4px rgba(0,0,0,0.3)}.resistor-band:hover{border-color:rgba(255,255,255,0.4);box-shadow:inset -3px 0 8px rgba(0,0,0,0.5),inset 3px 0 8px rgba(255,255,255,0.4),0 4px 8px rgba(0,0,0,0.4)}.band-selector{background:#34495e;border-color:#4a5f7a}.band-selector h3{color:#ecf0f1;border-bottom-color:#4a5f7a}.info-section{background:#34495e;color:#ecf0f1}.info-section h2:nth-of-type(2){margin-top:30px;color:#ecf0f1;border-bottom-color:#5dade2}.info-section h3{color:#ecf0f1;border-bottom-color:#4a5f7a}.info-section h3:nth-of-type(4){color:#e74c3c;border-bottom-color:#e74c3c}.info-section h4{color:#ecf0f1}.info-section .bands-text{background:#2c3e50;color:#ecf0f1;border-left-color:#7f8c8d}.info-section .formula-text{background:#8b6914;color:#fff3cd;border-left-color:#ffc107}.info-section .example-text{background:#0c5460;color:#d1ecf1;border-left-color:#17a2b8}.info-section .result-text{background:#155724;color:#d4edda;border-left-color:#28a745}.info-section ul li{color:#ecf0f1}.info-section strong,.info-section b{color:#5dade2}.info-section .math-symbol,.info-section .unit-symbol{color:#ecf0f1}.info-section .summary{background:linear-gradient(135deg,#34495e 0,#2c3e50 100%);color:#ecf0f1;border-color:#4a5f7a;border-left-color:#9b59b6;box-shadow:0 2px 4px rgba(0,0,0,0.3)}.info-section .summary::before{background:#9b59b6;color:#ecf0f1}.color-reference{background:#34495e;border-color:#4a5f7a}.color-reference-table{background:#2c3e50;color:#ecf0f1}.color-reference-table thead{background:linear-gradient(135deg,#2c3e50 0,#34495e 100%)}.color-reference-table tbody tr{border-bottom-color:#4a5f7a}.color-reference-table tbody tr:hover{background:#34495e}.color-reference-table td{border-right-color:#4a5f7a}.color-reference-table .ref-color{border-color:#7f8c8d}.color-reference-table tbody tr:hover .ref-color{border-color:#5dade2;box-shadow:0 4px 8px rgba(93,173,226,0.3)}.resistor-image{background:#2c3e50;border-color:#4a5f7a;filter:brightness(0.9) contrast(1.1)}.resistor-image[src*="placeholder"]{background:linear-gradient(90deg,#34495e 25%,#2c3e50 50%,#34495e 75%);background-size:200% 100%}}@media print{.resistor-calculator-container{box-shadow:none;background:white}.type-btn,.reset-btn{display:none}.color-option{border:1px solid #000 !important}.info-section h2:nth-of-type(2),.info-section h3,.info-section h4{color:black !important;background:white !important;border-color:black !important}.info-section p,.info-section ul li{background:white !important;color:black !important;border-color:black !important}.info-section .summary{background:white !important;color:black !important;border:1px solid black !important;border-left:3px solid black !important;box-shadow:none !important}.info-section .summary::before{background:black !important;color:white !important;content:"!" !important}.color-reference-table{box-shadow:none;border:1px solid #000}.color-reference-table th{background:#f0f0f0 !important;color:#000 !important}.color-reference-table .ref-color{border:1px solid #000 !important}.resistor-image{max-width:100%;box-shadow:none;border:1px solid #000;background:white;filter:none}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.resistor-band.updated{animation:pulse .5s ease-in-out}.result-display.updated{animation:pulse .3s ease-in-out}@media(max-width:768px){.resistor-calculator-container{padding:15px;margin:10px}.page-title{font-size:2em}.page-description{font-size:1em}.resistor-body{width:320px;height:65px}.resistor-band{width:14px;height:55px}.resistor-body .resistor-band.band-1{height:62px;top:1.5px;left:18.1%}.resistor-body .resistor-band.band-2{height:50px;top:7.5px;left:32.5%}.resistor-body .resistor-band.band-3{height:50px;top:7.5px;left:42.2%}.resistor-body .resistor-band.band-4{height:62px;top:1.5px;left:76.5%}.resistor-body .resistor-band.band-5{height:50px;top:7.5px;left:62.2%}.resistor-body .resistor-band.band-6{height:50px;top:7.5px;left:51.8%}.color-selector-container{grid-template-columns:1fr;gap:15px}.color-options{grid-template-columns:repeat(5,1fr);gap:10px}.color-option{width:35px;height:35px}.resistance-value{font-size:2.5em}.type-btn{font-size:.95em;padding:11px 22px}.info-section h2{font-size:1.6em;margin-top:30px}.info-section li{font-size:.95em}.resistor-image{max-width:90%;margin:15px auto;min-height:100px}}@media(max-width:480px){.resistor-calculator-container{padding:10px;margin:5px}.page-title{font-size:1.8em}.page-description{font-size:1em}.resistor-type-selector{flex-direction:column;align-items:center}.type-btn{width:100%;max-width:200px;margin:5px 0;font-size:.9em;padding:10px 20px;min-width:120px}.resistor-body{width:280px;height:55px}.resistor-band{width:12px;height:45px}.resistor-body .resistor-band.band-1{height:52px;top:1.5px;left:18.2%}.resistor-body .resistor-band.band-2{height:40px;top:7.5px;left:32.7%}.resistor-body .resistor-band.band-3{height:40px;top:7.5px;left:42.5%}.resistor-body .resistor-band.band-4{height:52px;top:1.5px;left:76.2%}.resistor-body .resistor-band.band-5{height:40px;top:7.5px;left:61.8%}.resistor-body .resistor-band.band-6{height:40px;top:7.5px;left:52.2%}.color-options{grid-template-columns:repeat(3,1fr);gap:8px}.color-option{width:30px;height:30px}.result-display{padding:20px;min-width:auto;width:100%;box-sizing:border-box}.result-display h3{font-size:1.3em}.resistance-value{font-size:2em;max-width:100%;overflow:hidden}.resistance-value .unit{white-space:nowrap;display:inline-block}.tolerance,.temp-coefficient,.range{font-size:1em;margin:8px 0}.info-section{padding:20px}.info-section h2{font-size:1.6em;margin-top:30px}.info-section li{font-size:.9em;padding:8px;margin:8px 0}.reset-btn{font-size:1em;padding:12px 25px;min-width:120px}.band-selector h3{font-size:1em}.resistor-image{max-width:95%;margin:12px auto;min-height:80px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12)}.resistor-image:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,0.12)}}@media(max-width:320px){.resistor-calculator-container{padding:8px;margin:2px;font-size:.9em}.page-title{font-size:1.4em;word-break:break-all;overflow-wrap:anywhere}.page-description{font-size:.85em;word-break:break-all;overflow-wrap:anywhere}.type-btn{font-size:.8em;padding:8px 16px;min-width:70px}.resistor-body{width:240px;height:48px}.resistor-band{width:10px;height:38px}.resistor-body .resistor-band.band-1{height:45px;top:1.5px;left:18.5%}.resistor-body .resistor-band.band-2{height:33px;top:7.5px;left:33%}.resistor-body .resistor-band.band-3{height:33px;top:7.5px;left:43%}.resistor-body .resistor-band.band-4{height:45px;top:1.5px;left:75.5%}.resistor-body .resistor-band.band-5{height:33px;top:7.5px;left:61.5%}.resistor-body .resistor-band.band-6{height:33px;top:7.5px;left:52.5%}.resistance-value{font-size:1.5em;word-break:break-all;overflow-wrap:anywhere}.info-section h2{font-size:1.6em;word-break:break-all;overflow-wrap:anywhere;margin-top:30px}.info-section li{font-size:.8em;padding:6px;margin:6px 0;word-break:break-all;overflow-wrap:anywhere}.resistor-image{max-width:98%;margin:10px auto;min-height:60px;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,0.1)}.resistor-image[src*="placeholder"]{min-height:60px}}@media(max-height:500px) and (orientation:landscape){.page-title{font-size:1.8em;margin-bottom:8px}.page-description{font-size:.95em;margin-bottom:20px}.resistor-display{margin:20px 0}.result-display{padding:20px}.resistance-value{font-size:2.2em;margin:15px 0}.info-section{padding:20px}.resistor-image{max-width:80%;margin:10px auto;min-height:50px}}.color-reference{margin:15px 0;padding:0;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef;overflow-x:auto}.color-reference-table{width:100%;border-collapse:collapse;background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);font-size:.95em}.color-reference-table thead{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white}.color-reference-table th{padding:15px 12px;text-align:center;font-weight:bold;font-size:.9em;border-bottom:2px solid #dee2e6}.color-reference-table tbody tr{border-bottom:1px solid #e9ecef}.color-reference-table tbody tr:hover{background:#f8f9fa}.color-reference-table tbody tr:last-child{border-bottom:0}.color-reference-table td{padding:9px;text-align:center;vertical-align:middle;border-right:1px solid #e9ecef}.color-reference-table td:last-child{border-right:0}.color-reference-table .ref-color{width:30px;height:30px;border-radius:50%;display:inline-block;border:2px solid #dee2e6;box-shadow:0 2px 4px rgba(0,0,0,0.1)}@media(max-width:768px){.color-reference{padding:15px;margin:20px 0}.color-reference-table{font-size:.85em}.color-reference-table th,.color-reference-table td{padding:10px 8px}.color-reference-table .ref-color{width:25px;height:25px}.color-reference-table th:last-child,.color-reference-table td:last-child{display:none}}@media(max-width:480px){.color-reference{padding:0;margin:15px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}.color-reference-table{min-width:400px;font-size:.8em}.color-reference-table th,.color-reference-table td{padding:8px 6px;white-space:nowrap}.color-reference-table .ref-color{width:20px;height:20px}.color-reference-table th:nth-child(2),.color-reference-table td:nth-child(2){display:none}}@media(max-width:320px){.color-reference{padding:8px;margin:10px 0}.color-reference-table{min-width:280px;font-size:.75em}.color-reference-table th,.color-reference-table td{padding:6px 4px}.color-reference-table .ref-color{width:18px;height:18px}.color-reference-table th:nth-child(2),.color-reference-table td:nth-child(2),.color-reference-table th:last-child,.color-reference-table td:last-child{display:none}}@media(max-height:500px) and (orientation:landscape){.color-reference{margin:15px 0;padding:0}.color-reference-table th,.color-reference-table td{padding:8px}}.video{position:relative;width:100%;max-width:800px;margin:30px auto;background:#f8f9fa;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.12);transition:all .3s ease;border:1px solid #e9ecef}.video:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.18)}.video iframe{position:relative;width:100%;height:450px;border:0;border-radius:12px;background:#000;transition:all .3s ease}.video::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:video-loading 1s linear infinite;z-index:1;opacity:0;pointer-events:none}.video.loading::before{opacity:1}@keyframes video-loading{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.video::after{content:'鈻?;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:rgba(255,255,255,0.9);background:rgba(0,0,0,0.7);width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease;pointer-events:none;z-index:2;text-shadow:0 2px 4px rgba(0,0,0,0.5)}.video:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1.1)}.video-title{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.8));color:white;padding:20px;font-size:1.1em;font-weight:600;opacity:0;transition:all .3s ease;z-index:3}.video:hover .video-title{opacity:1}.video-fullscreen{position:absolute;top:15px;right:15px;background:rgba(0,0,0,0.7);color:white;border:0;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:14px;opacity:0;transition:all .3s ease;z-index:4}.video:hover .video-fullscreen{opacity:1}.video-fullscreen:hover{background:rgba(0,0,0,0.9);transform:scale(1.05)}@media(prefers-color-scheme:dark){.video{background:#2c3e50;border-color:#4a5f7a;box-shadow:0 8px 24px rgba(0,0,0,0.3)}.video:hover{box-shadow:0 12px 32px rgba(0,0,0,0.4)}.video::before{border-color:#4a5f7a;border-top-color:#5dade2}.video-fullscreen{background:rgba(44,62,80,0.9);color:#ecf0f1}.video-fullscreen:hover{background:rgba(44,62,80,1)}}@media(max-width:768px){.video{margin:20px auto;border-radius:10px;max-width:95%}.video iframe{height:350px;border-radius:10px}.video::after{font-size:36px;width:60px;height:60px}.video-title{font-size:1em;padding:15px}.video-fullscreen{top:10px;right:10px;padding:6px 10px;font-size:12px}}@media(max-width:480px){.video{margin:15px auto;border-radius:8px;max-width:98%;box-shadow:0 4px 16px rgba(0,0,0,0.1)}.video iframe{height:250px;border-radius:8px}.video::after{font-size:28px;width:50px;height:50px}.video-title{font-size:.9em;padding:12px}.video-fullscreen{top:8px;right:8px;padding:5px 8px;font-size:11px}.video:hover{transform:none;box-shadow:0 4px 16px rgba(0,0,0,0.1)}.video:hover::after{opacity:0}.video:hover .video-title{opacity:0}.video:hover .video-fullscreen{opacity:0}}@media(max-width:320px){.video{margin:10px auto;border-radius:6px;max-width:100%}.video iframe{height:200px;border-radius:6px}.video::after{font-size:24px;width:40px;height:40px}.video-title{font-size:.8em;padding:10px}.video-fullscreen{top:6px;right:6px;padding:4px 6px;font-size:10px}}@media(max-height:500px) and (orientation:landscape){.video{margin:15px auto;max-width:90%}.video iframe{height:300px}.video::after{font-size:32px;width:55px;height:55px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.video{box-shadow:0 8px 24px rgba(0,0,0,0.15)}.video:hover{box-shadow:0 12px 32px rgba(0,0,0,0.22)}}@media print{.video{box-shadow:none;border:2px solid #000;background:white;page-break-inside:avoid}.video::before,.video::after,.video-fullscreen{display:none}.video iframe{background:#f0f0f0;border:1px solid #000}.video-title{position:static;background:white;color:black;opacity:1;border-top:1px solid #000}}@media(prefers-reduced-motion:reduce){.video,.video iframe,.video::before,.video::after,.video-title,.video-fullscreen{transition:none;animation:none}.video:hover{transform:none}.video:hover::after{transform:translate(-50%,-50%) scale(1)}}@media(prefers-contrast:high){.video{border:2px solid;box-shadow:none}.video::after{background:#000;color:#fff;border:2px solid #fff}.video-fullscreen{background:#000;color:#fff;border:1px solid #fff}}.video-container{display:flex;justify-content:center;align-items:center;padding:20px 0}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:30px;margin:30px 0}@media(max-width:768px){.video-grid{grid-template-columns:1fr;gap:20px;margin:20px 0}}.video.error{background:#f8d7da;border-color:#f5c6cb}.video.error::after{content:'鈿?;background:rgba(220,53,69,0.8);color:white}@media(prefers-color-scheme:dark){.video.error{background:#721c24;border-color:#a94442}}.faq-container{margin-top:20px}.faq-item{padding:20px;margin-bottom:15px;border-radius:8px;border:1px solid #e9ecef;transition:all .3s ease}.faq-item:nth-child(odd){background-color:#f4f5f9}.faq-item:nth-child(even){background-color:#fff}.faq-item:hover{background-color:#e3f2fd;border-color:#3498db;transform:translateY(-2px);box-shadow:0 4px 12px rgba(52,152,219,0.15)}.faq-item h3{color:#2c3e50;margin-top:15px;margin-bottom:15px;font-size:1.1em;font-weight:600;line-height:1.4;padding:0;border:0}.faq-item p{color:#555;line-height:1.6;margin-bottom:10px}.faq-item ul{margin:10px 0;padding-left:20px}.faq-item li{color:#555;line-height:1.6;margin-bottom:8px}.faq-item .note{font-style:italic;color:#7f8c8d;margin-top:10px}@media(prefers-color-scheme:dark){.faq-item:nth-child(odd){background-color:#34495e}.faq-item:nth-child(even){background-color:#2c3e50}.faq-item:hover{background-color:#4a5f7a}.faq-item h3{color:#ecf0f1}.faq-item p,.faq-item li{color:#bdc3c7}.faq-item .note{color:#95a5a6}}@media(max-width:768px){.faq-item{padding:15px;margin-bottom:12px}.faq-item h3{font-size:1em}}@media(max-width:480px){.faq-item{padding:12px;margin-bottom:10px}.faq-item h3{font-size:.95em}.faq-item p,.faq-item li{font-size:.9em}}