:root {
    --default-max-width: 758;
    --default-max-height: 598;
    --default-color: #31395A;
    color-scheme: dark;
}
body {
    margin: 0;
    background-color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ガチャ詳細パネル */
.panel {
    width: 100vw;
    background-color: #000000;
}

/* 表示内容切り替えタブエリア（タブのボタンと表示内容全部） */
.tab_area {
    padding-top: calc(10 / var(--default-max-height) * 100vh);  /* タブボタンの上の余白 */
}

.tab_content {
    width: 100vw;
    height: calc(525 / var(--default-max-height) * 100vh);
    border-image: url(/img/gacha/PopupFrame_Tab.png) 40% fill / auto / 0 stretch;
}

/* タブのボタン表示 */
.tab_menu {
    width: calc(720 / var(--default-max-width) * 100vw);        /* タブボタン表示エリアの幅（ボタンを中央に寄せるためmargin指定のために必要） */
    height: calc(62 / var(--default-max-height) * 100vh);
    font-size: calc(14 / var(--default-max-height) * 100vh);    /* フォントサイズ */
    display: flex;                                              /* 横に並べるのでflex指定にする */
    list-style: none;
    padding: 0;
    margin: 0 auto;                                             /* autoで全タブを中央に寄せる */
    text-align: center;                                         /* タブの見出し文字位置（画像表示のはずなのでなくても良いが念の為） */
}

/* 各タブボタンの設定 */
.tab_menu li {
    width:calc(240 / var(--default-max-width) * 100vw);             /* タブボタン配置幅（タブ画像２つ分）*/
    line-height: calc(62 / var(--default-max-height) * 100vh);      /* テキスト上下位置 */
    font-family: "Noto Sans JP";
    font-weight: bold;
    color: #3480a0;
    cursor: pointer;
    border-image: url(/img/gacha/Tab.png) 25% fill / auto / 0 stretch;
}

/* タブボタンのアクティブになった時の設定 */
.tab_menu li.active {
    color: white;                   /* 文字色指定 */
    border-image: url(/img/gacha/Tab_Active.png) 25% fill / auto / 0 stretch;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* タブボタンのテキストの共通クラス */
.tab_text {
    position: absolute;
    width: calc(88 / var(--default-max-width) * 100vw);
    height: calc(22 / var(--default-max-height) * 100vh);
    top: calc(30 / var(--default-max-height) * 100vh);
    background-repeat: no-repeat;
    background-size: contain;
}

/* タブボタンのテキスト（ガチャ内容（非アクティブ）） */
.tab_text_detail {
    left: calc(95 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Tab/Text_Gacha01.png');
}

/* タブボタンのテキスト（ガチャ内容（アクティブ）） */
.tab_text_detail.active {
    background-image: url('/img/gacha/Tab/Text_Gacha02.png');
}

/* タブボタンのテキスト（注意事項（非アクティブ）） */
.tab_text_caution {
    left: calc(335 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Tab/Text_Caution01.png');
}

/* タブボタンのテキスト（注意事項（アクティブ）） */
.tab_text_caution.active {
    background-image: url('/img/gacha/Tab/Text_Caution02.png');
}

/* タブボタンのテキスト（提供割合（非アクティブ）） */
.tab_text_rate {
    left: calc(575 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Tab/Text_GachaRate01.png');
}

/* タブボタンのテキスト（提供割合（アクティブ）） */
.tab_text_rate.active {
    background-image: url('/img/gacha/Tab/Text_GachaRate02.png');
}

/* タブボタンのテキスト（提供割合（タブ一つだけ表示・非アクティブ）） */
.tab_text_rate_solo {
    left: calc(95 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Tab/Text_GachaRate01.png');
}

/* タブボタンのテキスト（提供割合（タブ一つだけ表示・アクティブ）） */
.tab_text_rate_solo.active {
    background-image: url('/img/gacha/Tab/Text_GachaRate02.png');
}

/* タブボタンのテキスト（ラインナップ（非アクティブ）） */
.tab_text_lineup {
    left: calc(89 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Tab/Text_Lineup01.png');
}

/* タブボタンのテキスト（ラインナップ（アクティブ）） */
.tab_text_lineup.active {
    background-image: url('/img/gacha/Tab/Text_Lineup02.png');
}

.tab_menu li.active .tab_point {
    /* 縦横比1:1にする必要があるのでvwでサイズを合わせる */
    width: 2vw;
    height: 2vw;
    margin-bottom: -.3vw;
    background-image: url(/img/gacha/Tab_ActivePoint.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* 注意事項 */
.tab_content_caution {
    width: calc(728 / var(--default-max-width) * 100vw);
    color: #FFFFFF;
    margin: 0 calc(3 / var(--default-max-width) * 100vw);
    padding: calc(12 / var(--default-max-height) * 100vh) 0 0 calc(22 / var(--default-max-width) * 100vw);
    text-align: left;
    line-height: calc(30 / var(--default-max-height) * 100vh);
}

/* 注意事項テキスト */
.caution {
    height: calc(505 / var(--default-max-height) * 100vh);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    padding: 0 0 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #CED4DE #000000;
}

/* ガチャ提供割合 */
.tab_content_rate {
    margin: 0 calc(3 / var(--default-max-width) * 100vw);
}

/* 表示内容切り替えタブエリア */
.tab_rate_menu {
    width: calc(524 / var(--default-max-width) * 100vw);                                                    /* タブボタン表示エリアの幅（ボタンを中央に寄せるためmargin指定のために必要） */
    height: calc(42 / var(--default-max-height) * 100vh);
    display: flex;
    list-style: none;
    padding: calc(15 / var(--default-max-height) * 100vh) 0 calc(5 / var(--default-max-height) * 100vh) 0;  /* タブボタンの余白 */
    margin: 0 auto;                                                                                         /* autoで全タブを中央に寄せる */
    text-align: center;                                                                                     /* タブの見出し文字位置 */
}

.tab_rate_menu_l {
    width:calc(262 / var(--default-max-width) * 100vw);                     /* タブボタン配置幅（タブ画像２つ分）*/
    cursor: pointer;
    line-height: calc(42 / var(--default-max-height) * 100vh);              /* テキスト上下位置 */
    color: #756ba4;
    font-size: calc(16 / var(--default-max-height) * 100vh);
    font-weight: bold;
    background-image: url('/img/gacha/Tab/SubTab_L.png');
    background-size: cover;
}

.tab_rate_menu_l.active {
    color: white;                   /* 文字色指定 */
    background-image: url('/img/gacha/Tab/SubTab_L_Active.png');
}

.tab_rate_menu_r {
    width:calc(262 / var(--default-max-width) * 100vw);                    /* タブボタン配置幅（タブ画像２つ分）*/
    cursor: pointer;
    line-height: calc(42 / var(--default-max-height) * 100vh);             /* テキスト上下位置 */
    color: #756ba4;
    font-size: calc(16 / var(--default-max-height) * 100vh);
    font-weight: bold;
    background-image: url('/img/gacha/Tab/SubTab_R.png');
    background-size: cover;
}

.tab_rate_menu_r.active {
    color: white;                   /* 文字色指定 */
    background-image: url('/img/gacha/Tab/SubTab_R_Active.png');
}


/* タブ表示で1~9回目の提供確率情報するエリア */
.tab_content_rate_default {
    padding-top: calc(4 / var(--default-max-height) * 100vh);               /* スクロールエリアの上部が枠線と被るので下にずらす */
}

/* タブ表示で10回目の提供確率情報するエリア */
.tab_content_rate_10 {
    padding-top: calc(4 / var(--default-max-height) * 100vh);               /* スクロールエリアの上部が枠線と被るので下にずらす */
}

/* レアリティ別割合説明エリア */
.rarity_info_area {
    width: calc(708 / var(--default-max-width) * 100vw);
    height: calc(164 / var(--default-max-height) * 100vh);
    margin: 0 calc(22 / var(--default-max-width) * 100vw) calc(20 / var(--default-max-height) * 100vh) calc(22 / var(--default-max-width) * 100vw);
    font-size: calc(20 / var(--default-max-height) * 100vh);    /* フォントサイズ */
    color: #FFFFFF;                                             /* テキストの色 */
    text-align: center;
    background-color: #151316;
    line-height: calc(36 / var(--default-max-height) * 100vh);
}

/* レアリティ別割合表示エリア */
.rarity_rate_area {
    padding: calc(12 / var(--default-max-height) * 100vh) calc(12 / var(--default-max-width) * 100vw);
    display: flex;                      /* 横に並べるのでflex指定にする */
}

/* レアリティ別割合 */
.rarity_rate {
    width: calc(222 / var(--default-max-width) * 100vw);
    height: calc(58 / var(--default-max-height) * 100vh);
    background-color: var(--default-color);
    font-size: calc(20 / var(--default-max-height) * 100vh);    /* フォントサイズ */
    color: #FFFFFF;                                             /* テキストの色 */
/*    line-height: 58px;                  /* テキスト上下位置 */
    position:relative;                                          /* レアリティ画像配置位置指定のために必要 */
}

.rarity_rate.flex {
    display: flex;
    align-items: center;
    padding: 0 calc(10 / var(--default-max-width) * 100vw) 0 calc(10 / var(--default-max-width) * 100vw);   /* テキスト表示開始位置 */
}

.rarity_rate.flex img {
    width: 30%;
}

/* レアリティ別割合の間の余白 */
.rarity_rate_margin {
    margin-left: calc(9 / var(--default-max-width) * 100vw);
}

/* タブあり排出内容表示エリア */
.tab_content_rate_data {
    width: calc(750 / var(--default-max-width) * 100vw);                   /* スクロールバーが枠線の右と被るので少し小さくして被らないようにする */
    height: calc(450 / var(--default-max-height) * 100vh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #CED4DE #000000;
}

/* タブなし排出内容表示エリア */
.tab_content_rate_data_notab {
    width: calc(750 / var(--default-max-width) * 100vw);                   /* スクロールバーが枠線の右と被るので少し小さくして被らないようにする */
    height: calc(512 / var(--default-max-height) * 100vh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #CED4DE #000000;
}

/* チュートリアルガチャのタブあり排出内容表示エリア */
.tab_content_rate_data_tutorial {
    width: calc(750 / var(--default-max-width) * 100vw);                   /* スクロールバーが枠線の右と被るので少し小さくして被らないようにする */
    height: calc(500 / var(--default-max-height) * 100vh);
    margin-top: calc(10 / var(--default-max-height) * 100vh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #CED4DE #000000;
}

/* キャラクター別割合表示エリア */
.character_rate_list_area {
    width: calc(708 / var(--default-max-width) * 100vw);
    margin: 0 calc(22 / var(--default-max-width) * 100vw);
}

/* キャラクター別割合のレアリティを区切るボーダー */
.character_rate_list_border {
    height: calc(36 / var(--default-max-height) * 100vh);
    position:relative;                  /* レアリティ画像配置位置指定のために必要 */
    margin: calc(15 / var(--default-max-height) * 100vh) 0 calc(15 / var(--default-max-height) * 100vh) 0;
    background-image: url("/img/gacha/Abyss_Pattern_Parts.png");
    background-size: contain;
}

/* キャラクター別割合のレアリティを区切るボーダーに乗せるレアリティ画像 */
.character_rate_list_border img {
    position: absolute;                                     /* 位置を指定できるようにabsoluteにする */
    width: 10%;
    top: calc(15 / var(--default-max-height) * 100vh * -1);
    left: calc(320 / var(--default-max-width) * 100vw);
}

/* １キャラクター分の情報表示エリア */
.character_rate_area {
    width: calc(708 / var(--default-max-width) * 100vw);
    height: calc(62 / var(--default-max-height) * 100vh);
    background-color: #2D2B3A;
    position:relative;
}

/* キャラクター提供割合 */
.character_rate {
    width: calc(106 / var(--default-max-width) * 100vw);
    height: calc(46 / var(--default-max-height) * 100vh);
    top: calc(7 / var(--default-max-height) * 100vh);
    left: calc(11 / var(--default-max-width) * 100vw);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    text-align: center;
    line-height: calc(46 / var(--default-max-height) * 100vh);
    color: #FFFFFF;
    background-color: var(--default-color);
    position: absolute;
}

/* キャラクター二つ名 */
.character_another_name {
    position: absolute;
    top: calc(7 / var(--default-max-height) * 100vh);
    left: calc(137 / var(--default-max-width) * 100vw);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    color: #A8A8DB;
}

/* キャラクター名 */
.character_name {
    position: absolute;
    top: calc(29 / var(--default-max-height) * 100vh);
    left: calc(137 / var(--default-max-width) * 100vw);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    color: #FFFFFF;
}

/* マルチピックアップキャラ */
.multi_pickup_character_name {
    position: absolute;
    top: calc(14 / var(--default-max-height) * 100vh);
    left: calc(137 / var(--default-max-width) * 100vw);
    font-size: calc(24 / var(--default-max-height) * 100vh);
    color: #FFFFFF;
}

/* チュートリアルガチャのキャラクター二つ名 */
.character_another_name_tutorial {
    position: absolute;
    top: calc(7 / var(--default-max-height) * 100vh);
    left: calc(27 / var(--default-max-width) * 100vw);
    font-size: calc(16 / var(--default-max-height) * 100vh);
    color: #A8A8DB;
}

/* チュートリアルガチャのキャラクター名 */
.character_name_tutorial {
    position: absolute;
    top: calc(29 / var(--default-max-height) * 100vh);
    left: calc(27 / var(--default-max-width) * 100vw);
    font-size: calc(18 / var(--default-max-height) * 100vh);
    color: #FFFFFF;
}

/* ピックアップラベル */
.character_pickup {
    position: absolute;
    width: calc(100 / var(--default-max-width) * 100vw);
    height: calc(28 / var(--default-max-height) * 100vh);
    top: calc(11 / var(--default-max-height) * 100vh);
    left: calc(600 / var(--default-max-width) * 100vw);
    background-image: url('/img/gacha/Label_GachaPickUp.png');
    background-repeat: no-repeat;
    background-size: contain;
}

/* キャラクター毎の区切りのライン */
.character_border {
    width: calc(708 / var(--default-max-width) * 100vw);
    height: calc(1 / var(--default-max-height) * 100vh);
    position: absolute;
    border: none;
    border-bottom: calc(1 / var(--default-max-height) * 100vh) solid var(--default-color);   /* ラインのスタイル */
    top: calc(60 / var(--default-max-height) * 100vh);
}

/* ガチャ詳細 */
.tab_content_detail {
    margin: 0 calc(3 / var(--default-max-width) * 100vw);
}

/* ガチャ名 */
.gacha_name {
    width: calc(708 / var(--default-max-width) * 100vw);
    font-size: calc(23 / var(--default-max-height) * 100vh);
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    padding: calc(20 / var(--default-max-height) * 100vh) calc(22 / var(--default-max-width) * 100vw) 0;
}

/* バナー＆開催期間表示エリア */
.info_area {
    width: calc(708 / var(--default-max-width) * 100vw);
    height: calc(102 / var(--default-max-height) * 100vh);
    padding: calc(23 / var(--default-max-height) * 100vh) calc(22 / var(--default-max-width) * 100vw) 0;
}

/* バナー */
.banner {
    width: calc(270 / var(--default-max-width) * 100vw);
    height: calc(102 / var(--default-max-height) * 100vh);
    background-color: #444444;
    display: inline-block;
}

/* 開催期間表示エリア */
.period_area {
    float: right;
    font-size: 0;
    margin-left: calc(8 / var(--default-max-width) * 100vw);
}

/* "開催期間"の見出し */
.period_header {
    width: calc(430 / var(--default-max-width) * 100vw);
    height: calc(32 / var(--default-max-height) * 100vh);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    line-height: calc(32 / var(--default-max-height) * 100vh);
    background-color: var(--default-color);
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
}

/* 開催期間 */
.period {
    width: calc(430 / var(--default-max-width) * 100vw);
    height: calc(70 / var(--default-max-height) * 100vh);
    font-size: calc(20 / var(--default-max-height) * 100vh);
    background-color: #151316;
    color: #FFFFFF;
    text-align: center;
    line-height: calc(36 / var(--default-max-height) * 100vh);
    display: inline-block;
}

/* バナー＆開催期間と詳細の間の境界画像エリア */
.border_area {
    width: calc(708 / var(--default-max-width) * 100vw);
    height: calc(36 / var(--default-max-height) * 100vh);
    margin: calc(14 / var(--default-max-height) * 100vh) calc(22 / var(--default-max-width) * 100vw) 0;
    background-image: url("/img/gacha/Abyss_Pattern_Parts.png");
    background-size: contain;
}

/* 詳細テキスト */
.detail {
    width: calc(724 / var(--default-max-width) * 100vw);
/*    height: 295px;*/
    height: calc(282 / var(--default-max-height) * 100vh);
    margin: calc(9 / var(--default-max-height) * 100vh) 0 0 calc(22 / var(--default-max-width) * 100vw);
    color: #FFFFFF;
    text-align: left;
    font-size: calc(20 / var(--default-max-height) * 100vh);
    line-height: calc(30 / var(--default-max-height) * 100vh);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #CED4DE #000000;
}

/* scrollbar */
@media not (forced-colors: active) {
    @supports selector(::-webkit-scrollbar) {
        ::-webkit-scrollbar {
            width: calc(14 / var(--default-max-width) * 100vw);
            height: 0;
        }
        ::-webkit-scrollbar-track {
            border-image: url(../../../img/information/common/ScrollBar_Base.png) 40% 0 fill / auto / 0 stretch;
        }
        ::-webkit-scrollbar-thumb {
            border-image: url(../../../img/information/common/ScrollBar_Handle.png) 40% 0 fill / auto / 0 stretch;
        }
    }
    @supports not selector(::-webkit-scrollbar) {
        .scroller {
            scrollbar-color: #CED4DE #000000;
        }
    }
}