/* ==========================================
   [0] テーマ設定（ここをJSから操作する）
   ========================================== */
:root {
    /* Cotton Dream プリセット */
    --theme-bg-color: #f0f2f5;       /* 全体背景 */
    --theme-main-color: #ffffff;     /* カード等のメイン背景 */
    --theme-accent-color: #ff7eb3;   /* ボタン・強調色 */
    --theme-text-color: #333333;     /* 基本文字色 */
    --theme-sub-text-color: #777777; /* 補足文字色 */
    --theme-border-radius: 30px;     /* 角の丸み（癒し系は丸く） */
}
.voice-play-button, 
.admin-btn-primary, 
.voice-play-btn {
    background: var(--theme-accent-color) !important;
    box-shadow: 0 3px 8px rgba(255,126,179,0.3); /* ここも後で変数化可能 */
}
/* ==========================================
   [1] 全体・共通設定
   ========================================== */
   * {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* タップ時の青い枠を消す */
}

body {
    /* スクロールを阻害するflex設定を解除、または調整 */
    display: block; /* centerに寄せたい場合は main コンテナ側で調整するのが基本です */
    
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    
    /* 背景と文字色は変数のまま */
    background-color: var(--theme-bg-color);
    color: var(--theme-text-color);
    
    /* 重要：縦スクロールを明示的に許可 */
    overflow-y: auto; 
    overflow-x: hidden;
    
    /* スマホでの滑らかなスクロール */
    -webkit-overflow-scrolling: touch;
    
    /* 最小高さは持たせつつ、はみ出してもOKにする */
    min-height: 100vh; 
}



/*
body {
    width: 100%;
    max-width: 100vw; /* 画面幅を超えないようにする 
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横揺れ（横スクロール）を防止 
    overflow-y: auto;   /* 縦スクロールを許可 
    -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかにする 
    font-family: Noto Sans JP, Hiragino Kaku Gothic ProN, メイリオ, sans-serif;
}
*/
html, body {
    overflow-x: hidden; /* html側にも念のため指定 */
    width: 100%;
    position: relative;
}
/*
body { 
    font-family: 'Helvetica Neue', 'Arial', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 98vh; 
    background-color: var(--theme-bg-color); 
    color: var(--theme-text-color); 
    margin: 0; 
    padding: 15px 0 10px; /* 上下に少し余裕を持たせる 
    overflow-x: hidden; 
}
*/
main{
    width: 100%;
}

/* 各セクションの横幅固定 */
.profile-section, 
#video-container, 
.membership-section, 
.block-item, 
.admin-ad-container {
    /*max-width: 600px;*/ 
    width: 90%; 
    margin-bottom: 20px; /* モバイルでは少し詰め気味に */
    margin-left: auto;
    margin-right: auto;
}
/* ==========================================
   [2] ボタン・操作パーツ（統合済み）
   ========================================== */
/* ==========================================
   [3] プロフィール・ボイス・DATA
   ========================================== */
   .profile-section {
    width: 100%;
    padding: 20px 15px;
}

.profile-actions-hight {
    text-align: center;
    border: solid 1px var(--theme-sub-text-color);
    border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;
    width: 100%;
    /* ★重要: 正方形を維持 */
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background-color: var(--theme-bg-color);
    overflow: hidden;
}


#main-illustration {
    /* ★重要: 画像が読み込まれる前からこのサイズで計算させる */
    width: 100% !important;
    height: 100% !important; 
    object-fit: contain;
}
/* 左側コンテンツを縦に並べる */




/* 操作系を一列に並べる */
.profile-actions-row {
  width: auto;
  text-align: center;
}

/* ボイスボタンを少しコンパクトに */
.voice-play-button {
    flex: 0 0 44px; /* サイズを固定 */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--theme-accent-color);
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* ギャラリーをボイスボタンの横に並べる */
.thumbnail-gallery {
    display: flex;
    gap: 6px;
    overflow-x: auto; /* 万が一多い場合に横スクロール可能に */
    padding-bottom: 2px;
}

.thumbnail-gallery img {
    width: 40px;  /* 小さめのアイコンサイズ */
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eee;
    cursor: pointer;
    transition: all 0.2s;
}

.thumbnail-gallery img.active {
    border-color: var(--theme-accent-color);
    transform: scale(1.1);
}

/* 右側画像コンテナのサイズを固定（巨大化防止） */
.main-illustration-container {
    flex: 0 0 120px; /* スマホで見栄えの良いサイズ */
    height: 120px;
    background-color: var(--theme-bg-color);
    border-radius: 12px;
    overflow: hidden;
}

/* スマホ幅が非常に狭い場合 (iPhone SEなど) */
@media (max-width: 370px) {
    .main-illustration-container {
        flex: 0 0 90px;
        height: 90px;
    }
    #name { font-size: 1.2rem; }
    .voice-play-button { width: 38px; height: 38px; }
}

/* ==========================================
   [4] 立ち絵・サムネイル
   ========================================== */




/* ==========================================
   [2] メイン立ち絵・ギャラリー（スマホ調整）
   ========================================== */
/* ==========================================
   [2] プロフィール横並び・ボタン一列
   ========================================== */


   




/* ==========================================
   [3] 音声再生・DATA・SNS（押しやすさ重視）
   ========================================== */
.voice-play-button {
    width: 64px; height: 64px; /* 指で押しやすいサイズ(48px以上推奨) */
    font-size: 26px;
    margin: 10px auto;
    /* ボタンの色を共通変数へ */
    background: var(--theme-accent-color);
    color: white; /* アクセントカラー上の文字は白が見やすい */
}

/* ボイスカードのスタイル */
.voice-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.voice-card {
    background: var(--theme-main-color);
    border-radius: var(--theme-border-radius);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.voice-card:hover {
    transform: scale(1.02);
}

.voice-title {
    font-weight: bold;
    font-size: 0.9rem;
    /* 文字色を共通変数へ */
    color: var(--theme-text-color);
}

.voice-play-btn {
    /* 背景をアクセントカラーへ変更 */
    background: var(--theme-accent-color); 
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* アイコン（文字）の色は白へ */
    color: white; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#data-list {
    /* 線の色をテキスト色と連動 */
    border: 3px double var(--theme-text-color); 
    border-radius: 15px; 
    padding: 12px; 
    font-size: 0.9rem;
    color: var(--theme-text-color);
}

.data-label { 
    min-width: 5.5em; 
    /* ラベルは少し薄めのサブテキスト色を使うとバランスが良いです */
    color: var(--theme-sub-text-color); 
}

#sns-links {
    gap: 12px;
    padding: 10px 0;
}

#sns-links a {
    font-size: 14px;
    padding: 8px 12px;
    /* 背景をメインカラー、枠線を少し薄く設定 */
    background: var(--theme-main-color);
    border: 1px solid #ddd;
    border-radius: var(--theme-border-radius);
    color: var(--theme-text-color);
    text-decoration: none;
}

/* ==========================================
   [5] 横スクロール（共通設定）
   ========================================== */
   section#archive-block,
   section#song-block,
   section#shorts-block,
   section#other-block {
       margin: 0 0 0 5%;
       width: 95%;
       border-radius: 20px 0 0 20px;
   }
    h3
    {
    color: var(--theme-accent-color);
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 0;
    padding: 15px 0 10px 10px;
    }
   .video-grid, 
   [id^="video-list-"], 
   .membership-scroll-container {
       display: flex !important;
       overflow-x: auto;
       overflow-y: hidden; /* 縦方向のハミ出しを防止 */
       gap: 15px;
       padding: 10px 5px 20px 5px; /* 下に余裕を持たせてスクロールバーと干渉させない */
       scroll-snap-type: x mandatory;
       -webkit-overflow-scrolling: touch;
       margin-left: 3%;
   }
   
   /* スクロールバーのカスタマイズ（色をテーマに合わせて調整） */
   .video-grid::-webkit-scrollbar,
   .membership-scroll-container::-webkit-scrollbar {
       height: 5px;
   }
   .video-grid::-webkit-scrollbar-thumb,
   .membership-scroll-container::-webkit-scrollbar-thumb {
       /* スクロールバーの色をテキスト色（またはアクセント色）の薄い版に */
       background: var(--theme-text-color);
       opacity: 0.2;
       border-radius: 10px;
   }
   
   /* 各カードのサイズ固定 */
   .video-card {
       flex: 0 0 220px; /* 次のカードが少し見えるサイズ */
       scroll-snap-align: start; 
       transition: transform 0.2s;
       /* カード背景もメインカラーに */
       background: var(--theme-main-color);
   }
   
   .video-card img {
       width: 100%; 
       height: auto;
       /* 角の丸みを変数に合わせる（画像なので少し控えめが綺麗です） */
       border-radius: 12px;
       display: block;
       aspect-ratio: 16 / 9; /* 常にYouTube比率を保つ */
       object-fit: cover;
   }
   
   .video-card.is-shorts {
       flex: 0 0 150px; /* ショート動画はスリムに */
   }
   
   /* ドラッグ中の要素が半透明になる */
   .sortable-ghost {
       opacity: 0.4;
       /* 背景色をアクセントカラーの薄い版へ（ここ重要！） */
       background-color: var(--theme-accent-color) !important;
   }
   
   /* 掴んでいる時のカーソル */
   .reorder-item:active {
       cursor: grabbing;
   }
   
   .membership-card {
       flex: 0 0 260px;
       scroll-snap-align: center;
       /* メンバーシップカードもテーマの丸みと背景を適用 */
       background: var(--theme-main-color);
       border-radius: var(--theme-border-radius);
   }
/* ==========================================
   [6] Q&A（スマホの誤操作防止）
   ========================================== */
.qa-question {
    padding: 18px 15px; /* タップ領域を広げる */
    font-size: 0.95rem;
    /* 文字色をテーマ変数へ */
    color: var(--theme-text-color);
    /* 質問の下に薄い線を引く場合も変数を利用 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.qa-answer-inner {
    font-size: 0.9rem;
    /* 回答の文字色もテーマに合わせる */
    color: var(--theme-text-color);
    /* 背景を少しだけ背景色に寄せると「回答」らしさが出ます */
    background-color: rgba(0, 0, 0, 0.02);
}

/* ==========================================
   [7] 広告（モバイルフレンドリー）
   ========================================== */
.admin-ad-container {
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    /* 枠線の色をサブテキスト色（またはアクセント色の透過）へ */
    border-color: var(--theme-sub-text-color);
    border-radius: var(--theme-border-radius);
    background-color: var(--theme-main-color);
    color: var(--theme-text-color);
}


/* ==========================================
   [7] 立ち絵部分 
   ========================================== */
/* ==========================================
   [7] 立ち絵部分（レイアウト・位置固定）
   ========================================== */
   section.illustrations-section {
    width: 100%;
    max-width: 100%;
    position: relative; 
    height: 500px; 
    display: flex;
    align-items: center;
    justify-content: center;
    /* 背景をテーマ背景色へ */
    background-color: var(--theme-bg-color);
    contain: layout;
    overflow: hidden;
}

#tatie {
    min-width: 300px; 
    height: 100%;
    max-height: 500px; 
    width: auto;
    height: auto;
    object-fit: contain;
    display: block; 
    transition: opacity 0.3s;
}

div#illustration-thumbnails {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 20px;
    right: 15px;
    gap: 15px;
    width: 12vw; 
    min-width: 50px;
    min-height: 100px;
    z-index: 10;
}

#illustration-thumbnails img {
    border-radius: 50%;
    /* 枠線の色は少し薄めに。ここも変数化可能です */
    border: 2px solid #eee; 
    width: 12vw; 
    height: 12vw;
    min-width: 45px;
    min-height: 45px;
    max-width: 70px;
    max-height: 70px;
    object-fit: cover;
    object-position: top;
    /* サムネイル自体の背景もテーマに合わせる */
    background-color: var(--theme-main-color);
}

/* ★追加：アクティブな（選択中の）衣装の枠線をテーマカラーにする */
#illustration-thumbnails img.active {
    border-color: var(--theme-accent-color);
    border-width: 3px;
    transform: scale(1.1);
}
/* ==========================================
   [5] モーダル・通知
   ========================================== */
/* モーダル全体の背景（背後を少し透かすのが一般的です） */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色ではなく、半透明の黒にすることで「浮き出た感」を出します */
    background-color: rgba(255, 255, 255, 0.7); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* モーダルの中身（白い箱） */
.modal-content {
    background: var(--theme-main-color); /* テーマのメイン色（白）へ */
    padding: 25px;
    border-radius: var(--theme-border-radius); /* 角丸をテーマに統一 */
    width: 90%;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--theme-text-color); /* 文字色を連動 */
}

/* 入力欄の見た目 */
.modal-content input, 
.modal-content select, 
.modal-content textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px; /* 少し丸める */
    font-size: 16px;
    background-color: #fff;
    color: #333; /* 入力文字は読みやすさ優先 */
}

/* ボタンの配置 */
.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* 保存ボタン（アクセントカラーへ） */
.save-btn {
    background-color: var(--theme-accent-color);
    color: white; /* ピンク背景に黒文字は読みづらいため白推奨 */
    border: none;
    padding: 10px 20px;
    border-radius: 25px; /* 丸みを追加 */
    font-weight: bold;
    cursor: pointer;
}

/* キャンセルボタン */
.cancel-btn {
    background-color: #eee;
    color: var(--theme-sub-text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
}

/* 管理者用プライマリボタン */
.admin-btn-primary {
    background-color: var(--theme-accent-color);
    color: white; /* 読みやすさのため白へ */
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* 管理者用セカンダリボタン */
.admin-btn-secondary {
    background-color: var(--theme-sub-text-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
}

/* 通知の親コンテナ */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

/* 通知本体のスタイル */
.toast {
    min-width: 250px;
    margin-bottom: 10px;
    padding: 15px 20px;
    background: var(--theme-main-color); /* 背景を変数へ */
    color: var(--theme-text-color);      /* 文字色を変数へ */
    border-radius: 10px; /* 通知は少し控えめな角丸が一般的 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.3s ease-out forwards;
    border-left: 5px solid #ccc;
}

.toast.success { border-left-color: #52c41a; } /* 成功: 緑 */
.toast.error { border-left-color: #ff4d4f; }   /* 失敗: 赤 */

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ボタン類の共通設定（統合） */
.voice-play-button, 
.admin-btn-primary, 
.voice-play-btn {
    background: var(--theme-accent-color) !important;
    /* 影の色をアクセントカラーに連動させる（後で変数化可能とのコメントを反映） */
    box-shadow: 0 3px 8px rgba(255, 126, 179, 0.3); 
    color: white !important;
}

/* 各セクションの共通設定（統合） */
.profile-section, 
.membership-section, 
.block-item {
    /* あなたが指定した30pxの角丸を適用 */
    border-radius: var(--theme-border-radius); 
    background: var(--theme-main-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* 影を薄く広く */
}












/************* データエリア全体のコンテナ */

.talent-data-wrapper {
    width: 100%;
    margin-top: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05); /* ほんのり背景 */
    border-radius: 12px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    border-left: 4px solid var(--theme-accent-color); /* テーマ色と連動 */
    padding-left: 15px;
}

/* メイン情報：グリッドレイアウト */
.talent-info-grid {
    display: grid;
    /* 画面幅に合わせて自動で列数を調整 (最小200px) */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item dt {
    font-size: 0.75rem;
    color: #999; /* ラベルはあえて控えめ */
    font-weight: 600;
    letter-spacing: 0.05em;
}

.info-item dd {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-color);
}

/* 下部タグエリア */
.talent-footer-tags {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tag-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.group-label {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--theme-accent-color);
    min-width: 80px;
}

.tags-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 個別のタグ装飾 */
.tag-platform, .tag-time {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 配信頻度などのテキスト */
.freq-text {
    font-size: 0.8rem;
    color: #bbb;
    align-self: center;
}
/************閲覧ページ開始ボタン*/
/* 左側固定の編集ボタン */
/* 管理画面専用：テーマ編集起動ボタン */
#edit-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--theme-accent-color) !important;
    color: white;
    padding: 12px 20px;
    border-radius: 30px;
    border: none;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
    transition: 0.3s;
}
/************paretto*/
/* 左側固定の編集ボタン */
/* 管理画面専用：テーマ編集起動ボタン */
.theme-edit-trigger {
    position: fixed;
    left: 10px;
    top: 54vh;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--theme-main-color); /* ボタン自体は白系 */
    border: 2px solid var(--theme-accent-color); /* 縁取りをアクセント色に */
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 0;
}

.theme-edit-trigger:hover {
    transform: scale(1.1) rotate(15deg);
}

/* 後で パレット.webp に差し替えるための設定 */
.theme-edit-trigger img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

/* 画像がない時の仮アイコン */
.theme-edit-trigger::after {
    content: "🎨";
    font-size: 24px;
}

/*******************カルーセル*/
/* モーダル内のスライダー全体 */
.theme-selector-wrapper {
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

.theme-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* ここを JS で動かす例: transform: translate3d(-100px, 0, 0); */
}

/* カードの基本スタイル */
.theme-card {
    min-width: 100px;
    height: 120px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    background: #f0f0f0;
    transition: all 0.4s ease;
    cursor: pointer;
    opacity: 0.6;
    transform: scale(0.8);
}

/* 中央の主役 */
.theme-card.active {
    opacity: 1;
    transform: scale(1.2); /* 20%大きく */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background: var(--theme-accent-color);
    color: white;
    z-index: 2;
}

/* 前後のカード */
.theme-card.primary {
    opacity: 0.8;
    transform: scale(1);
    z-index: 1;
}

/* スライダーを囲む窓（ここから外は見えない） */
.theme-selector-wrapper {
    width: 300px; /* カード約3枚分弱の幅に絞る */
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* ここで窓を作る */
}

.theme-track {
    display: flex;
    gap: 15px;
    /* JSから動かすので初期位置は0 */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}



/***サンリオ*/
.theme-slider-container {
    position: relative;
    height: 300px; /* スマホで操作しやすい高さ */
    width: 100%;
    perspective: 1200px; /* 奥行き感を強調 */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* カードを少し下に配置 */
}

.theme-card {
    position: absolute;
    bottom: 50px; /* 軸からの距離 */
    width: 120px;
    height: 160px;
    /* 回転軸をカードの下、はるか遠くに設定（これが湾曲の正体） */
    transform-origin: center 500px; 
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    backface-visibility: hidden;
}

/* 中央に来たカードを強調 */
.theme-card.active {
    filter: brightness(1.1);
    z-index: 10;
}

/* モーダルの背景に中央だけ明るい光を入れる */
.theme-selector-wrapper::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none; /* 操作の邪魔をしない */
}

/********縦ダイヤル*/

/* 外枠：左側に寄せる */
    /* 外枠：高さを450pxに合わせる */
    .theme-selector-wrapper { 
        width: 100%; 
        height: 450px; 
        overflow: hidden; 
        display: flex;
        align-items: center; 
        justify-content: flex-start;
        background: transparent !important;
        position: relative;
        /* JSで制御するため、ブラウザ標準のスクロール挙動を止める */
        touch-action: none; 
    }
    
    /* スライダーの土台：スクロール機能はJSが持つので不要 */
    .theme-slider-container { 
        width: 200px; 
        height: 100%; /* 親に合わせる */
        perspective: 1200px; /* 立体感を少し強調 */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* カードがはみ出しても見えるように */
    }
    
    /* 各カード：JSのtranslate3dで位置が決まるため absolute */
    .theme-card { 
        position: absolute;
        /* leftの位置などはJSのtranslateXでも制御されますが、基準位置として固定 */
        left: 20px; 
        width: 80px;
        height: 80px; 
        background: #fff;
        border-radius: 50%;
        display: flex;
        flex-direction: column; /* 絵文字と文字を縦に並べる */
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1.2;
        font-weight: bold;
        text-align: center;
        
        /* アニメーションの質感を決定 */
        transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
        backface-visibility: hidden;
        user-select: none;
        opacity: 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .theme-card.active {
        background: var(--theme-accent-color, #ffaa00);
        color: white !important; /* 文字を白に */
        box-shadow: 0 0 25px var(--theme-accent-color);
        transform: scale(1.1); /* アクティブなものを少し大きく */
    }





  /********************************アニメーション/
  /* 共通の土台 */
 /* どのエフェクトでも変わらない「幕」の基本設定 */

 #loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none; /* JSで triggerOpening が呼ばれるまでは隠しておく */
    background: #000; /* 読み込み前のチラつき防止 */
}

/* JSで実行された時に付与される基本スタイル */
.loader-base {
    display: flex !important;
    pointer-events: auto;
}

/* --- パターン：バー（bars.js用） --- */
.loader-bars { flex-direction: row; }
.bar {
    flex: 1;
    height: 100%;
    /* 以前のこだわり：グラデーションを適用 */
    background: linear-gradient(180deg, #1a1a1a 0%, #333 100%);
}

/* --- パターン：分割（split.js用） --- */
.loader-split { flex-direction: column; }
.loader-block {
    flex: 1;
    width: 100%;
    background: #000;
}

/* --- テキスト（共通） --- */
#loader-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    /* 以前のこだわり：ネオンカラーとフォント */
    color: #00ffcc;
    font-family: 'Courier New', 'Goldman', monospace;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(0,255,204,0.5);
}