.dsp_none {
  display: none;
}
#content {
  background: #282c34;
}
#main {
  /*background: #211f1f;*/
  background: #282c34;
  color:#f7f7f7;
  padding: 20px 0;
}
h1 {
  font-size: 1em;
  padding: 0 30px;
}
.date-tags {
  padding: 0 30px;
}
#tool_label {
  padding: 0 30px;
  display:flex;
}
table tr:nth-of-type( 2n+1 ) {
    background-color: #282c34;
}
.color_green {
  color: #0fff00;
}
.color_orange {
  color: #fe7800;
}

/*
#after_alpha_table {
  display:none;
  margin-top: 16px;
}
#after_alpha_table_yajirushi {
  font-size:1.2em;
  width:40px;
}
*/
.function_1_1_table td {
  /*font-size: 8px;*/
  padding: 0 6px;
  width: calc( 100% / 2 );
  /*text-align: left;*/
}
.mgn_btm_10p {
  margin-bottom: 10px;
}

#function_1_1_table_type {
    width: 80%;
    margin: 1em auto 0 auto;
    font-size: 12px;
    background-color: #282c34;
    color: #f7f7f7;
    padding: 6px;
}
#after_color_table_type {
    width: 80%;
    margin: 1em auto 0 auto;
    font-size: 12px;
    background-color: #282c34;
    color: #f7f7f7;
    padding: 6px;
}

#function_1_1_table_2 {
  display: none;
}

#function_1_1_table_1 {
  color: #0fff00;
}
#function_2_1_table_1 {
  color: #0fff00;
}
#after_color_table_1 td {
  padding: 0 6px;
}

#function_1_1_x {
  font-size: 14px;
  width: 81px;
  height: 30px;
}
#function_1_1_y {
  font-size: 14px;
  width: 81px;
  height: 30px;
}
#function_2_1_x {
  font-size: 14px;
  width: 81px;
  height: 30px;
}

#function_2_1_y {
  font-size: 14px;
  width: 81px;
  height: 30px;
}
#after_color_x {
  font-size: 14px;
  width: 81px;
  height: 30px;
}
#after_color_y {
  font-size: 14px;
  width: 81px;
  height: 30px;
}
#fizz_1 {
  font-size:14px;
  width: 67px;
  height: 30px;
}
#fizz_2 {
  font-size:14px;
  width: 67px;
  height: 30px;
}
@-moz-document url-prefix() {
  #function_1_1_x { height: 40px; }
  #function_1_1_y { height: 40px; }
  #function_2_1_x { height: 40px; }
  #function_2_1_y { height: 40px; }
  #after_color_x { height: 40px; }
  #after_color_y { height: 40px; }
  #fizz_1 { height: 40px; }
  #fizz_2 { height: 40px; }
}
#after_color_table_1 {
  color: #fe7800;
}
#after_color_table_2 {
  display: none;
}
.after_color_table td {
  /*padding: 0 6px;*/
  width: calc( 100% / 2 );
}

#selected_rgb_2_alpha {
  width: 100%;
}

#after_alpha {

  width: 100%;
}

#x_line {
  position: absolute;
  width:300px;
  border:0.5px solid #0fff00;
  left:-8px;
  pointer-events: none;
}
#y_line {
  position: absolute;
  height:300px;
  border:0.5px solid #0fff00;
  top:-8px;
  pointer-events: none;
}
#x_line_2 {
  position: absolute;
  width:300px;
  border:0.5px solid #fe7800;
  left:-8px;
  pointer-events: none;
}
#y_line_2 {
  position: absolute;
  height:300px;
  border:0.5px solid #fe7800;
  top:-8px;
  pointer-events: none;
}
.mobile-menu-buttons {
  display:none;
}
.how_to {
  margin-left: 1em;
  margin-top: 11px;
  font-weight: bold;
}
#paint_icon {
  width:20px;
  margin:auto 10px;
  vertical-align: middle;
}
#update_btn_icon {
  width:50px;
  margin:auto 10px;
}
/*
@font-face {
	font-family: 'Gamer';
	src: url( <?php //echo get_stylesheet_directory_uri(); ?>/font/x8y12pxTheStrongGamer.ttf);
}

@font-face {
	font-family: 'PixelMplus10-Regular';
	src: url( <?php //echo get_stylesheet_directory_uri(); ?>/font/PixelMplus10-Regular.ttf);
}
*/
#canvas_td_1 , #canvas_td_2 {
  padding:0;
  border-right:3px solid #211f1f;

  background: #5c5a5a;
  background-image: linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0),
  linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0);
  background-size: 30px 30px;
  background-position: 0 0 , 15px 15px ,15px 15px , 30px 30px;
}
.navi_img_box_container {
  display:inline-block;
  width: 30px;
  height:25px;
  border:1px solid #fff;

  background: #5c5a5a;
  background-image: linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0),
  linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0);
  background-size: 8px 8px;
  background-position: 0 0 , 4px 4px ,4px 4px , 8px 8px;
}
.navi_img_box {
  display:inline-block;
  width: 28px;
  height:23px;
}

#tool_navi {
  font-size: .8em;
  /*min-height:150px;*/
  min-height: 16em;
  /*font-family: 'PixelMplus10-Regular';*/
  font-family: 'Noto Sans JP', sans-serif;
  border:3px solid #f7f7f7;
  border-radius: 9px;
  padding:10px;
  margin-top: 6px;
}
.command_waku {
  border:3px solid #f7f7f7;
  border-radius: 9px;
  position: relative;
  margin-bottom: 14px;
}
.command_waku table {
  border-collapse: inherit;
  border-spacing: revert;
  margin: 10px auto;
}
.command_waku table tr {
  background: #282c34;
}
.command_waku table td {
  border: none;
}

.select_mo_messa {
  font-size: 12px;
  text-align: center;
  margin-bottom: 14px;
}

.pdg0 {
  padding: 0;
}

#select_mode_table td {
  padding: 0;
}
.command_label {
  position: absolute;
  top:-11px;
  left:0;
  right:0;
  margin: 0 auto;
  background: #282c34;
  width: 131px;
}
.command_label_2 {
  position: absolute;
  top:-11px;
  left:0;
  right:0;
  margin: 0 auto;
  background: #282c34;
  width: 118px;
}
.command_label_3 {
  position: absolute;
  top:-11px;
  left:0;
  right:0;
  margin: 0 auto;
  background: #282c34;
  width: 149px;
  display: flex;
}
#control_waku {
  color:#f7f7f7;
  /*font-family: 'PixelMplus10-Regular';*/
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  background: #282c34;
  transform: scale( 0.9 , 0.9 );
  margin-top: -1.5em;
}

.canvas_table {
  /*table-layout: fixed;*/
}
.canvas_table td {
  border: none;
  /*width: calc( 100% / 2 );*/
}

.background_21 {
  background: #282c34;
}



.rireki {
  /*font-family: 'PixelMplus10-Regular';*/
  font-family: 'Noto Sans JP', sans-serif;
  background: #282c34;
  color:#f7f7f7;
  padding:0 10px;
}
.dl_btn {
  width: 174px;
  border-radius: 100vh;
  margin:0 auto;
  text-align: center;
  height:40px;
  font-size: 1.4em;
  line-height: 40px;
  font-weight: bold;
  background: #0fff00;
  color:#fff;
}

#update_btn {
  width: 174px;
  border-radius: 100vh;
  margin: 16px auto 0 auto;
  text-align: center;
  height:40px;
  /*font-size: 1.4em;*/
  line-height: 40px;
  font-weight: bold;
  
  cursor : default;
}
.update_on {
  color:#fff;
  background:#03c2fc;
}
.update_off {
  color:#fff;
  background:#747d80;
}
/*.crosshair {
  cursor:crosshair;
}
*/
.rireki_check_point {
  border: 3px solid #0fff00;
}

.em_95 {
  font-size: .95em;
}
.em_85 {
  font-size: .85em;
}
.em_75 {
  font-size: .75em;
}
.em_55 {
  font-size: .55em;
}

.rireki_discp {
  font-size: 12px;
  line-height: 42px;
  margin-left: 1em;
}
.h072 {
  height:60px;
}
.mat_10 {
    margin-top: 10px;
}
.mat_23 {
    margin-top: 23px;
}
.mat_2em {
    margin: 2em auto;
}
.mat_2em h3 {
  margin-bottom: 1em;
}

.fs_5p {
  font-size: 5px;
}

.tate {
  writing-mode: vertical-rl;

}
#selected_rgb {
  width: 50px;height:58px; margin: auto;border: 1px solid #000;background:#000;
}


#tab_content_1 {

  font-size: 12px;
  text-align: center;
  display: block;
}


#tab_content_2 {

  font-size: 12px;
  text-align: center;
  display:none;
}

#tab_content_d {

  font-size: 12px;
  text-align: center;
  padding: 0 15px;
  margin-top: 16px;
}

#spoit_switch {
  width: 29px;
  margin: 5px auto 0 auto;
  /*display: block;*/

}
#spoit_switch_img_off {
  opacity: .7;
}
.switch_img_on {
  opacity: 1;
}
#spoit_switch_txt {
  font-weight: bold;
  font-size:.9em;
  color: #fff;
  opacity: .7;
}

#spoit_switch_2 {
  width:30px;
  margin: 5px auto 5px auto;
  display: block;
  opacity: .7;
}
#spoit_switch_txt_2 {
  font-weight: bold;
  font-size:.9em;
  color: #fff;
  opacity: .7;
}
#paint_switch {
  width:30px;
  margin: 5px auto 5px auto;
  display: block;
  opacity: .5;
}
#paint_switch_txt {
  font-weight: bold;
  color: #fff;
  opacity: .5;
}
#result_dl {
  text-align: center;
  font-weight: bold;
}
#result_dl_message {
  font-size: 12px;
  display: none;
}
#control {
  width: 236px;
  margin-top: 8px;
  margin-right: 8px;
}
#drop_message {
  display: block;
  font-size: 1.1em;
  color: #fff;
  font-weight: bold;
}
#rireki_box {
  margin-bottom: 3px;
}
#rireki_box td {
  width: calc( 100% / 10 );
  padding: 2px;

  background: #5c5a5a;
  background-image: linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0),
  linear-gradient(45deg, #9E9E9E 25%, transparent 0),
  linear-gradient(45deg, transparent 75%, #9E9E9E 0);
  background-size: 10px 10px;
  background-position: 0 0 , 5px 5px ,5px 5px , 10px 10px;
}


.shikii {
  border-top: #f7f7f7 double 5px;
  margin-top: 2em;
  padding-top: 2em;
}
.discription_table {
  font-size: .8em;
}
.discription_table th {
  background: #0c0d0d;
  white-space: nowrap;
}
.discription_table td {
  background: #383b3b;
}
.ctr_img {
  width: 30%;
  margin:1em;
}
.ctr_img img {
  box-shadow: 0px 0px 33px gray;
  border-radius: 20px;
}
.cvs_navi_img {
  width:40%;
  margin:1em;
}
.cvs_navi_img img {
  box-shadow: 0px 0px 33px gray;
  border-radius: 20px;
}
.kagemaru {
  margin:1em auto;

}
.kagemaru img {
  box-shadow: 0px 0px 33px gray;
  border-radius: 20px;
}
.picker_div {
  width:59px;
  height:33px;
  margin: 0 auto;
  box-shadow: 0px 0px 26px white;
  background: #5f5454;
  position: relative;
  z-index: 10;
}
.picker_div input {
  width: 59px;
  height: 33px;
  border-radius:7px;
}

/* switch */
switch {
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 20px;
    max-width: 100%;
    background: white;
    border-radius: 100em;
    box-shadow: inset 0px 1px 1px 1px #d6d6d6, inset 0 -1px 1px 1px #ececec, inset 0 0 0px 2px #f5f5f5;
}
switch::before{
    content: "";
    display: block;
    position: absolute;
    left: 5%;
    top: 10%;
    width: 50%;
    height: 80%;
    background: white;
    border-radius: 100%;
    box-shadow: -2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
    transition: all .2s;
}
switch.on{
    background: #00de00;
    box-shadow: unset;
}
switch.on::before{
    margin-left: 40%;
    box-shadow: 2px 2px 2px 0 #bbbbbb, 0px 0px 10px 0 #e4e4e4;
}

#plus img {
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
}
#minus img {
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
}
.minus_plus_box {
  margin-left: auto;
  margin-top: 11px
}

/* ベーススタイル */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

/* Track: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
  /*background: #a5d2e6;*/
  /*background: #f7f7f7;*/
  background: linear-gradient( 90deg , #f7f7f7 , #3173f7 );
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px; /* 位置の調整が必要 */
  background-color: #3173f7;
  border-radius: 50%;
}

/* Track: Firefox */
input[type="range"]::-moz-range-track {
  /*background: #a5d2e6;*/
  /*background: #f7f7f7;*/
  background: linear-gradient( 90deg , #f7f7f7 , #3173f7 );
  height: 8px;
  border-radius: 8px;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  background-color: #3173f7;
  border-radius: 50%;
}


#tab_1 {
  accent-color: #3173f7;
}
#tab_2 {
  accent-color: #3173f7;
}