@charset "UTF-8";
/* CSS Document */

body{
background: #808080;
}

.bgcolor{
    background: #808080;
    
}



.jumbotron-extend {
    padding: 0.5rem;
    background: #808080;

}

.navbar-extend {
    padding: 0.5rem;
    background: #808080;

}

input {
    width : 100%;
    padding : 6px;
    border: 0px;
    box-sizing: border-box;
}
/*    フォーカス時に枠線をつける*/
input:focus {
    border: solid 4px #555555;
}

input[type="text"]{
    font-size: 16px;
    transform: scale(0.8);
box-sizing: border-box;
}

select {
  box-sizing: border-box;
  width: 100%;
  font-size: 16px;
  transform: scale(calc(12 / 16));
}

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
#picker-self-resized {
    width : 100%;
}
.picker-block {
    padding : 2px;
    width : 100%;
    height: auto;
    margin : 0 auto;
    max-width : 400px;
    text-align : center;
}
/*canvas {
    width: 100%;
    height: auto;
}*/

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

.wrapper canvas {
    width: 100%;
    height: auto;
    /*max-width: 350;
    max-height: 350;*/
/*    position: absolute;
    top: 0;
    left: 0;*/
}

/*TABLE UNITのLayer2の位置合わせよう*/
.wrapper .layer2 {
    width: 100%;
    height: auto;
    /*max-width: 350;
    max-height: 350;*/
    position: absolute;
    top: 0;
    left: 0;
}

    .jumbotron-extend {
    padding: 1rem;
}
    .inputs-list {
    margin-top : 24px;
}
.btn-light-extend {
    color: #212529;
    background-color: #DDDDDD;
}


.circle{

  width: 40px;
  height: 40px;
  border-radius: 50%;
}



input[type="range"] {
  -webkit-appearance: none; /* これ無しだとスタイルがほぼ全く反映されないので注意 */
  appearance: none;
  cursor: pointer; /* カーソルを分かりやすく */
  outline: none; /* スライダーのアウトラインは見た目がキツイので消す */
  height: 10px; /* バーの高さ */
  width: 100%; /* バーの幅 */
  background: #555; /* バーの背景色 */
  border-radius: 5px; /* バーの両端の丸み */
  /*border: solid 3px #dff1ff;*/ /* バー周囲の線 */
}
/* WebKit向けのつまみ */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /*  🚩デフォルトのつまみのスタイルを解除 */
  background: #fff; /* 背景色 */
  width: 24px; /* 幅 変更前32px*/
  height: 24px; /* 高さ 変更前32px */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
}
/* Moz向けのつまみ */
input[type="range"]::-moz-range-thumb {
  background: #fff; /* 背景色 */
  width: 32px; /* 幅 */
  height: 32px; /* 高さ */
  border-radius: 50%; /* 円形に */
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
  border: none; /* デフォルトの線を消す */
}
/* Firefoxで点線が周りに表示されてしまう問題の解消 */
input[type="range"]::-moz-focus-outer {
  border: 0;
}
/* つまみをドラッグしているときのスタイル */
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.3);
}


/*言語切り替え*/
/* === ラジオボタンは非表示 ================== */
#langChenge input[type="radio"]{
  display    : none;
}
 
 
 /* === 各ラジオボタンのラベルをボタンに変更 == */
#langChenge label{
	font-size: 0.9em;
	color: rgba(0,0,0,0.9);
  display    : inline-block;
  /*border     : 1px solid #ccc;*/
  /*box-shadow : 2px 2px #999;*/
  padding    : 2px;
	width: 36px;
}
 
 /* === 選択されている言語のラベル色を変更 ==== */
#langChenge input[type="radio"]:checked + label {
/*  background : #ffa64d;*/
	border     : 1px solid #ccc;
	box-shadow : 2px 2px #999;
}

#langChenge img{
/*  margin-right: 2px;*/
}


/*数値入力の矢印を消す*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*input grouoカスタム*/
.input-group,
.input-group__control,
.input-group__addon {
  box-sizing:border-box;
}


.input-group {
  display:table;
  width:100%;
  border-collapse:separate;
  font-size:10px;

}

.input-group__control,
.input-group__addon {
  display:table-cell;
  /*height:20px;*/
  padding:5px 10px;

}

/*数理入力フォーム用（旧バージョン）*/
.input-group__control {
  float:left;
  width:100%;
  margin:0;
  border:1px solid #bbb;
  border-radius:0;
  font-size:1.2rem !important;
	transform: scale(1.0) !important;
	background: #808080;
  font-family:inherit;
  line-height:1.5;
  -webkit-appearance:none;
          appearance:none;
}

/*数値入力フォーム（新バージョン）*/
.input-group__control2 {
/*  float:left;*/
  width:100%;
  margin:0;
color:white;
  border:1px solid #bbb;
  border-radius:0;
  font-size:1.2rem !important;
	transform: scale(1.0) !important;
	background: #808080;
  font-family:inherit;
  line-height:1.5;
  -webkit-appearance:none;
          appearance:none;
}

.right {
text-align: right;
}

.hexcolor{
	 font-size:1.2rem;
}


.input-group__control3{
  display:table-cell;
  padding:2px 5px;
/*	float:left;*/
	color:white;
  width:100%;
  margin:0;
  border:1px solid #bbb;
  border-radius:0;
  font-size:1.2rem !important;
	transform: scale(1.0) !important;
	background: #808080;
  font-family:inherit;
  line-height:1.5;
  -webkit-appearance:none;
          appearance:none;
}


.input-group__addon {
  width:1%;
  border-width:0px;
  border-style:solid;
  border-color:#bbb;
  white-space:nowrap;
  vertical-align:middle;
  text-align:center;
  line-height:1;
	 font-size:1.2rem !important;
}

.input-group__control + .input-group__addon {
  border-width:0px;
}

/*補色ボタン用*/
.line-height-1{
line-height:1;
/*font-size:600%;*/
	font-size:4.5rem;
	text-align:center;
}
.normalText{
	color: white;
}

.wrapper3 {
    width: 100%;
    height: 100%;
    position: relative;
}
/*フッター用*/
* {
  box-sizing: border-box;
}
 
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 80%;
}
 
body {
  display: flex;
  flex-direction: column;
}
.spUser,.pcUser {
    display :none;
}

/*画面サイズ比*/
@media screen and (max-width: 600px) {
/*正方形表示用*/
.square_box {
  width: 8vw;
  height: 8vw;
	border: 1px solid rgb(187,187,187);
}
	
.square_box2 {
  width: 8vw;
  height: 8vw;
	border-radius: 50%;/*角丸*/
}

}
@media screen and (min-width: 601px) {
 /*正方形表示用*/
.square_box {
  width: 50px;
  height: 50px;
	border: 1px solid rgb(187,187,187);
/*	font-size:9vw;*/
/*	font-size:9vmax;*/
}
.square_box2 {
  width: 50px;
  height: 50px;
	border-radius: 50%;/*角丸*/
}
}

.mybase {
  vertical-align: bottom;
  display: inline;
}
.mybase.large {
  font-size: large;
}
 


@media screen and (orientation: portrait) {
	.tate{
		max-width: 400px
	}
}

@media screen and (orientation: landscape) {
	.tate{
		max-width: 500px
	}
}

.text-1{
	font-size: calc(1rem + 0.2vw);
}
.comp-text{
	font-size:8vw;
}
.navbar-nav{
	font-size: calc(1rem + 0.3vw);
}
.lang-font{
	font-size: calc(1rem + 0.1vw);
}
.langCng{
	font-size: 0.9rem;
}
.text-2{
	font-size: 2vw;
}
.text-transpose{
	font-size: 1.15rem;
}
.comple_circle{
/*	background: skyblue;*/
	width: 8vw;/*幅*/
	height: 8vw;/*高さ*/
	max-width: 50px;
	max-height: 50px;
	border-radius: 50%;/*角丸*/
}