/* Desktop Styles - PC版（1920px基準）アスペクト比ベース */
@media (min-width: 1025px) {
    /* Container adjustments for desktop */
    .container {
        max-width: 1920px;
    }
    
    /* Header Section - PC基準 (1920px : 1080px) */
    .header {
        aspect-ratio: 1920 / 1080;
        background-image: url('../images/ja/backgrounds/header-bg-pc.jpg');
    }
    
    .header__lang-selector {
        right: 1.4%;    /* (1920-1681.26-212)/1920 = 1.4% */
        top: 1.97%;     /* 21.26/1080 = 1.97% */
        width: 11.0%;   /* 212/1920 = 11.0% */
        height: 5.37%;  /* 58/1080 = 5.37% */
        background-image: url('../images/ja/ui/lang-pc.png');
    }
    
    /* PC版でも背景画像に矢印が含まれているため削除 */
    
    .lang-select {
        font-size: 1.1em;
    }
    
    .header__service-text {
        left: 61.2%;    /* 1175/1920 = 61.2% */
        top: 52.6%;     /* 568/1080 = 52.6% */
        width: 29.6%;   /* 569/1920 = 29.6% */
        height: 22.1%;  /* 239/1080 = 22.1% */
        /* content設定はJavaScriptで動的に行う */
    }
    
    .header__apps {
        display: block;
    }
    
    .header__app {
        position: absolute;
        text-decoration: none;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .header__app:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }
    
    .header__app img {
        width: 100%;
        height: auto;
    }
    
    .header__app--google-play {
        left: 57.3%;    /* 1101/1920 = 57.3% */
        top: 77.7%;     /* 839/1080 = 77.7% */
        width: 18.3%;   /* 352/1920 = 18.3% */
        height: 10.9%;  /* 118/1080 = 10.9% */
    }
    
    .header__app--apple {
        left: 76.4%;    /* 1467/1920 = 76.4% */
        top: 77.7%;     /* 839/1080 = 77.7% */
        width: 18.3%;   /* 352/1920 = 18.3% */
        height: 10.9%;  /* 118/1080 = 10.9% */
    }
    
    /* Movie Section - PC基準 (1920px : 1258px) */
    .movie {
        aspect-ratio: 1920 / 1258;
        background-image: url('../images/common/backgrounds/movie-bg-pc.png');
    }
    
    .movie__video-container {
        left: 7.5%;     /* 144/1920 = 7.5% */
        top: 21.9%;     /* 276/1258 = 21.9% */
        width: 85.0%;   /* 1632/1920 = 85.0% */
        height: 73.0%;  /* 918/1258 = 73.0% */
    }
    
    /* Campaign Section - PC基準 (1920px : 1879px) */
    .campaign {
        aspect-ratio: 1920 / 1879;
    }
    
    .campaign__text {
        top: 9.0%;      /* 170/1879 = 9.0% */
        left: 19.1%;    /* 367/1920 = 19.1% */
        width: 61.8%;   /* 1186/1920 = 61.8% */
        height: 6.3%;   /* 119/1879 = 6.3% */
        /* content設定はJavaScriptで動的に行う */
    }
    
    .campaign__reward {
        top: 17.5%;     /* 328/1879 = 17.5% */
        left: 9.0%;     /* 172/1920 = 9.0% */
        width: 82.1%;   /* 1576/1920 = 82.1% */
        height: 78.4%;  /* 1474/1879 = 78.4% */
        /* content設定はJavaScriptで動的に行う */
    }
    
    /* Story Section - PC基準 (1920px : 1340px) */
    .story {
        aspect-ratio: 1920 / 1340;
        background-image: url('../images/ja/backgrounds/story-bg-pc.jpg');
    }
    
    /* Characters Section - PC基準 (1920px : 1633px) */
    .characters {
        aspect-ratio: 1920 / 1633;
        background-image: url('../images/ja/backgrounds/characters-bg-pc.jpg');
    }
    
    .characters__image {
        top: 7.7%;      /* 126/1633 = 7.7% (PC版の全体セクション内での位置) */
        left: 0;
        width: 145.8%;  /* 2800/1920 = 145.8% - 新しい画像サイズに対応 */
        height: 60.7%;  /* 991/1633 = 60.7% */
    }
    
    .characters__text {
        top: 18.4%;     /* 300/1633 = 18.4% */
        left: 53.1%;    /* 1020/1920 = 53.1% */
        width: 42.4%;   /* 814/1920 = 42.4% */
        height: 35.4%;  /* 578/1633 = 35.4% */
    }
    
    .characters__arrows {
        top: 37.1%;     /* 606/1633 = 37.1% */
        left: 0.05%;    /* 1/1920 = 0.05% */
        width: 100%;
        height: 7.9%;   /* 129/1633 = 7.9% */
    }
    
    .characters__arrow {
        width: 3.65%;   /* 70.08/1920 = 3.65% */
        height: 87.6%;  /* 113/129 = 87.6% */
        cursor: pointer;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    
    .characters__arrow:hover {
        transform: scale(1.1);
        opacity: 0.8;
    }
    
    .characters__arrow--left {
        left: 0.78%;    /* 15/1920 = 0.78% */
        top: 0.78%;     /* 1/129 = 0.78% */
    }
    
    .characters__arrow--right {
        left: 95.57%;   /* 1835/1920 = 95.57% */
        top: 0;         /* 0/129 = 0% */
    }
    
    /* GoodRoid Logo Link - PC版での調整 */
    .characters__logo-link {
        /* PC版のFigmaデータに基づく位置とサイズ（最新更新） */
        left: 41.98%;   /* 806/1920 = 41.98% */
        top: 75.32%;    /* 1230/1633 = 75.32% */
        width: 18.07%;  /* 347/1920 = 18.07% */
        height: 3.37%;  /* 55/1633 = 3.37% */
    }
    
    /* Footer Section - PC基準 (1920px : 232px) */
    .footer {
        max-width: none; /* PC版でも無制限にスケール */
        aspect-ratio: 1920 / 232; /* Figma PC版の比率を固定 */
    }
    
    /* PC版でもフッターとキャラクターセクションが重なるため、パディングを削除 */
    
    .footer__bg {
        background-image: url('../images/ja/backgrounds/footer-bg-pc.png');
    }
    
    .footer__links {
        top: 19.0%;     /* 44/232 = 19.0% (Figmaデータ通り) */
        left: 0;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 81.0%;  /* 188/232 = 81.0% (Figmaデータ通り) */
        gap: 2.08%; /* 40/1920 = 2.08% (比率で間隔保持) */
    }
    
    .footer__link {
        position: static;
        width: 18.3%;   /* 351/1920 = 18.3% (Figmaデータ通り) */
        height: auto;
        text-decoration: none;
        display: block;
    }
    
    .footer__link--x,
    .footer__link--x-anim {
        width: 18.4%;   /* 353/1920 = 18.4% (Figmaデータ通り) */
    }
    
    .footer__link--x {
        /* content設定はJavaScriptで動的に行う */
    }
    
    .footer__link--x-anim {
        /* content設定はJavaScriptで動的に行う */
    }
    
    .footer__link--google-play {
        /* content設定はJavaScriptで動的に行う */
    }
    
    .footer__link--apple {
        /* content設定はJavaScriptで動的に行う */
    }
}

/* コンテナベースのレスポンシブ調整 */
@media (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding: 0 16px;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 1441px) and (max-width: 1920px) {
    .container {
        max-width: 1440px;
    }
}

@media (min-width: 1921px) {
    .container {
        max-width: 1920px;
    }
}

/* 極小画面での最小サイズ保証 */
@media (max-width: 480px) {
    .container {
        padding: 0 8px;
    }
    
    .header {
        min-height: 300px;
    }
    
    .movie {
        min-height: 150px;
    }
    
    .campaign {
        min-height: 200px;
    }
    
    .story {
        min-height: 250px;
    }
    
    .characters {
        min-height: 300px;
    }
    
    .footer {
        min-height: 80px;
    }
}