@charset "utf-8";

/* 色々とデザインが色々と狂ったんだよね色々と。*/
/* きっとその結果、WebKit が壊れたのさ */

@font-face {
    font-family: 'cinecaption';
    src: url('../../../font/cinecaption2.28.ttf');
}

html {
    touch-action: manipulation;
}

body {
    font-family: cinecaption;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url("../img/main_console.png");
    background-size: cover;
    background-blend-mode: lighten;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1 {
    text-align: center;
}

hr {
    margin-top:    20px;
    margin-bottom: 20px;
}

button {
    width:        100px;
    margin-top:    10px;
    margin-bottom: 10px;
    font-family: cinecaption;
}

select {
    width:        100px;
    margin-top:    10px;
    margin-bottom: 10px;
    font-family: cinecaption;
    background: rgba(255, 255, 255, 0.3);
}

table {
    margin-top: 30px;
    margin-left: 5px;
    font-size:  14px;
    border: solid black 1px;
}

td, th {
    font-size: 14px;
    border: solid black 1px;
}

#loop_num {
    width:         60px;
    margin-top:    10px;
    margin-bottom: 10px;
    font-family: cinecaption;
    background: rgba(255, 255, 255, 0.3);
}

#loop_num_plus_btn {
    width: 25px;
    background: rgba(255, 255, 255, 0.3);
}

#loop_num_minus_btn {
    width: 25px;
    background: rgba(255, 255, 255, 0.3);
}

#settings {
    margin-left: 20px;
    float: left;
}

#noteSupport {
    margin-left: 20px;
    float: left;
}

#arrowTypeSelection {
    margin-bottom: 20px;
}

#crewGrid {
    display: grid;
    justify-content: start;
    grid-column-gap: 30px;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: column;
}

#discussionArea {
    position: relative;
    width:  850px;
    height: 850px;
    margin: 0 auto;
    float: left;
}

#discussionCanvas {
    width:  100%;
    height: 100%;
    display: block;
}

#noteArea {
    width:  420px;
    height: 165px;
    resize: none;
    font-family: cinecaption;
}

.crew-frame {
    position: absolute;
    width:  80px;
    height: 80px;
    background-position: center;
    background-size: contain;
    background-color: rgba(255,255,255,0.5);
    background-blend-mode:lighten;
    background-repeat: no-repeat;
    font-size: 14px;
    font-weight: bold;
    border: 3px solid;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
    cursor: pointer;
    text-shadow:
           1px 1px 0px #fff, -1px -1px 0px #fff,
          -1px 1px 0px #fff,  1px -1px 0px #fff,
           1px 0px 0px #fff, -1px  0px 0px #fff,
           0px 1px 0px #fff,  0px -1px 0px #fff;
}

.arrow {
    stroke-width: 2px;
    fill: none;
}

#popup-role {
    position: fixed;
    width:  auto;
    height: auto;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    margin: 0 auto;
    z-index: 1;
    display: none;
    font-size: 28px;
    padding:   10px;
}

#popup-role ul {
    list-style-type: none;
    padding: 0;
}

#popup-role ul li {
    cursor: pointer;
    margin: 5px 0;
}

#popup-role li {
    transition: background-color 0.1s;
}

#popup-role li:hover {
    background-color: #ff0;
    transition: background-color 100ms;
}

#role_rel_flex {
    display: flex;
}

#popup-role-head {
    margin: 0px;
}

#popup-role-h4 {
    margin-top:    20px;
    margin-bottom:  0px;
}

#popup-arrow {
    position: fixed;
    width:  auto;
    height: auto;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    margin: 0 auto;
    z-index: 1;
    display: none;
    font-size: 28px;
    padding:   10px;
}

#popup-arrow ul {
    list-style-type: none;
    padding: 0;
}

#popup-arrow ul li {
    cursor: pointer;
    margin: 5px 0;
}

#popup-arrow li {
    transition: background-color 0.1s;
}

#popup-arrow li:hover {
    background-color: #ff0;
    transition: background-color 100ms;
}

#selectAll       { background: rgba(255, 255, 255, 0.3); }
#deselectAll     { background: rgba(255, 255, 255, 0.3); }
#startDiscussion { background: rgba(255, 255, 255, 0.3); }
#resetButton     { background: rgba(255, 255, 255, 0.3); }
#note_copy       { background: rgba(255, 255, 255, 0.3); }
#note_Tw         { background: rgba( 29, 161, 242, 0.3); }
#note_Tw_Tag     { background: rgba( 29, 161, 242, 0.3); }
#note_Tw_Tag_URL { background: rgba( 29, 161, 242, 0.3); }
#note_next_day   { background: rgba(255, 255, 255, 0.3); }
#note_co_e       { background: rgba( 22, 126, 194, 0.3); }
#note_co_d       { background: rgba(129, 117, 178, 0.3); }
#note_co_w       { background: rgba( 70, 176,  52, 0.3); }
#note_wh         { background: rgba(109, 186,  44, 0.3); }
#note_bl         { background: rgba(229,   0,  56, 0.3); }
#note_cs         { background: rgba(177, 203, 226, 0.3); }
#note_del        { background: rgba(247, 177, 193, 0.3); }
#note_clb        { background: rgba(237, 149,   2, 0.3); }
#note_sh_s       { background: rgba(255, 255, 255, 0.3); }
#note_sh_d       { background: rgba(255, 255, 255, 0.3); }
#note_sh_i       { background: rgba(255, 255, 255, 0.3); }
#note_crew_nn    { background: rgba(255, 255, 255, 0.3); }
#note_crew_lv    { background: rgba(  5, 171,  63, 0.3); }
#note_crew_kk    { background: rgba(165,  11,  51, 0.3); }
#note_crew_st    { background: rgba( 33, 183, 188, 0.3); }
#note_crew_sg    { background: rgba(171, 207,  81, 0.3); }
#note_crew_ot    { background: rgba(242, 181, 207, 0.3); }
#note_crew_gn    { background: rgba(129,  45, 143, 0.3); }
#note_crew_cp    { background: rgba(242, 153,  23, 0.3); }
#note_crew_sm    { background: rgba(  2,   9,  26, 0.3); }
#note_crew_sq    { background: rgba(232,   0,  57, 0.3); }
#note_crew_cm    { background: rgba(255, 242,   2, 0.3); }
#note_crew_rn    { background: rgba(255, 255, 255, 0.3); }
#note_crew_rc    { background: rgba( 21, 131, 204, 0.3); }
#note_crew_jn    { background: rgba(125,  91,  81, 0.3); }
#note_crew_yr    { background: rgba(158, 157, 147, 0.3); }
#note_blank      { background: rgba(255, 255, 255, 0.3); }
#note_comma      { background: rgba(255, 255, 255, 0.3); }
#note_hyphen     { background: rgba(255, 255, 255, 0.3); }
#note_delete     { background: rgba(255, 255, 255, 0.3); }
#note_res_win    { background: rgba(109, 186,  44, 0.3); }
#note_res_lose   { background: rgba(229,   0,  56, 0.3); }
#note_res_frz    { background: rgba(177, 203, 226, 0.3); }
#note_res_del    { background: rgba(247, 177, 193, 0.3); }

#btn_role_bg {
    width: 150px;
    font-size: 20px;
    display: block;
    margin: auto;
}

#btn_arrow {
    width: 150px;
    font-size: 20px;
    display: block;
    margin: auto;
}

#help_bgm_area {
    float: left;
    display: flex;
    flex-direction: column;
}

#button_help {
    position: relative;
	width: 40px;
    z-index: 1;
    margin-bottom: 10px;
}

#button_bgm {
    position: relative;
	width: 40px;
    z-index: 1;
}

.modal_help_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	transition: 0.2s;
}

.modal_help_wrap.show {
	opacity: 1;
	visibility: visible;
}

.modal_help_content{
    width: 800px;
    padding: 20px;
	overflow-y: auto;
	max-height: 85vh;
	background: #fff;
    line-height: 1;
}

.modal_bgm_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	transition: 0.2s;

    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url(../img/Aster_2.png);
    background-size: cover;
    background-blend-mode: lighten;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.modal_bgm_wrap.show {
	opacity: 1;
	visibility: visible;
}

.modal_bgm_content{
    padding: 20px;
	overflow-y: auto;
	max-height: 85vh;
	background: #fff;
}

#range_bgm {
    width: 100%;
    margin-top: 5px;
}

#copyright{
    width: 100%;
    bottom: 0;
    position: fixed;
    text-align: center;
    padding: 20px;
    z-index: 2;
    pointer-events: none;
}

@media screen and (max-width:1812px), (max-height:849px) {
    body {
        font-size: 7px;
    }

    hr {
        margin-top:    10px;
        margin-bottom: 10px;
    }

    button {
        width:        65px;
        margin-top:    5px;
        margin-bottom: 5px;
        font-size:     7px;
    }

    select {
        width:        65px;
        margin-top:    5px;
        margin-bottom: 5px;
        font-size:     7px;
    }

    table {
        margin-top: 15px;
        margin-left: 3px;
        font-size:   7px;
    }

    td, th {
        font-size: 7px;
    }

    #loop_num {
        width:        50px;
        margin-top:    5px;
        margin-bottom: 5px;
        font-size:     7px;
    }

    #arrowTypeSelection {
        margin-bottom: 10px;
    }

    #crewGrid {
        grid-column-gap: 15px;
    }

    #discussionArea {
        width:  400px;
        height: 400px;
    }

    #noteArea {
        width:    265px;
        height:    80px;
        font-size:  7px;
    }

    .crew-frame {
        width:       40px;
        height:      40px;
        font-size:    7px;
        line-height: 40px;
    }

    #popup-role {
        font-size: 14px;
        padding:    5px;
    }

    #popup-arrow {
        font-size: 14px;
        padding:    5px;
    }

    #btn_role_bg {
        width: 75px;
        font-size: 10px;
    }
    
    #btn_arrow {
        width: 75px;
        font-size: 10px;
    }

    #button_help {
        width: 20px;
    }

    #button_bgm {
        width: 20px;
    }

    .modal_help_content{
        width: 450px;
    }
}