@charset "UTF-8";

/* Container */
.telescope-ui-container { max-width: 1100px; margin: 0 auto; padding: 0; }
.ui-section-wrap { margin-bottom: 20px; }

/* --- Swiper FOUC (チラつき) 対策 --- */
.teles-hero-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-out, visibility 0.4s;
}
.teles-hero-slider.swiper-initialized {
    opacity: 1;
    visibility: visible;
}

/* 非初期化時のプレースホルダサイズ */
.teles-hero-slider:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / 1.1 - 20px);
    margin-right: 20px;
}
@media (min-width: 600px) {
    .teles-hero-slider:not(.swiper-initialized) .swiper-slide { width: calc(100% / 1.5 - 30px); margin-right: 30px; }
}
@media (min-width: 1000px) {
    .teles-hero-slider:not(.swiper-initialized) .swiper-slide { width: calc(100% / 1.8 - 40px); margin-right: 40px; }
}

/* --- 見出しデザイン (テーマ委譲 & カスタム装飾) --- */
.telescope-ui-container h2.ui-heading {
    display: flex; 
    align-items: center; 
    position: relative;
    border-left-style: solid;
    border-left-width: 5px;
}

.telescope-ui-container .ui-section-trend h2.ui-heading { border-left-color: #FF6B6B; }
.telescope-ui-container .ui-section-trend h2.ui-heading::before {
    content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 8px; background-repeat: no-repeat; background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23FF6B6B' d='M153.6 29.9l16-21.3C173.6 3.2 180 0 186.7 0C198.4 0 208 9.6 208 21.3V43.5c0 13.1 5.4 25.7 14.9 34.7L307.6 159C356.4 205.6 384 270.2 384 337.7C384 434 306 512 209.7 512H192C86 512 0 426 0 320v-3.8c0-48.8 19.4-95.6 53.9-130.1l3.5-3.5c4.2-4.2 10-6.6 16-6.6C85 176 96 187 96 200.5V218c0 15.7 8.5 30.2 22 38.4l17.7 10.6c17.3 10.4 38.9 4.1 49.3-13.3c5.6-9.4 6.8-20.6 3.1-30.8L153.6 29.9z'/%3E%3C/svg%3E");
}
.ui-section-trend { border-bottom: 1px solid #ddd; padding-bottom: 40px; margin-bottom: 50px; }

.telescope-ui-container .ui-section-genre-wrap h2.ui-heading { border-left-color: #4A90E2; }
.telescope-ui-container .ui-section-genre-wrap h2.ui-heading::before {
    content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 8px; background-repeat: no-repeat; background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%234A90E2' d='M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}

.telescope-ui-container .ui-section-index-wrap h2.ui-heading { border-left-color: #F5A623; }
.telescope-ui-container .ui-section-index-wrap h2.ui-heading::before {
    content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 8px; background-repeat: no-repeat; background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23F5A623' d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");
}

/* Slider & Chips */
.teles-hero-slider { width: 100%; height: auto; padding-bottom: 50px; position: relative; }
.swiper-pagination { bottom: 0px !important; }
.hero-slide { transition: transform 0.3s, opacity 0.3s; }
.swiper-slide:not(.swiper-slide-active) { opacity: 0.5; transform: scale(0.95); }
.hero-link { display: block; text-decoration: none; color: inherit; }
.hero-thumb-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; background: #eee; }
.hero-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.hero-link:hover .hero-img { transform: scale(1.03); }
.hero-meta { margin-top: 10px; text-align: left; padding: 0 5px; }
.hero-title-text { font-size: 1rem; font-weight: bold; color: #333; line-height: 1.4; display: flex; align-items: center; gap: 8px; }
.hero-pickup-label { font-size: 0.7rem; color: #FF6B6B; border: 1px solid #FF6B6B; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.swiper-pagination-bullet-active { background: #FF6B6B !important; }

.ui-pickup-scroller { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 15px; margin-top: 30px; }
.ui-pickup-chip { flex: 0 0 auto; background: #fff; color: #555; padding: 8px 16px; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 0.85rem; transition: all 0.2s; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.ui-pickup-chip:hover { background: #333; color: #fff; border-color: #333; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* --- ジャンル用プルダウン (Sticky) --- */
.ui-genre-sticky-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 110;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.ui-genre-dropdown {
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #4A90E2;
    border-radius: 30px;
    background-color: #fff;
    color: #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A90E2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1.2em;

    /* ★修正: テキストを中央寄せにする */
    text-align: center;
    text-align-last: center;
}

.ui-genre-dropdown:focus {
    outline: none;
    border-color: #333;
}

/* --- 作品インデックス用Sticky --- */
.ui-nav-sticky { position: -webkit-sticky; position: sticky; top: 10px; z-index: 100; margin-bottom: 30px; pointer-events: none; }
.ui-nav-list { pointer-events: auto; display: flex; justify-content: center; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 10px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); list-style: none; gap: 5px; flex-wrap: wrap; margin: 0 auto; width: fit-content; border: 1px solid #eee; }

.ui-nav-item { 
    display: block; 
    min-width: 36px; 
    width: auto;
    height: 36px; 
    line-height: 36px; 
    padding: 0 10px;
    text-align: center; 
    border-radius: 20px; 
    background: #f0f0f0; 
    color: #666; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 0.85rem; 
    transition: 0.2s; 
}
.ui-nav-item:hover { background: #333; color: #fff; transform: scale(1.1); }

/* Row Header */
.ui-row-header { font-size: 1.5rem; color: #555; margin: 40px 0 20px; border-bottom: 1px solid #eee; font-weight: 700; padding-bottom: 10px; }
/* Grid Layout */
.ui-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.ui-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.ui-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.ui-card-thumb-wrap { position: relative; aspect-ratio: 16/9; background: #eee; overflow: hidden; }
.ui-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ui-card-body { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.ui-card-title { font-size: 1.1rem; font-weight: bold; color: #333; text-decoration: none; line-height: 1.4; margin-bottom: 10px; display: block; }

.ui-card-children { margin-top: auto; border-top: 1px solid #f5f5f5; padding-top: 10px; }
.ui-chip-container { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-child-chip { font-size: 0.8rem; background: #f5f5f5; color: #555; padding: 4px 10px; border-radius: 4px; text-decoration: none; transition: 0.2s; }
.ui-child-chip:hover { background: #e0e0e0; color: #333; }

/* Mobile */
@media (max-width: 600px) {
    .ui-pickup-scroller { margin-top: 15px; }
    .ui-card-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid #eee; }
    
    .ui-card { 
        display: flex; 
        flex-direction: row; 
        align-items: center; 
        height: auto; 
        border-radius: 0; 
        box-shadow: none; 
        border: none; 
        border-bottom: 1px solid #eee; 
        padding: 12px 0; 
        background: transparent; 
    }
    
    .ui-card-thumb-link { width: 110px; flex-shrink: 0; margin-right: 15px; padding-left: 5px; }
    .ui-card-thumb-wrap { width: 100%; border-radius: 4px; }
    
    .ui-card-body { 
        /* ★重心調整: 視覚的な「上寄り」を解消 */
        padding: 5px 10px 0 0; 
        min-height: 60px; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .ui-card-title { font-size: 0.95rem; margin-bottom: 5px; line-height: 1.4; }
    .ui-card-children { display: block; border: none; padding: 0; }
    .ui-chip-container { flex-direction: column; gap: 3px; }
    .ui-child-chip { background: none; padding: 0; color: #777; }
    .ui-child-chip::before { content: '└ '; color: #ccc; }
    
    /* スマホではセレクトボックスをさらに押しやすく */
    .ui-genre-dropdown { font-size: 15px; padding: 12px 15px; }
}