body { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; } .nav a:active, .btn:active, .related-card:active, .quick-link-card:active, .article-card:active, .sns-btn:active { transform: scale(0.96); transition: transform 0.1s ease; } .nav a, .btn, .sns-btn, .footer-inner a, .breadcrumb-item a { min-height: 44px; display: inline-flex; align-items: center; } .article-content table { position: relative; } .article-content .table-wrapper { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; } .article-content .table-wrapper::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05)); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .article-content .table-wrapper:hover::after, .article-content .table-wrapper:active::after { opacity: 1; } @media (max-width: 480px) { .article-content p, .article-content li { line-height: 1.8; } .related-card:active { transform: scale(0.97); } iframe[src*="google.com/maps"] { max-height: 250px; } .sns-share-buttons { flex-direction: column; align-items: stretch; } .sns-btn { width: 100%; justify-content: center; } .article-content .article-inline-image { box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin: 20px 0; } .article-content nav.article-toc { padding: 12px 16px; } .related-card a { display: block; min-height: 44px; } } @media (max-width: 360px) { .article-content p, .article-content li { font-size: 0.88rem; line-height: 1.75; } .article-content h2 { font-size: 1.05rem; } .article-content h3 { font-size: 0.95rem; } .related-grid { gap: 10px; } .related-card img { height: 100px; } .related-card-body { padding: 10px; } .related-card-title { font-size: 0.85rem; } .article-category { font-size: 0.75rem; padding: 3px 8px; } } @media (max-width: 1024px) and (min-width: 769px) { .related-grid { grid-template-columns: repeat(2, 1fr); } .article-content .article-inline-image { margin: 24px 0; } } @media (max-width: 480px) { .article-grid { grid-template-columns: 1fr; gap: 16px; } .article-card .article-content h3 { font-size: 1rem; } .article-card .article-content p { font-size: 0.85rem; line-height: 1.5; } } .breadcrumb { padding: 12px 0 4px; font-size: 0.85rem; color: var(--text-light, #718096); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.4; } .breadcrumb-link { color: var(--primary, #667eea); text-decoration: none; transition: color 0.2s ease; } .breadcrumb-link:hover { color: var(--primary-dark, #5568d3); text-decoration: underline; } .breadcrumb-sep { color: var(--text-muted, #a0aec0); font-size: 0.9rem; user-select: none; } .breadcrumb-current { color: var(--text, #2d3748); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } @media (max-width: 480px) { .breadcrumb { padding: 8px 0 2px; font-size: 0.78rem; gap: 4px; } .breadcrumb-current { max-width: 180px; } } @media (max-width: 360px) { .breadcrumb { font-size: 0.72rem; } .breadcrumb-current { max-width: 130px; } } @media (max-width: 480px) { .search-container { max-width: 140px; } .search-input { font-size: 0.8rem; padding: 8px 10px; } .search-dropdown { max-height: 300px; } .search-dropdown a { padding: 10px 12px; font-size: 0.85rem; } } @media (max-width: 480px) { .footer { padding: 30px 16px 16px; } .footer-inner { gap: 16px; flex-direction: column; align-items: center; text-align: center; } .footer-inner a { font-size: 0.85rem; padding: 8px 0; min-height: 44px; display: flex; align-items: center; justify-content: center; } .footer-bottom { font-size: 0.78rem; padding-top: 16px; } .footer-english a { font-size: 0.85rem; } } #back-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 9999; width: 52px; height: 52px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--primary, #667eea), var(--secondary, #764ba2)); color: white; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); opacity: 0; transform: translateY(20px) scale(0.8); transition: opacity 0.3s ease, transform 0.3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow 0.3s ease; pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 1; } #back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } #back-to-top:hover { box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); transform: translateY(-2px) scale(1.05); } #back-to-top:active { transform: translateY(0) scale(0.95); } @media (max-width: 480px) { #back-to-top { bottom: 20px; right: 20px; width: 46px; height: 46px; font-size: 1.3rem; } } @media (max-width: 360px) { #back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: 1.1rem; } } @media (max-width: 480px) { .passport-hero { padding: 80px 16px 40px; } .passport-hero h1 { font-size: 1.5rem; } .passport-features { grid-template-columns: 1fr; gap: 12px; } .passport-cta .btn { width: 100%; text-align: center; } }