/* デザイン再現のためのカスタムCSS */
        main{
            padding: 0;
        }

        body {
            color: #333;
            background-color: #F9FAFD !important;
        }
        @media (min-width: 768px) {
            body {
                padding-bottom: 0; /* PCでは不要 */
            }
        }
        #page-wrapper{
                        background-color: #F9FAFD;
            background-image: url('../img/sp_bg.png');
            background-size: contain;
            background-position: center top;
            background-repeat: no-repeat;
        }
        @media (min-width: 768px) {
        #page-wrapper{
                        background-color: #F9FAFD;
            background-image: url('../img/bg.png');
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
        }
        }

        /* ページのビュー切り替え */
        body.page-select #page-detail-view,
        body.page-detail #page-select-view {
            display: none;
        }
        #character-page{
            position: relative;
        }
        @media (min-width: 768px) {
            #character-page{
                display: flex;
            }
        }
        #main-select-img{
            @media (min-width: 768px) {
                margin-left: 92px;
            }
        }
        /* --- PC用サイドバー --- */
        #job-sidebar {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
                position: fixed;
    z-index: 100;
    left: 1rem;
        }

        .job-tabs button {
            transition: all 0.3s ease;
        }
        .job-tabs button.active {
            background-color: #F06292; /* 仮のピンク */
            color: white;
            box-shadow: 0 2px 4px rgba(240, 98, 146, 0.4);
        }
        .fa-chevron-right:before,.fa-chevron-left:before{
            font-size: .75rem;
        }
        .fa-chevron-left-ca::before{
            content: "\f053";
            font-size: 1.5rem;
        }

        /* ★ h2の親コンテナに relative を追加 ★ */
        .heading-h2-job {
            position: relative;
        }
                @media (min-width: 768px) {
            .heading-h2-job {
        width: 70%;
        margin: 0 auto;
        /* padding-left: 10%; */
            }
        }
        .heading-h2-job h2{
            border-bottom: 4px solid;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 23px;
    font-weight: 600;
        }
        
        /* 共通アイコンスタイル */
        .job-icon-list li {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            flex-shrink: 0; /* スライド時に縮まないように */
            max-width: 60px;
            height: 60px;
             border: 2px solid #D9D9D9;
        }
        .job-icon-list li.active {
            border: 2px solid #F06292;
        }
        .job-icon-list li:hover {
            border: 2px solid #F06292;
        }

        .job-arrow {
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .job-arrow:hover {
            transform: scale(1.2);
            color: #F06292;
        }
                
        /* --- SP 職業リスト (固定バー) --- */
        
        /* ★ 修正: position: sticky に変更 */
        .sp-icon-bar-container-al{
            position: sticky; /* fixedからstickyに変更 */
            z-index: 5;
            bottom: 3%; /* 画面下部からの距離 */
        }

        /* ★ 修正: position: fixed を削除し、relative に変更 */
        #sp-icon-bar-container {
            position: relative; /* fixedから変更 */
            /* bottom: 0; */ /* .sp-icon-bar-container-al が制御 */
            left: 4%;
            display: flex; /* SPでのみflex */
            align-items: end; /* 高さを揃える */
            z-index: 40;
            transition: transform 0.4s ease-out;
            transform: translateX(0); /* .is-open の状態 (デフォルト) */
        }
        
        /* ★ 閉じた状態 (コンテナごと右にスライド) */
        #sp-icon-bar-container:not(.is-open) {
            transform: translateX(calc(-89%)); 
        }

        
        /* リスト開閉コンテンツ (タブ、矢印、リスト) */
        #sp-icon-list-content {
            display: flex;
            flex-direction: column; /* タブとリストを縦に並べる */
            align-items: center;
            padding: 12px 8px 12px 16px;
            white-space: nowrap; /* 中身が改行しないように */
            width: 85vw;
            max-width: 368px;
                        background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        }
        #sp-icon-list-wrapper{
                max-width: 277px;
        }
        
        /* アイコンリスト部分 (矢印 + リスト + 矢印) */
        #sp-icon-list-bottom-row {
            display: flex;
            align-items: center;
            gap: 5px; /* 矢印とリストの間隔 */
            margin-top: 12px; /* タブとの間隔 */
        }


        /* 開閉ボタン */
        #sp-icon-toggle-button {
            display: flex;
            align-items: center;
            justify-content: center; /* 中央揃え */
            background-color: #F06292; /* 仮のピンク */
            color: white;
            padding: 12px 8px; 
            cursor: pointer;
            writing-mode: vertical-rl; /* 縦書き */
            font-size: 0.6rem;
            flex-shrink: 0; 
            width: 30px; /* 固定幅 (calc計算用) */
            height: 100px;
        }
        
        #sp-icon-toggle-button .toggle-arrow {
            transition: transform 0.3s ease;
            transform: rotate(0deg); /* 初期状態 (閉じる矢印) */
            margin-top: 8px; /* 文字との間隔 */
        }
        
        #sp-icon-bar-container:not(.is-open) #sp-icon-toggle-button .toggle-arrow {
             transform: rotate(180deg); /* 開く矢印 */
        }
        .movie_s::before{
              content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Crect width='42' height='42' rx='8' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M42 42H0V0H42V42ZM28.98 21.0001L14 28.4901V13.5101L28.98 21.0001Z' fill='%23FF8DC0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
      border-radius: 1rem;
        }

        /* --- 選択画面 --- */
        .character-select-card {
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }
        .character-select-card:hover {
            transform: scale(1.05);
            z-index: 10;
        }
        
        @media (min-width: 768px) {
            /* #page-select-view::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 10%;
                bottom: 10%;
                width: 2px;
                background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.7), transparent);
                transform: translateX(-50%);
                opacity: 0.5;
            } */
            #sp-icon-bar-container {
                display: none;
            }
            /* ★ 修正: PCではラッパー自体を非表示に */
            .sp-icon-bar-container-al {
                display: none;
            }
            /* ★ 修正: PCではSP戻るボタンを非表示 */
            #sp-back-to-select-btn {
                display: none !important;
            }
        }

        /* --- 詳細画面 --- */
        .detail-section-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #903C7D;
                display: flex;
    align-items: center;
        }
.detail-section-title::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M13.3333 16V12.8H16.6666V9.6H20V6.4H16.6666V3.2H13.3333V0H6.66663V16H13.3333Z' fill='%23903C7D'/%3E%3Cpath d='M3.33333 0H0V16H3.33333V0Z' fill='%23903C7D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-right: .45rem;
}



        .image-toggle-btn.active {
            background-color: #F06292;
            color: white;
            border-color: #F06292;
        }
        
/* スキル動画 (省略) */
.skill-video-thumb {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}
.movie_s {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    transition: all 0.3s ease;

}
.movie_s:hover {
    transform: translate(-50%, -50%) scale(1.2)
}

/* 共通モーダル (省略) */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .85);
    backdrop-filter:blur(5px);
    z-index: 1001;
}
.modal-content {
    max-width: 80vw;
    max-height: 90vh
}

.modal-content img{
    width: 34vw;
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 70
}
.modal-close:hover {
    transform: scale(1.2)
}
/* 職業遷移図スタイル (省略) */
.job-tree-node {
    text-align: center;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 9999px;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    font-size: .75rem;
    max-width: 8.5rem;
}
.job-tree-arrow {
    color: #F06292;
    font-size: 0.8rem
}
.job-tree-pc-layout {
    display: none;
    transform: scale(0.85);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
    position: relative
}
.job-tree-pc-base,
.job-tree-pc-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative
}
.job-tree-pc-tier-header {
    font-weight: 700;
    color: #555;
    font-size: 0.9rem;
    margin-bottom: -8px
}

.job-tree-pc-base:not(.has-branch) {
    margin-top: 2rem;
}

.job-tree-pc-tier:not(:last-child)::after,
.job-tree-pc-base::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
right: -13px;
    transform: translateY(-50%);
    color: #F06292;
    font-size: 1rem
}

.job-tree-pc-tier:not(:last-child)::before,
.job-tree-pc-base::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
right: -13px;
    transform: translateY(-50%);
    color: #F06292;
    font-size: 1rem
}

/* サブ職（base が無い場合）の非表示ルール */
.job-tree-pc-tier.job-tree-pc-base-sub:not(.has-branch)::before,
.job-tree-pc-tier.job-tree-pc-base-sub:not(.has-branch)
  ~ .job-tree-pc-tier:not(:last-child)::before {
    content: none;
}


.job-tree-pc-base:not(.has-branch)::before,
.job-tree-pc-base:not(.has-branch) ~ .job-tree-pc-tier:not(:last-child)::before {
    content: none;
}

/* アフターだけ中央に出す（位置はお好みで） */
.job-tree-pc-base:not(.has-branch)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -13px;
    top: 50%;              /* 真ん中に変更 */
    transform: translateY(-50%);
    color: #F06292;
    font-size: 1rem;
}

/* tier（従来通り） */
.job-tree-pc-tier:not(:last-child)::after {
    top: 39%;
}

/* base（分岐あり） */
.job-tree-pc-base.has-branch::after {
    top: 39%;
}

.job-tree-pc-base:not(.has-branch) ~ .job-tree-pc-tier:not(:last-child)::after {
    top: 73%; 
}

/* サブツリー用：疑似ベースが分岐なしのとき、後続 tier の矢印位置を下げる */
.job-tree-pc-tier.job-tree-pc-base-sub:not(.has-branch)
  ~ .job-tree-pc-tier:not(:last-child)::after {
    top: 73%;
}

/* 疑似ベース（base がないときの 1段目）の after を中央に */
.job-tree-pc-tier.job-tree-pc-base-sub:not(.has-branch)::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -13px;
    top: 73%;              /* 真ん中に変更（base 無し版） */
    transform: translateY(-50%);
    color: #F06292;
    font-size: 1rem;
}



.job-tree-pc-tier:not(:last-child)::before,
.job-tree-pc-base::before  {
    top: 85%;
}

.job-tree-pc-base{
    margin-top: 1rem;
}
.job-tree-pc-base .job-tree-node {
    position: relative
}
.job-tree-pc-tier .job-tree-node:first-child:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 50%;
    right: -32px;
    width: 24px;
    height: calc(100% + 16px);
    border-right: 1px solid #F06292
}
.job-tree-sp-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative
}
.job-tree-sp-base {
    position: relative;
    display: flex;
    justify-content: center;
    width: 50%
}
.job-tree-sp-tier {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 53px;
    width: 100%;
    position: relative;
    padding-top: 0;
}
.job-tree-sp-tier-header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 9px;
    font-weight: 700;
    color: #555;
    font-size: 0.9rem;
    /* background-color: #f1f5f9; */
    padding: 0 8px
}
.job-tree-sp-node-wrapper {
    width: 50%;
    display: flex;
    justify-content: center;
    position: relative
}
.job-tree-sp-node-wrapper::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    color: #F06292;
    font-size: 0.8rem
}
.job-tree-sp-layout > .job-tree-sp-tier:last-child .job-tree-sp-node-wrapper::after {
    content: none
}

.weapon-box{
    background-color: #F9FAFD;
    border: 1px solid #903C7D;
    width: 150px;
    color: #903C7D;
    margin: 0;
    
}
.image-toggles{
      display: inline-flex;
  align-items: center;
        gap: 6px;
        padding: 10px 28px;
  background: #fff;

  clip-path: polygon(
    24px 0,              
    calc(100% - 24px) 0, 
    100% 50%,            
    calc(100% - 24px) 100%,
    24px 100%,
    0 50%                
  );
}
    #detail-job-name{
        padding: 1rem;
    }


@media(min-width: 768px) {

    #detail-job-name{
        text-align: center;
    }

.weapon-box{
    width: 200px;
        margin: 0 auto;
}

#page-select-view{
        margin-top: 3rem;
}



    #detail-main-image{
        height: 670px;
    }
    
    .job-tree-sp-node-wrapper::after{
        bottom: -27px;
    }
    .job-tree-sp-layout {
        display: none
    }
    .job-tree-pc-layout {
        display: flex
    }
.job-tree-node{
        text-align: center;
    width: 13vw;
    font-size: .75rem;
}
.job-tree-sp-tier{
        padding-top: 20px;
}
        .job-icon-list li {
            max-width: 80px;
            height: 80px;
        }
        .job-tree-sp-tier-header{
            top: 0;
        }
}
.character-select-card{

        flex-direction: column-reverse;
}
        @media (min-width: 768px) {
.character-select-card{
                flex-direction: column;
}
        }

/* --- SP版 詳細画面 戻るボタン --- */
#sp-back-to-select-btn {
    display: none; /* ★ 修正: デフォルトは非表示 */
    position: absolute;
    left: 1rem; 
    top: 44%;
    transform: translateY(-50%);
    font-size: 1.25rem; 
    color: #F06292; 
    padding: 0.5rem; 
    cursor: pointer;
    z-index: 10;
}

@media (max-width: 767px) { 
    .select-weapon-icon{
        width: 1.5rem !important;
    height: 1.5rem !important;
    /* offset-position: 0; */
    transform: translateX(0) !important;
    }
    #select-sub-char{
        position: relative;
    }
    .select-sub-char-txt{
        position: absolute;
        z-index: 100;
    }
    main{
        padding: 1rem 0 !important;
    }

    #page-select-view {
        gap: 0;
    position: relative;
  }
  .modal-content img{
    width: 90vw;
  }
  /* #page-select-view::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.9), transparent);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
  } */

  /* 2) 各カードは「50vwの箱」+ はみ出しは隠す → 真ん中で切れる */
  #select-main-char,
  #select-sub-char {
    
    width: 50vw !important;   /* 箱の幅を画面の半分に固定 */
    overflow: hidden;          /* ここでハードカット */
    position: relative;
    z-index: 1;
  }

  /* 3) 画像は箱より大きくしてスライド。調整用CSS変数も用意 */
  :root {
        --img-scale-vw: 213vw;
        --main-shift: -24vw;
        --sub-shift: -26vw;
  }

  #select-main-char img,
  #select-sub-char  img {
    max-width: none;      /* Tailwindの max-w-full を無効化 */
    width: var(--img-scale-vw);
    object-fit: contain;
    display: block;
  }


/* デフォルト（共通） */
#select-main-char img {
  transform: translateX(var(--main-shift, 0));
}

#select-sub-char img {
  transform: translateX(var(--sub-shift, 0));
}

/* 例：デストロイヤーの時はちょい左寄せ */
#page-select-view.job-main-destroyer #select-main-char img {
  transform: translateX(-24vw);
}


/* フェイタルブレイド（FatalBlade） */
#page-select-view.job-sub-FatalBlade #select-sub-char img { transform: translateX(0); }

/* ホーリーセイバー（holysaber） */
#page-select-view.job-main-holysaber #select-main-char img { 
            transform: translateX(-4vw);
        object-position: 0; }

/* セフィロト（sephiroth） */
#page-select-view.job-sub-sephiroth #select-sub-char img { 
    transform: translateX(10vw); }

/* アークメイジ（archmage） */
#page-select-view.job-main-archmage #select-main-char img { 
    transform: translateX(14vw);
        object-position: top 30% left 0; }

/* グランシンフォニア（grandsymphonia） */
#page-select-view.job-sub-grandsymphonia #select-sub-char img { 
            transform: translateX(1vw);
        object-position: top 30% left 0;
         }

/* ウィンドストーカー（WindStalker） */
#page-select-view.job-main-WindStalker #select-main-char img { transform: translateX(0); }

/* フライシュッツ */
#page-select-view.job-sub-freeshooter #select-sub-char img { 
            transform: translateX(-28vw);
            object-position: top 30% left 0;
 }

/* マニピュレーター（manipulator） */
#page-select-view.job-main-manipulator #select-main-char img { transform: translateX(0); }

/* ソウルテイカー（soultaker） */
#page-select-view.job-main-soultaker #select-main-char img { transform: translateX(0); }

/* アークマスター（arcmaster） */
#page-select-view.job-main-arcmaster #select-main-char img { transform: translateX(-8vw); }

/* フォースマスター（forcemaster） */
#page-select-view.job-sub-forcemaster #select-sub-char img { 
    transform: translateX(8vw);
        object-position: top 37% left 0; }

/* ブラックソード（blacksword） */
#page-select-view.job-main-blacksword #select-main-char img { transform: translateX(0); }

/* デミゴッド（demigod） */
#page-select-view.job-main-demigod #select-main-char img { transform: translateX(0); }

/* アグニ（agni） */
#page-select-view.job-main-agni #select-main-char img { transform: translateX(0); }

/* ダークチェイサー（darkchaser） */
#page-select-view.job-main-darkchaser #select-main-char img { transform: translateX(0); }

/* シャドウウォーカー（shadowwalker） */
#page-select-view.job-main-shadowwalker #select-main-char img { transform: translateX(0); }

/* ゲートキーパー（gatekeeper） */
#page-select-view.job-main-gatekeeper #select-main-char img { transform: translateX(0); }

/* スターセイバー（starseiver） */
#page-select-view.job-main-starseiver #select-main-char img { transform: translateX(0); }

/* ハイランダー（highlander） */
#page-select-view.job-sub-highlander #select-sub-char img { transform: translateX(0); }

/* ソードダンサー（sworddancer） */
#page-select-view.job-sub-sworddancer #select-sub-char img { transform: translateX(0); }

/* ダークナイト（darkknight） */
#page-select-view.job-sub-darkknight #select-sub-char img { transform: translateX(0); }

/* サイキッカー（psychicker） */
#page-select-view.job-sub-psychicker #select-sub-char img { transform: translateX(0); }

/* ファントムメイジ（phantommage） */
#page-select-view.job-sub-phantommage #select-sub-char img { transform: translateX(0); }

/* マエストロ（maestro） */
#page-select-view.job-sub-maestro #select-sub-char img { transform: translateX(0); }

/* ローグマスター（roguemaster） */
#page-select-view.job-sub-roguemaster #select-sub-char img { transform: translateX(0); }

/* ジャッジメント（judgement） */
#page-select-view.job-sub-judgement #select-sub-char img { transform: translateX(0); }

/* スターシーカー（starseeker） */
#page-select-view.job-sub-starseeker #select-sub-char img { transform: translateX(0); }

/* ジュエルスター（jewelstar） */
#page-select-view.job-sub-jewelstar #select-sub-char img { transform: translateX(0); }

/* ウィンディア（windia） */
#page-select-view.job-sub-windia #select-sub-char img { transform: translateX(0); }

/* レイニア（rainia） */
#page-select-view.job-sub-rainia #select-sub-char img { transform: translateX(0); }

/* ホロウルーラー（hollowruler） */
#page-select-view.job-main-hollowruler #select-main-char img { transform: translateX(0); }


  /* 左側：少し左へ振って見せ場を中央寄りに */
  #select-main-char img {
    transform: translateX(var(--main-shift));
  }

  /* 右側：逆側に少し右へ振る（左右対称感を出す） */
  #select-sub-char img {
    transform: translateX(var(--sub-shift));
  }

  /* 4) はみ出しがどこかで切れないよう、上位は可視化（安全策） */
  #character-page,
  #content-area {
    overflow: visible;
  }

  /* 選択画面：画像を画面幅より大きく、中央寄せ分離っぽく */
  #select-main-char img,
  #select-sub-char img {
    max-width: none;     /* Tailwindの max-w-full を無効化 */   /* 画面より大きく */
    height: 62vh;
    object-fit: cover;
            object-position: top 18% left 0;
    /* 内側を少しフェード→分離感UP（対応ブラウザでは綺麗） */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
#select-sub-char::before{
        content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, #EEEFF2, transparent,transparent,transparent);
    z-index: 1;
}
#select-main-char::before{
            content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, #EEEFF2, transparent,transparent,transparent);
    z-index: 1;
}

  /* SPでも中央の仕切り線を出す（PCでは既にafterで実装） */
  #page-select-view::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.85), transparent);
    transform: translateX(-50%);
    opacity: .7;
    pointer-events: none;
  }

  /* ===== 詳細画面：メイン画像も大きく ===== */
  /* 左カラム（画像側）のコンテナでも切れないように */
  #page-detail-view .flex > div:first-child {
    overflow: visible;
  }
  /* 画像を拡大して画面中央へ */
  #detail-main-image {
    position: relative;
    left: 60%;
    transform: translateX(-50%);
    max-width: none;  /* Tailwindの max-w-full を無効化 */
    width: 120vw;     
    height: auto;
    object-fit: contain;
    /* 端フェード（任意）：縁が背景になじむ */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
    /* ★ 修正: 詳細画面(page-detail)でのみブロック表示 */
    body.page-detail #sp-back-to-select-btn {
        display: block; 
    }
    /* ★ 修正: 選択画面(page-select)では明示的に非表示 */
    body.page-select #sp-back-to-select-btn {
        display: none;
    }
}