/* --- ベースレイアウト --- */
body { margin: 0; padding: 0; background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Helvetica Neue', Arial, sans-serif; overflow: hidden; }
.background-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
.background-layer img { position: absolute; width: 101px; height: 101px; opacity: 0.25; }

/* --- テレビ本体 --- */
.tv-container { position: relative; z-index: 10; text-align: center; width: 100%; max-width: 1100px; padding: 20px; }
.tv-frame { width: 95vw; max-width: 1000px; aspect-ratio: 16 / 9; background: #333; border: 25px solid #555; border-radius: 50px; position: relative; box-shadow: 0 30px 100px rgba(0,0,0,0.9); overflow: hidden; margin: 0 auto; }
.screen { width: 100%; height: 100%; background: #000; position: relative; color: white; overflow: hidden; }

/* 共通ページコンテナ */
.page-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; position: absolute; top: 0; left: 0; }
#home-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- ABOUT --- */
.about-content { max-width: 750px; padding: 0 50px; text-align: left; }
.about-content h2 { color: #00d4ff; text-align: center; margin-bottom: 25px; font-size: 1.8rem; letter-spacing: 2px; }
.about-content p { font-size: 1.05rem; line-height: 1.9; margin-bottom: 15px; text-align: justify; }

/* --- WORKS 一覧 --- */
.works-container { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; height: 100%; justify-content: center; }
.works-section-title { color: #00d4ff; font-size: 1.6rem; font-weight: bold; letter-spacing: 4px; text-transform: uppercase; margin: 0; }
.works-list { display: flex; gap: 30px; justify-content: center; align-items: center; }
.work-item-btn { position: relative; width: 220px; aspect-ratio: 1/1; background: #000; border: 1px solid rgba(0,212,255,0.4); cursor: pointer; overflow: hidden; padding: 0; transition: 0.3s; }
.work-item-btn:hover { transform: scale(1.05); border-color: #00d4ff; }
.work-thumb-mini { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.3s; }
.work-item-btn:hover .work-thumb-mini { opacity: 1; }
.work-item-btn span { position: absolute; bottom: 12px; left: 0; width: 100%; z-index: 3; color: white; font-weight: bold; font-size: 0.85rem; padding: 0 10px; box-sizing: border-box; text-shadow: 0 2px 4px rgba(0,0,0,0.9); }
.work-item-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); z-index: 2; }

/* --- WORKS 詳細 --- */
.work-detail-flex { display: flex; width: 100%; height: 100%; align-items: stretch; background: #000; }
.work-video-side { flex: 1.2; display: flex; align-items: center; justify-content: center; padding: 25px; background: #0a0a0a; }
.yt-embed-wrapper { width: 100%; aspect-ratio: 16 / 9; border: 1px solid #333; }
.yt-embed-wrapper iframe { width: 100%; height: 100%; border: none; }
.work-info-side { flex: 0.8; display: flex; flex-direction: column; padding: 35px; text-align: left; border-left: 1px solid #222; overflow-y: auto; }
.work-info-side h3 { color: #00d4ff; font-size: 1.25rem; margin: 0 0 20px 0; border-bottom: 1px solid #333; padding-bottom: 10px; line-height: 1.4; }
.work-info-side p { font-size: 0.85rem; line-height: 1.8; color: #eee; margin-bottom: 25px; white-space: pre-wrap; }
.back-btn { background: #00d4ff; color: #000; border: none; padding: 10px 25px; font-weight: bold; cursor: pointer; border-radius: 4px; align-self: flex-start; margin-top: auto; }

/* --- キャラクター (中サイズ：13vw) --- */
/* --- キャラクターのサイズ調整 --- */
.char { 
    position: absolute; 
    /* 横幅を小さく設定（例: 画面の8%分） */
    width: 26vw !important; 
    /* 最大サイズも小さく制限（例: 80px） */
    max-width: 200px !important; 
    z-index: 20; 
    pointer-events: none;
}

/* ★ここが重要：中身の画像を枠のサイズに強制的に合わせる */
.char img { 
    width: 100% !important; 
    height: auto !important; 
    object-fit: contain;
}

/* 配置位置の微調整（小さくした分、少し外側に寄せる） */
.char1 { top: -40px; left: -40px; animation: float 4s infinite ease-in-out; }
.char2 { bottom: -10px; right: -40px; animation: float 5s infinite ease-in-out reverse; }

@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-18px) rotate(5deg); } }

/* --- リモコン --- */
.remote-control { background: #444; padding: 10px 20px; margin-top: 25px; border-radius: 50px; display: inline-flex; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.remote-btn { background: linear-gradient(#eee, #ccc); border: none; padding: 10px 22px; border-radius: 20px; cursor: pointer; font-weight: bold; font-size: 0.9rem; box-shadow: 0 4px #999; transition: 0.2s; }
.remote-btn.active { background: linear-gradient(#00d4ff, #0099cc); color: white; box-shadow: 0 0 15px rgba(0,212,255,0.7), 0 2px #0077aa; transform: translateY(2px); }

/* --- シャッター（グリッチ） --- */
.shutter { position: absolute; inset: 0; background: transparent; opacity: 0; pointer-events: none; z-index: 100; }
.shutter.active { opacity: 1; background: rgba(10,15,20,0.9); animation: glitch-anim 0.2s infinite; }
@keyframes glitch-anim { 0% { clip-path: inset(40% 0 61% 0); } 40% { clip-path: inset(10% 0 80% 0); } 100% { clip-path: inset(40% 0 61% 0); } }

/* スマホ対応 */
@media (max-width: 768px) {
    .work-detail-flex { flex-direction: column; }
    .work-info-side { border-left: none; border-top: 1px solid #222; }
    .works-list { flex-direction: column; padding: 20px 0; overflow-y: auto; gap: 15px; }
}