body {
    margin: 0;
    font-family: "Yeseva One";
    text-align: center;
    background-image: url("brand_pattern_S4.png");
}

.yeseva-one-regular {
    font-family: "Yeseva One", serif;
    font-weight: 400;
    font-style: normal;
}

.start-button img:hover {
    transform: scale(1.1);
}

.start-btn {
    position: fixed; /*上のレイヤー*/
    font-family: "Yeseva One";
    position: relative; /*ボタン位置セット*/
    width: 60%; /*ボタン位置セット*/
    cursor: pointer; /*カーソル変化*/
    display: block;     /*縦積み*/
    margin: 20px auto;  /*外周り*/
    border-radius: 10px; /*角丸*/
    background: none;
    border: none;
    padding: 10px; /*テキスト周り*/
    box-shadow: 0 0 5px #999; /*シャドウ*/
}

.start-text {
    color: #664039;
    font-size: 240%; /* 必要ならサイズも指定 */
    font-family: Yeseva One; /* フォントの種類を指定（例） */
}

    /*.start-btn img {
        width: 100px;*/ /* ← ここで画像サイズを小さく指定！ */
    /*}*/

#music-toggle-button {
    position: fixed;
    top: 600px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.celect-text {
    display: block;
    color: #664039;
    font-weight: bold; /* 必要なら太字に */
    font-size: 200%; /* 必要ならサイズも指定 */
    font-family: Yeseva One; /* フォントの種類を指定（例） */
    margin-top: 20px;
}

.character-choice {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}



    .character-choice img {
        width: 160px;
        margin: 0px -10px 0px;
        /*border-radius: 10px;*/ /*角丸*/
        cursor: pointer;
        transition: transform 0.2s; 
    }

        .character-choice img:hover {
            transform: scale(1.1);
        }

#game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
}

#character-area {
    position: relative;
    width: 240px;
    height: 240px;
    margin-top: 0px;
    margin-bottom: 30px;
}

    #character-area img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        border: none;
    }

.icon-img {
    width: 30px;
    height: 30px;
    display: block;
    margin: auto; /* 中央に寄せて下に少し余白 */
}

.round-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 10px;
    border: 1px solid #ccc;
}

#category-buttons {
    margin-top: -40px; /* キャラの高さ分のスペースを確保 */
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 0px;
    flex-wrap: wrap;
}

.category-button {
    width: 62px;
    height: auto;
    justify-content: center;
    cursor: pointer;
    display: block;
    margin: -5px -2px;
    background: none;
    border: none;
    padding: 0px;
}

    .category-button img {
        width: 48px; /*← ここで画像サイズを小さく指定！*/
        height: auto;
    }

    .category-button.active {
        border: 2px solid deeppink;
        background-color: #ffe0f0;
        color: deeppink;
        font-weight: bold;
    }

#item-list {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    max-width: 310px;
    max-height: 250px;
    overflow-y: auto;
    justify-content: space-around; /*flexアイテムの両側に均等な余白*/
    background-color: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

    #item-list img {
        width: 80px;
        margin: 5px;
        border-radius: 10px;
        cursor: pointer;
    }

#back-button {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    box-shadow: 0 0 5px #999;
    font-size: 14px;
    border: none;
    background-color: #fffff2;
    border-radius: 5px;
    z-index: 10;
}

#comple-button {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    box-shadow: 0 0 5px #999;
    font-size: 14px;
    border: none;
    background-color: #fcc;
    border-radius: 5px;
    z-index: 10;
}

#save-load-buttons {
    display: flex;
    justify-content: center;  /*中央揃え（必要に応じて） */
    gap: 20px; /* ボタンの間にスペース */
}

    #save-load-buttons button {
        /*margin: 0 5px;*/

        padding: 8px 16px;
        box-shadow: 0 0 5px #999;
        font-size: 14px;
        border: none;
        border-radius: 8px;
        background-color: #fffff2;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

#save-load-screen {
    margin-top: 0px;
    text-align: center;
    padding: 5px;
}

#slots-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.slot {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    width: 120px;
    height: 200px;
    background-color: #fff;
}

    .slot img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 8px; /*角丸*/
    }

    .slot button {
        margin-top: 5px;
        display: block;
        width: 100%;
        padding: 5px;
        border: none;
        background-color: #ffddee;
        border-radius: 5px;
        cursor: pointer;
    }

#back-to-game {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 8px 12px;
    box-shadow: 0 0 5px #999;
    font-size: 14px;
    border: none;
    background-color: #fffff2;
    border-radius: 5px;
    z-index: 10;
}

.save-text {
    display: block;
    color: #664039;
    font-weight: bold; /* 必要なら太字に */
    font-size: 200%; /* 必要ならサイズも指定 */
    font-family: Yeseva One; /* フォントの種類を指定（例） */
    margin-top: 20px;
}

#music-toggle-button {
    display: flex;
    justify-content: center;
    margin-top: 20px; /* 必要に応じて調整 */
}

    #music-toggle-button button {
        margin: 0 5px;
        padding: 6px 12px;
        box-shadow: 0 0 5px #999;
        font-size: 14px;
        border: none;
        border-radius: 8px;
        background-color: #fffff2;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

/* ★完成画面*/
#comple-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 20px;
    background-color: none;
    height: 90%;
    /*min-height: 100vh;*/
    text-align: center;
}

/* 画像全体を中央に */
.container {
    position: absolute;
    top: 280px;
    left: 50%;
    width: 250px;
    height: 250px; /* ← 必ず固定！ */
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* container_back（中央に揃えたい枠全体） */
.container_back {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

/* .frame を中央に配置 */
.frame {
    position: absolute;
    top: 20px;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    width: 300px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .frame img {
        width: 100%;
        height: 100%;
    }

#bagClose {
    width: 50%;
    height: 50%;
}

#bagOpen {
    width: 60%;
    height: 60%;
}

/* .thankyou-text を中央に表示（左右中央揃え） */
.thankyou-text {
    position: absolute;
    top: 45px;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    width: 300px;
    height: auto;
    z-index: 3;
    font-size: 130%;
    font-weight: bold;
    color: #664039;
    text-align: center; /* テキスト内も中央 */
}

/* .anime-object（アニメーション画像）を中央表示に */
.anime-object {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    z-index: 2;
}

/* 各パーツの共通スタイル（重ねる） */
    .anime-object img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

#completion-container {
    position: relative;
    z-index: 10; /* キャラの上に出す */
}

/* 非表示 */
.hidden {
    display: none;
}


/*降りてきてフェードイン*/
.fadeIn1 {
    animation: fadein1 2s forwards ease-in-out;
}

@keyframes fadein1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -80%);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -30%);
    }
}

/* 背景アニメーションF（段階的にフェードイン） */
.fadeIn {
    animation: fadeIn 0.8s linear forwards;
}

@keyframes fadeIn {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, 0);
        opacity: 0.1;
    }

    40% {
        transform: translate(-50%, 0);
        opacity: 0.2;
    }

    60% {
        transform: translate(-50%, 0);
        opacity: 0.3;
    }

    80% {
        transform: translate(-50%, 0);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Thank you テキスト用のzoomInアニメーション */
.zoomIn_t {
    animation: zoomIn_t 1s forwards ease-in-out;
}

@keyframes zoomIn_t {
    0% {
        transform: translate(-50%, 0) scale(0.5);
        opacity: 0;
    }

    50% {
        transform: translate(-50%, 0) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 0) scale(1);
        opacity: 1;
    }
}

/* その他のアニメーション */
.zoomOut {
    animation: zoomOut 0.4s forwards ease-in-out;
}

@keyframes zoomOut {
    0% {
        transform: translate(-50%, -30%) scale(1);
    }

    100% {
        transform: translate(-50%, -30%) scale(0.9);
    }
}

.zoomIn {
    animation: zoomIn 0.4s forwards ease-in-out;
}

@keyframes zoomIn {
    0% {
        transform: translate(-50%, -30%) scale(1.1);
    }

    100% {
        transform: translate(-50%, -30%) scale(1);
    }
}

.fadeOut {
    animation: fadeOut 1s forwards ease-in-out;
}

@keyframes fadeOut {
    0% {
        transform: translate(-50%, -30%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -30%) scale(1);
        opacity: 0;
    }
}

/* キャラアニメーションF（段階的にフェードイン） */
.fadeIn2 {
    animation: fadeIn2 0.8s linear forwards;
}

@keyframes fadeIn2 {
    0% {
        transform: translate(-50%, 0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, 0);
        opacity: 0.1;
    }

    40% {
        transform: translate(-50%, 0);
        opacity: 0.2;
    }

    60% {
        transform: translate(-50%, 0);
        opacity: 0.3;
    }

    80% {
        transform: translate(-50%, 0);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* トップへ戻るボタンの見た目と位置 */
.back-to-top {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 300px auto;
    padding: 16px 24px;
    font-size: 18px;
    font-weight: bold;
    background-color: #f9b24b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s, background-color 0.3s;
    z-index: 10; /* キャラの上に出す */
    white-space: nowrap; /* ← テキストの折り返しを禁止 */
    max-width: 100%; /* ← はみ出し防止（必要に応じて調整） */
}

    .back-to-top:hover {
        background-color: #e69e2f;
        transform: translate(-50%, 0) scale(1.05);
    }