canvas#preview_light{
    font-size: 50vw ;
}
canvas#preview_dark{
    font-size: 100vw ;
}

/*.wf-roundedmplus1c { font-family: 'M PLUS Rounded 1c', sans-serif;}
*/
.preview{
    font-size: 100vw ;
    border-color:#d4d4d4;
    border-width:1px;

}
#preview_dark{
    background-color: #515151;
    color:white;
}

h1 {
    color: #364e96;/*文字色*/
    padding: 0.5em 0;/*上下の余白*/
    border-top: solid 3px #364e96;/*上線*/
    border-bottom: solid 3px #364e96;/*下線*/
  }

.wrapper {
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: top;     /*上下中央揃え*/
}

.fadeout {
    background: #eee ;
    margin:25px;
    padding:25px;
    width: 200px ;
}

.twi_icon {
    width: 50px;
    height: 50px;
    }
.sample {
    width: 25px;
    height: 25 px;
}

textarea {
    resize: auto;
    max-width: 500px;
    max-height: 200px;
    min-width: 100px;
    min-height: 100px;
    width:400px;
    height:100px
  }

@font-face {
	font-family: 'MyFont';
	src:  /* url('font/hm_tb.woff') format('woff'),*/
    url(./MPLUSRounded1c-Bold.ttf) format('truetype');   /* フォントファイル */
    ;
}

@font-face {
	font-family: 'maruGothicRegular';
	src:  /* url('font/hm_tb.woff') format('woff'),*/
    url(./MPLUSRounded1c-Regular.ttf) format('truetype');   /* フォントファイル */
    ;
}

@font-face {
	font-family: 'maruGothicBlack';
	src: /* url('font/hm_tb.woff') format('woff'),*/
    url(./MPLUSRounded1c-Black.ttf) format('truetype');   /* フォントファイル */
    ;
}

html {
    font-family: MyFont
}

body{
    background-color:#ffcc01;
}


label:hover {
  opacity: 0.8;
}

table {
    border-collapse: separate;
    border:solid  1px #c0c0c0;
    border-radius: 6px;
    border-spacing: 0;
    overflow: hidden;
    border: 0px;
    display: inline-block;
}

table thead th,
table tbody th,
table tbody td {
  padding: .6em 0em;
  border-bottom: 1px solid #aaa;
}
table thead th {
  background-color: rgb(135, 206, 250);
  color:#364e96;
}
table tbody th {
  background-color: rgb(135, 206, 250);
  color:#364e96;
}
table thead th + th,
table tbody td {
  border-left: 0px solid #aaa;
}
table tbody tr:last-child th,
table tbody tr:last-child td {
  border-bottom: none;
}
.buttonControl{
  /* position: absolute;*/
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px 15px;
  color: #fff;
  font-size: 25px;
  background-color: #097d7e;
  -webkit-box-shadow: 0 3px 0 #0b5555;
  box-shadow: 0 3px 0 #0b5555;
  border: none;
  border-radius: 10px;
  appearance: auto;
  writing-mode: horizontal-tb !important;

  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  align-items: flex-start;
  cursor: default;
  box-sizing: border-box;
}

#btn_disp,#btn_rank_disp{
  display: none;
}