/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
    overflow-x: hidden;
    /* フッターがキャラクターセクションと重なるため、パディングを削除 */
    /* 読み込み中の白い画面を防ぐための背景色 */
    background-color: #000;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container System - アスペクト比を保持しつつ画面に収める */
.container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    position: relative;
}

/* Section Base */
.section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Header Section - SP基準 (1024px : 1820px) */
.header {
    aspect-ratio: 1024 / 1820;
    background-image: url('../images/ja/backgrounds/header-bg-sp.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.header__lang-selector {
    position: absolute;
    right: 2.6%;    /* (1024-785.26-212)/1024 = 2.6% */
    top: 1.17%;     /* 21.26/1820 = 1.17% */
    width: 20.7%;   /* 212/1024 = 20.7% */
    height: 3.19%;  /* 58/1820 = 3.19% */
    background-image: url('../images/ja/ui/lang-sp.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* 背景画像に矢印が含まれているため、::after矢印は削除 */

.header__lang-selector:hover {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.lang-select {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.01); /* 極薄い背景でクリック判定を確保 */
    border: none;
    color: transparent;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    appearance: none;
    position: relative;
    z-index: 10;
}

.lang-select:hover {
    background: rgba(255, 255, 255, 0.1); /* ホバー時に薄い白を重ねる */
}

.lang-select:focus {
    outline: none; /* フォーカス時の青枠を削除 */
}

.lang-select option {
    background: #2c3e50;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 16px;
}

.header__service-text {
    position: absolute;
    left: 25.1%;    /* 257/1024 = 25.1% */
    top: 75.9%;     /* 1382/1820 = 75.9% */
    width: 49.8%;   /* 510/1024 = 49.8% */
    height: 11.8%;  /* 215/1820 = 11.8% */
}

.header__apps {
    display: none;
}

/* Movie Section - SP基準 (1024px : 680px) */
.movie {
    aspect-ratio: 1024 / 680;
    background-image: url('../images/common/backgrounds/movie-bg-sp.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.movie__video-container {
    position: absolute;
    left: 5.0%;     /* 51/1024 = 5.0% */
    top: 17.6%;     /* 120/680 = 17.6% */
    width: 90.0%;   /* 922/1024 = 90.0% */
    height: 76.2%;  /* 518/680 = 76.2% */
}

.movie__video {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.movie__controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

.movie__arrow {
    position: absolute;
    width: 6.35%;   /* キャラクター切り替えと同じサイズ */
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.movie__arrow:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.movie__arrow--left {
    left: 1%;
}

.movie__arrow--right {
    right: 1%;
}

/* Campaign Section - SP基準 (1024px : 1133px) */
.campaign {
    aspect-ratio: 1024 / 1133;
    background-image: url('../images/common/backgrounds/campaign-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.campaign__text {
    position: absolute;
    top: 9.7%;      /* 110/1133 = 9.7% */
    left: 2.4%;     /* 25/1024 = 2.4% */
    width: 95.1%;   /* 974/1024 = 95.1% */
    height: 8.6%;   /* 98/1133 = 8.6% */
}

.campaign__reward {
    position: absolute;
    top: 22.1%;     /* 250/1133 = 22.1% */
    left: 6.2%;     /* 63/1024 = 6.2% */
    width: 87.7%;   /* 898/1024 = 87.7% */
    height: 74.1%;  /* 840/1133 = 74.1% */
}

/* Story Section - SP基準 (1024px : 1543px) */
.story {
    aspect-ratio: 1024 / 1543;
    background-image: url('../images/ja/backgrounds/story-bg-sp.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

/* Characters Section - SP基準 (1024px : 1732px) */
.characters {
    aspect-ratio: 1024 / 1732;
    background-image: url('../images/ja/backgrounds/characters-bg-sp.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

.characters__image {
    position: absolute;
    top: 4.04%;     /* 70/1732 = 4.04% */
    left: 0.10%;    /* 1/1024 = 0.10% */
    width: 100%;    /* 1024/1024 = 100% */
    height: 40.65%; /* 704/1732 = 40.65% */
}

.characters__text {
    position: absolute;
    top: 43.87%;    /* 760/1732 = 43.87% */
    left: 9.86%;    /* 101/1024 = 9.86% */
    width: 79.49%;  /* 814/1024 = 79.49% */
    height: 33.37%; /* 578/1732 = 33.37% */
}

.characters__arrows {
    position: absolute;
    top: 21.48%;    /* 372/1732 = 21.48% */
    left: 0%;       /* 0/1024 = 0% */
    width: 100%;    /* 1024/1024 = 100% */
    height: 5.77%;  /* 100/1732 = 5.77% */
}

.characters__arrow {
    position: absolute;
    width: 6.35%;   /* 65/1024 = 6.35% */
    height: 100%;   /* 100/100 = 100% */
    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: 4.39%;    /* 45/1024 = 4.39% */
    top: 0%;        /* 0/100 = 0% */
}

.characters__arrow--right {
    left: 89.26%;   /* 914/1024 = 89.26% */
    top: 0%;        /* 0/100 = 0% */
}

/* GoodRoid Logo Link */
.characters__logo-link {
    position: absolute;
    left: 33.01%;   /* 338/1024 = 33.01% */
    top: 77.54%;    /* 1343/1732 = 77.54% */
    width: 33.89%;  /* 347/1024 = 33.89% */
    height: 3.18%;  /* 55/1732 = 3.18% */
    display: block;
    text-decoration: none;
}

/* GoodRoid Logo Image */
.characters__logo {
    width: 100%;
    height: 100%;
    display: block;
}

/* Footer Section - SP基準 (1024px : 272px) */
.footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1024px; /* SP版の最大幅 */
    aspect-ratio: 1024 / 272; /* Figma SP版の比率を固定 */
    z-index: var(--z-index-footer);
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
    }
    to {
        transform: translateX(-50%) translateY(0);
    }
}

.footer__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/ja/backgrounds/footer-bg-sp.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer__links {
    position: absolute;
    top: 23.2%;     /* 63/272 = 23.2% (Figmaデータ通り) */
    left: 19.2%;    /* 197/1024 = 19.2% (Figmaデータ通り) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6%; /* 10/631 = 1.6% (比率で間隔保持) */
    width: 61.6%;   /* 631/1024 = 61.6% (Figmaデータ通り) */
    height: 70.6%;  /* 192/272 = 70.6% (Figmaデータ通り) */
}

/* フッターリンクのホバー効果 */
.footer__link {
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}

.footer__link:hover {
    transform: scale(1.1);
    /* opacity: 0.8; を削除 - 透過値変更を無効化 */
}

.footer__link img {
    width: 100%;
    height: auto;
}


.footer__link {
    width: 47.5%;   /* 300/631 = 47.5% (Figmaデータ通り) */
    height: auto;
}

.footer__link--x {
    position: absolute;
    top: 0.26%;     /* 0.5/192 = 0.26% */
    left: 0;
}

.footer__link--x-anim {
    position: absolute;
    top: 0.26%;     /* 0.5/192 = 0.26% */
    right: 0;
}

.footer__link--google-play {
    position: absolute;
    bottom: 0;
    left: 0;
}

.footer__link--apple {
    position: absolute;
    bottom: 0;
    right: 0;
}