/*グローバル変数の宣言*/
/*使い方：var(変数名)で指定する*/
:root {
    /*テーブルの罫線デフォルト色*/
    --table_border-color: #888888;
    --table_separator-color: #444444;
    --table_frame-color: #222222;
    /*スタイルの色*/
    --style_color_sp_front: #22CCEE;
    --style_color_sp_back: #BBEEFF;
    --style_color_sp_rader: #00BBFF;
    --style_color_dp_front: #EEBB44;
    --style_color_dp_back: #FFEEBB;
    --style_color_dp_rader: #FF0088;
    /*難易度の色*/
    --dif_color_beg_front: #22CCEE;
    --dif_color_beg_back: #BBEEFF;
    --dif_color_bas_front: #EEBB44;
    --dif_color_bas_back: #FFEEBB;
    --dif_color_dif_front: #EE4444;
    --dif_color_dif_back: #FFBBBB;
    --dif_color_exp_front: #66DD44;
    --dif_color_exp_back: #DDFFBB;
    --dif_color_cha_front: #9933DD;
    --dif_color_cha_back: #DDBBFF;
    /*判定の色*/
    --hit_color_marvelous_front: #FFFFEE;
    --hit_color_marvelous_back: #FFFFFF;
    --hit_color_perfect_front: #FFFFAA;
    --hit_color_perfect_back: #FFFFDD;
    --hit_color_great_front: #99EE66;
    --hit_color_great_back: #DDFFCC;
    --hit_color_good_front: #77AAEE;
    --hit_color_good_back: #CCDDFF;
    --hit_color_miss_front: #EE9999;
    --hit_color_miss_back: #FFDDDD;
    --hit_color_life4_front: #EE9999;
    --hit_color_life4_back: #FFDDDD;
    --hit_color_assist_front: #EE77AA;
    --hit_color_assist_back: #FFCCDD;
    --hit_color_faild_front: #999999;
    --hit_color_faild_back: #AAAAAA;
    /*ハイスピ設定の色*/
    --hs_color_just_back: #FFFFBB;
    --hs_color_high_back: #FFBBBB;
    --hs_color_low_back: #BBBBFF;
    --hs_color_high_low_back: linear-gradient(90deg, #BBBBFF, #FFBBBB);
    --hs_color_just_low_back: linear-gradient(90deg, #BBBBFF, #FFFFBB);
    --hs_color_just_high_back: linear-gradient(90deg, #FFFFBB, #FFBBBB);
    --hs_color_just_high_low_back: linear-gradient(90deg, #BBBBFF, #FFFFBB, #FFBBBB);
    /*フレアスキル*/
    --fs_color_none_1: hsl(0, 0%, 100%);
    --fs_color_none_2: hsl(0, 0%, 92.5%);
    --fs_color_none_3: hsl(0, 0%, 85%);
    --fs_color_none_4: hsl(0, 0%, 77.5%);
    --fs_color_none_g_v: linear-gradient(180deg, var(--fs_color_none_1), var(--fs_color_none_2), var(--fs_color_none_3), var(--fs_color_none_4));
    --fs_color_mercury_1: hsl(210, 80%, 90%);
    --fs_color_mercury_2: hsl(210, 80%, 80%);
    --fs_color_mercury_3: hsl(210, 80%, 72.5%);
    --fs_color_mercury_4: hsl(210, 80%, 65%);
    --fs_color_mercury_g_v: linear-gradient(180deg, var(--fs_color_mercury_1), var(--fs_color_mercury_2), var(--fs_color_mercury_3), var(--fs_color_mercury_4));
    --fs_color_venus_1: hsl(50, 80%, 90%);
    --fs_color_venus_2: hsl(50, 80%, 75%);
    --fs_color_venus_3: hsl(50, 80%, 60%);
    --fs_color_venus_4: hsl(50, 80%, 45%);
    --fs_color_venus_g_v: linear-gradient(180deg, var(--fs_color_venus_1), var(--fs_color_venus_2), var(--fs_color_venus_3), var(--fs_color_venus_4));
    --fs_color_earth_1: hsl(120, 80%, 90%);
    --fs_color_earth_2: hsl(120, 80%, 75%);
    --fs_color_earth_3: hsl(120, 80%, 60%);
    --fs_color_earth_4: hsl(120, 80%, 45%);
    --fs_color_earth_g_v: linear-gradient(180deg, var(--fs_color_earth_1), var(--fs_color_earth_2), var(--fs_color_earth_3), var(--fs_color_earth_4));
    --fs_color_mars_1: hsl(5, 80%, 90%);
    --fs_color_mars_2: hsl(5, 80%, 82.5%);
    --fs_color_mars_3: hsl(5, 80%, 75%);
    --fs_color_mars_4: hsl(5, 80%, 67.5%);
    --fs_color_mars_g_v: linear-gradient(180deg, var(--fs_color_mars_1), var(--fs_color_mars_2), var(--fs_color_mars_3), var(--fs_color_mars_4));
    --fs_color_jupiter_1: hsl(35, 80%, 90%);
    --fs_color_jupiter_2: hsl(35, 80%, 80%);
    --fs_color_jupiter_3: hsl(35, 80%, 65%);
    --fs_color_jupiter_4: hsl(35, 80%, 52.5%);
    --fs_color_jupiter_g_v: linear-gradient(180deg, var(--fs_color_jupiter_1), var(--fs_color_jupiter_2), var(--fs_color_jupiter_3), var(--fs_color_jupiter_4));
    --fs_color_saturn_1: hsl(330, 80%, 90%);
    --fs_color_saturn_2: hsl(330, 80%, 80%);
    --fs_color_saturn_3: hsl(330, 80%, 72.5%);
    --fs_color_saturn_4: hsl(330, 80%, 65%);
    --fs_color_saturn_g_v: linear-gradient(180deg, var(--fs_color_saturn_1), var(--fs_color_saturn_2), var(--fs_color_saturn_3), var(--fs_color_saturn_4));
    --fs_color_uranus_1: hsl(180, 80%, 90%);
    --fs_color_uranus_2: hsl(180, 80%, 75%);
    --fs_color_uranus_3: hsl(180, 80%, 50%);
    --fs_color_uranus_4: hsl(180, 80%, 42.5%);
    --fs_color_uranus_g_v: linear-gradient(180deg, var(--fs_color_uranus_1), var(--fs_color_uranus_2), var(--fs_color_uranus_3), var(--fs_color_uranus_4));
    --fs_color_neptune_1: hsl(240, 80%, 92.5%);
    --fs_color_neptune_2: hsl(240, 80%, 87.5%);
    --fs_color_neptune_3: hsl(240, 80%, 80%);
    --fs_color_neptune_4: hsl(240, 80%, 75%);
    --fs_color_neptune_g_v: linear-gradient(180deg, var(--fs_color_neptune_1), var(--fs_color_neptune_2), var(--fs_color_neptune_3), var(--fs_color_neptune_4));
    --fs_color_sun_1: hsl(20, 80%, 90%);
    --fs_color_sun_2: hsl(20, 80%, 80%);
    --fs_color_sun_3: hsl(20, 80%, 72.5%);
    --fs_color_sun_4: hsl(20, 80%, 65%);
    --fs_color_sun_g_v: linear-gradient(180deg, var(--fs_color_sun_1), var(--fs_color_sun_2), var(--fs_color_sun_3), var(--fs_color_sun_4));
    --fs_color_world: linear-gradient(90deg, hsl(0, 80%, 85%), hsl(60, 80%, 70%), hsl(120, 80%, 70%), hsl(180, 80%, 80%), hsl(240, 80%, 90%), hsl(300, 80%, 80%), hsl(360, 80%, 85%));
    --fs_color_world_v: linear-gradient(180deg, hsl(0, 80%, 85%), hsl(60, 80%, 70%), hsl(120, 80%, 70%), hsl(180, 80%, 80%), hsl(240, 80%, 90%), hsl(300, 80%, 80%), hsl(360, 80%, 85%));
}

html {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.menu_frame {
    max-width: 1016px;
}

.menu_title {
    font-size: 16pt;
    font-family: "HGS創英角ﾎﾟｯﾌﾟ体";
    margin-top: 8px;
    margin-bottom: 8px;
}

.menu_sub_title {
    font-size: 14pt;
    font-family: "HGS創英角ﾎﾟｯﾌﾟ体";
    margin-top: 8px;
    margin-bottom: 8px;
}

/*テーブルの外側*/
.table_frame {
    width: fit-content;
    border: solid 3px var(--table_frame-color);
    background: var(--table_border-color);
    padding-right: 1px;
    padding-bottom: 1px;
}

.table_frame table {
    border-collapse: collapse;
    /* セルとセルの間の有無 */
    text-align: center;
    /* テーブル内の文字寄せ位置 */
    background: var(--table_frame-color);
    /* 背景色 */
    margin: 0px;
    padding: 0px;
    overflow: auto;
}

.table_frame th,
.table_frame td {
    border-top: solid 1px var(--table_border-color);
    border-left: solid 1px var(--table_border-color);
    padding: 2px;
    /* セル内部の余白 */
    overflow: auto;
    color: #000000;
}

.table_frame th {
    background-color: #CCCCCC;
    /* 背景の色 */
    white-space: nowrap;
}

.table_frame td {
    background-color: #EEEEEE;
    /* 背景の色 */
}

.table_row_n td {
    color: #444444;
    background-color: #DDDDDD;
}

.table_row_gp td {
    background-color: #EEDDEE;
}

/*table_frameが設定されたテーブルで使いやすい区切り線（水平線）*/
.separator_tr th,
.separator_tr td {
    height: 1px;
    background: var(--table_separator-color);
    border-left: none;
    padding: 0;
}

/*table_frameが設定されたテーブルで使いやすい区切り線（水平線）*/
.separator {
    width: 100%;
    height: 1px;
    background: var(--table_separator-color);
    position: relative;
    border-top: solid 1px var(--table_border-color);
}

.separator::after {
    content: "";
    position: absolute;
    height: 1px;
    width: 1px;
    background: var(--table_separator-color);
    right: -1px;
}

input {
    width: 5em;
}

input[type="radio"],
input[type="checkbox"] {
    width: 1em;
}

.link_text {
    text-decoration: underline;
    cursor: pointer;
}

.dif_color_beg {
    background: var(--dif_color_beg_front);
}

.dif_color_beg_2 {
    background: var(--dif_color_beg_back);
}

.dif_color_bas {
    background: var(--dif_color_bas_front);
}

.dif_color_bas_2 {
    background: var(--dif_color_bas_back);
}

.dif_color_dif {
    background: var(--dif_color_dif_front);
}

.dif_color_dif_2 {
    background: var(--dif_color_dif_back);
}

.dif_color_exp {
    background: var(--dif_color_exp_front);
}

.dif_color_exp_2 {
    background: var(--dif_color_exp_back);
}

.dif_color_cha {
    background: var(--dif_color_cha_front);
}

.dif_color_cha_2 {
    background: var(--dif_color_cha_back);
}

.style_color_sp {
    background: var(--style_color_sp_front);
}

.style_color_dp {
    background: var(--style_color_dp_front);
}

.hit_color_marvelous {
    background: var(--hit_color_marvelous_front);
}

.hit_color_marvelous_2 {
    background: var(--hit_color_marvelous_back);
}

.hit_color_perfect {
    background: var(--hit_color_perfect_front);
}

.hit_color_perfect_2 {
    background: var(--hit_color_perfect_back);
}

.hit_color_great {
    background: var(--hit_color_great_front);
}

.hit_color_great_2 {
    background: var(--hit_color_great_back);
}

.hit_color_good {
    background: var(--hit_color_good_front);
}

.hit_color_good_2 {
    background: var(--hit_color_good_back);
}

.hit_color_miss {
    background: var(--hit_color_miss_front);
}

.hit_color_miss_2 {
    background: var(--hit_color_miss_back);
}

.hs_color_just {
    background: var(--hs_color_just_back);
}

.hs_color_high {
    background: var(--hs_color_high_back);
}

.hs_color_low {
    background: var(--hs_color_low_back);
}

.hs_color_high_low {
    background: var(--hs_color_high_low_back);
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.select_button {
    border-radius: 3px;
    border: solid 3px;
    margin: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #CCCCCC;
    border-color: #FFFFFF #AAAAAA #AAAAAA #FFFFFF;
    text-decoration: none;
    color: #000000;
}

/*
.select_button:nth-child(1) {
    z-index: 1;
}
*/

.select_button::after {
    content: "";
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-radius: 3px;
    display: block;
    border: solid 1px #000000;
    position: absolute;
    top: -3px;
    left: -3px;
}

@media (hover: hover) {
    .select_button:hover::after {
        border-color: #0000FF;
    }
}

.select_button:active,
.select_button_toggle {
    background: #AAAAAA;
    border-color: #888888 #FFFFFF #FFFFFF #888888;
}

.select_button_disable {
    pointer-events: none;
    color: #888888;
}

.where_frame {
    padding: 4px;
    margin: 4px;
    border: solid 1px #888888;
    border-radius: 4px;
    display: inline-block;
}

.link_button {
    width: 240px;
    height: 60px;
    background: #444444;
    border-color: #888888 #222222 #222222 #888888;
    color: #ffffff;
}

@media (hover: hover) {
    .link_button:hover::after {
        border-color: #FFFF00;
    }
}

.link_button:active {
    background: #666666;
    border-color: #444444 #888888 #888888 #444444;
}

.circle_button {
    border-radius: 50%;
    border: solid 1px #000000;
    margin: 4px;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #CCCCCC;
    text-decoration: none;
    color: #000000;
}

@media (hover: hover) {
    .circle_button:hover {
        border-color: #0000FF;
    }
}

.circle_button:active {
    background: #AAAAAA;
}

.page_move_button {
    width: 40px;
    height: 40px;
    line-height: 1em;
}

#loading_div {
    display: none;
    position: fixed;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    margin: auto;
    padding: 16px;
    border-radius: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 440;
}

#loading_div::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: solid 8pt #FFFFFF;
    border-top-color: transparent;
    animation-name: loading_div_animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

@keyframes loading_div_animation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 縦書きにしたい文字を<span>等で囲み、その<span>等へこれを指定する */
.tategaki {
    writing-mode: vertical-lr;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
}

.view_changer_wrapper {
    border: solid 1px black;
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
    width: fit-content;
    position: sticky;
    top: 0;
    left: 0;
}

.view_changer_div {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.view_changer_div>div {
    background: #FFFFFF;
}

.view_changer_div>div>div {
    margin: 2px;
    display: flex;
    flex-wrap: wrap;
}

.view_changer_div label {
    margin: 2px;
}

.view_changer_button {
    width: 40px;
    height: 40px;
}

#footer {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.75);
    border-top: solid 1px #000000;
    z-index: 1;
    bottom: 0px;
}

.list_selector {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 360;
    top: 0px;
    left: 0px;
}

.list_selector>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px;
    margin: 4px;
}

.list_selector>div>div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.info_head {
    font-size: 14pt;
    font-weight: bold;
    white-space: nowrap;
}

.info_text {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
}

.reload_icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: solid 8px #000;
    border-top-color: #CCC;
    border-radius: 50%;
    position: relative;
    transform: rotate(-10deg);
}

.reload_icon:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    clip-path: polygon(50% 25%, 100% 100%, 0 100%);
    transform: rotate(60deg);
    top: -14px;
    left: -2px;
    position: absolute;
}