/* style */
body{
    margin:0;
    padding:0;
    min-height: 100vh;
    position: relative;
    padding-bottom:7rem;
    box-sizing: border-box;
}

a:link , a:visited , a:hover , a:active { 
    color: black;
 } 

.flex{
    display:flex;
}

.inline{
    display:inline;
}

.inline-box{
    display:inline-box;
}

.hidden{
    display:none;
}

.full{
    width:100%;
    height:100%;
}

.relative{
    position:relative;
}
.right{
    position:absolute;
    right:0;
}
.db{
    white-space: pre-wrap
}
.base_center{
    margin:0 auto;
}
.no_button{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
/* インフォメーション */

#hidden_space{
    margin:0;
    padding:0;
    
}
.base_black{
    background-color:rgba(0,0,0,0.5);
    position:fixed;
    top:0;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    z-index:10;
}

.space_around{
    display:flex;
    justify-content:space-around;
}

.flex-end{
    display:flex;
    justify-content:flex-end;
}

/* 共通CSS */
.member_table{
    border:double 2px black;
    border-collapse:collapse;
}
.name_block{
    display:inline-block;
    margin-right:0.8em;
}
.name_block_center{
    display:inline-block;
    margin-right:0.8em;
    text-align:center;
}
.shozoku{
    font-size:0.7em;
}
.inner_white{
    background-color:white;
    border-radius:0.3em;
    padding:0.5em;
}

.text_center{
    text-align:center;
}
.text_right{
    text-align:right;
}

/* 文字数制限 */
.m2{
    width:2em;
}

.m3{
    width:3em;
}

.m4{
    width:4em;
}
.m5{
    width:5em;
}
.m6{
    width:6em;
}

.m7{
    width:7em;
}


/* font-size */

.xx-small{
    font-size:xx-small;
}
.x-small{
    font-size:x-small;
}
.small{
    font-size:small;
}
.xx-large{
    font-size:xx-large;
}
.x-large{
    font-size:x-large;
}
.large{
    font-size:large;
}
.delicate{
    font-size:0.8em;
    color:dimgray;
}

/* font-color */

.red{
color:red;
}
.blue{
color:blue;
}
.green{
color:green;
}
.white{
color:white;
}
.black{
color:black;
}
.obbred{
color:#800;
}
.ner{
color:#ed551b;
}

/* background-color*/

.bg_red{
background-color:red;
}
.bg_blue{
background-color:blue;
}
.bg_green{
background-color:green;
}
.bg_white{
background-color:white;
}
.bg_black{
background-color:black;
}
.bg_obbred{
background-color:#800;
}
.bg_ner{
background-color:#ed551b;
}
.bg_orange{
background-color:orange;
}
.bg_aqua{
    background-color:aqua;
}
.bg_corn{
    background-color:cornsilk;
}

/* border-color*/

.border_red{
    border: medium solid red;
    padding:5px;
}
.border_blue{
    border:medium solid blue;
    padding:5px;
}
.border_green{
border:medium solid green;
padding:5px;
}
.border_white{
border:medium solid white;
padding:5px;
}
.border_black{
border:medium solid black;
padding:5px;
}
.border_obbred{
border:medium solid #800;
padding:5px;
}
.border_ner{
border:medium solid #ed551b;
padding:5px;
}
.border_orange{
border:medium solid orange;
padding:5px;
}

/* marker */

.under_none{
    background:none;
}
.under_red{
    background: linear-gradient(transparent 50%,red 50%);
	}
.under_pink{
    background: linear-gradient(transparent 50%,pink 50%);
	}
.under_blue{
    background: linear-gradient(transparent 50%,blue 50%);
	}
.under_green{
    background: linear-gradient(transparent 50%,green 50%);
	}
.under_white{
    background: linear-gradient(transparent 50%,white 50%);
	}
.under_obbred{
    background: linear-gradient(transparent 50%,#800 50%);
	}
.under_ner{
    background: linear-gradient(transparent 50%,#ed551b 50%);
	}
.under_orange{
    background: linear-gradient(transparent 50%,orange 50%);
	}

/* box */
.white_box{
    color:white;
    border:medium solid white;
    padding:0.2em;
}
.blue_box{
    color:blue;
    border:medium solid blue;
    padding:0.2em;
}

/* markerアニメーション */

.marker_anime_red{
    color:red;
    position:relative;
    text-align:center;
    height:1rem;
}

.marker_anime_red:before{
    content: 'ragrrag';
    animation:redline 2s forwards;
    background:linear-gradient(transparent 50%,red 50%);
    transform: scaleX(0.5);}
    color: gray; /*文字色*/
    height:1rem;
    position:absolute;
    left:0;
    top:0;
    opacity:0.3;
}

.marker_anime_red_delete{
    animation:redline 3s forwards reverse;
}

@keyframes redline {
0% {
    width:0; 
    opacity:0.2;
}
100% {
    width:100%; 
    opacity:0.5;
}
}

/* webフォント一覧 */

.wf-roundedmplus1c {
    font-family: "M PLUS Rounded 1c"; }
.wf-kokoro { font-family: "Kokoro"; }
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }
.wf-nikukyu { font-family: "Nikukyu"; }
.wf-nicomoji { font-family: "Nico Moji"; }
.wf-notosansjapanese { font-family: "Noto Sans JP"; }