*{
	-webkit-user-select: none;
	user-select: none;
}

html,body {
	position: fixed;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
html{
  height: -webkit-fill-available;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
header {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	width: 100%;
	height: 40px;
	background-color: #505050;
	color: #fff;
	font-size: 16pt;
	background-image: url(../img/logo/yamagiwa.png);
	background-size: 123px;
	background-repeat: no-repeat;
	background-position: 99% center;
	z-index: 100;
}
iframe {
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
}
#loading {
	display: none;
	background: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
}
.loading_msg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
	padding-top: 50px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 1px;
}
.loading_anim_frame{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 200px;
	height: 5px;
	background: #333;
}
.loading_anim {
	position: relative;
	width: 1px;
	height: 5px;
	margin: 0;
	background: #fff;
}
@keyframes loading_anim {
    0% {width:0%;}
  100% {width:100%;}
}

.returnBtn {
	position: absolute;
	top: 0;
	left: 0;
	width: 43px;
	height: 40px;
	padding: 10px 19px 10px 13px;
}
.breadcrumbs {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	top: 40px;
	height: 20px;
	background-color: #f1f1f1;
	z-index: 100;
	width: 100%;
	font-size: 10px;
	padding: 2px 10px;
}

.breadcrumbs a {
	color: #20a0b3;
	text-decoration: underline;
	font-weight: 600;
}
.breadcrumbs a:visited {
	color: #20a0b3;
	text-decoration: underline;
	font-weight: 600;
}

/* unit同士の隙間対策*/
[class^="lightPosition_"] {
	position: absolute;
	font-size: 0;
	width: fit-content;
}



.mapArea{
	width: fit-content;
	height: fit-content;
}



/* これで画像サイズをコントロール（最終的には4000pxで固定） */
div#lightIconDispArea {
	width: 4000px;
}


hr {
	border: 0;
	background: #c4c4c4;
	height: 1px;
}
h3 {
	font-size: 12px;
	font-weight: 300;
	color: #444;
}

.panzoom_floor {
	margin: 60px 0 0 130px;
	width: calc(100% - 130px);
	height: calc(100% - 60px);
}

.panzoom_room {
	margin-top: 60px;
	/*
	width: calc(100% - 380px);
	height: calc(100% - 60px);
	*/
}

.floorSelectMenu {
	position: fixed;
	top: 60px;
	width: 130px;
	height: calc(100% - 40px);
	margin: 0;
	background: #eee;
	z-index: 100;
}

.floorSelectMenu h1 {
	width: 100%;
	text-align: center;
	border-bottom: 1px solid #ddd;
	padding: 5px 0;
	font-size: 11px;
	font-weight: 100;
}

.floorSelectMenu a {
	padding: 10px;
	width: 100%;
	display: block;
}

ul {
	font-size: 9pt;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
li {
	border-bottom: 1px solid #ddd;
	padding: 0;
}

.floorDispArea {
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid red;
	z-index: 1;
}

.area_1{
	width: 4000px;
}

/* ８つのボタンに応じた照明のセット */
.lightSet {
	display: none;
}


.lightArea_1{
	position: absolute;
	font-size: 0;
	top:0;
	left: 0;
}

.unit{
	position: absolute;
	display: inline-flex;
	justify-content: flex-start;
	flex-direction: column;
	width: 100px;
	height: 100px;
	padding: 0;
	margin: -1px 0 0 -1px;
	/* border: 1px solid #b6b6b6; */
	text-align: center;
	font-size: 10pt;
	outline-offset: -3px;
}

.brightNum {
	font-size: 12pt;
}
.brightNum::after {
	content: " %";
	font-size: 9pt;
}

.toneNum {
	font-size: 12pt;	
}
.toneNum::after {
	content: " K";
	font-size: 9pt;	
}



span.numUnit {
	font-size: 10px;
}

.unitData {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex:2;
	font-size: 14px;
	line-height: 17px;
	font-weight: 600;
	z-index: 1;
}
h2.spanNum {
	font-size: 16px;
}
.templateBorder{
	display: flex;
	flex:1;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #fff;
	border: 4px solid #62b9c5;
}
.unitTemplate{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	font-weight: bold;
}

.lightColor {
	width: 100%;
	height: 15px;
	border: 1px solid #bfbfbf;
	margin: 0 auto;
	border-radius: 50px;
}

h2.areaHeader {
	font-size: 8pt;
	font-weight: 100;
	border-bottom: 1px solid #aaa;
	margin: 0 0 7px 0;
}

section.rightMenu {
	position: fixed;
	top: 60px;
	right: 0;
	width: 380px;
	height: calc(100% - 60px);
	background: #f1f1f1;
}

@keyframes menuSlideOut {
	0% {transform : translateX(0px);}
100% {transform : translateX(370px);}
}
@keyframes menuSlideIn {
	0% {transform : translateX(370px);}
100% {transform : translateX(0px);}
}

@keyframes menuSlideOutLeft {
	0% {transform : translateX(0px);}
100% {transform : translateX(-220px);}
}
@keyframes menuSlideInLeft {
	0% {transform : translateX(-220px);}
100% {transform : translateX(0px);}
}


.rightMenu .menuTab, 
.rightEditArea .editAreaTab,
.templateArea .templateAreaTab
{
	display: none;
	position: absolute;
	top: 5px;
	left: -51px;
	width: 51px;
	font-size: 8px;
	background: #f1f1f1;
	padding: 5px;
	border-radius: 3px 0 0 3px;
}
.rightEditArea .editAreaTab{
	top: 30px;
}
.templateArea .templateAreaTab{
	left: 230px;
	border-radius: 0 3px 3px 0;
}

#lightMstSelectArea{
	display: none;
}
.sceneSelectArea{
	width: 100%;
	padding: 10px;
}

.sideAreaBtns_scene {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 112px;
	gap: 2px;
}
.sideAreaBtns_device {
	display: flex;
	flex-direction: initial;
	flex-wrap: wrap;
	height: fit-content;
	gap: 2px;
}

.btn_selectScene {
	position: relative;
	display: inline-block;
	background: #fff;
	width: 179px;
	height: 26px;
	padding: 5px;
	font-size: 8pt;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.sceneSelectClickable {
	position: absolute;
	width: 153px;
	height: 100%;
	top: 0;
	left: 0;
}
.btn_SceneNameChange {
	display: flex;
	width: 25px;
	border-left: 1px solid #fff;
	padding: 5px;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.lightMstSelectArea{
	width: 100%;
	padding: 10px;
}
.btn_lightMst {
	display: inline-block;
	background: #fff;
	width: 32.9%;
	height: fit-content;
	padding: 5px;
	font-size: 8pt;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}


section.funcBtnArea {
	position: fixed;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	gap: 5px;
	bottom: 10px;
	width: auto;
	right: 390px;
}
.funcBtn {
	background-color: #62b9c5;
	color:#fff;
	padding: 5px 10px;
	width: 95px;
	font-size: 10px;
	text-align: center;
}

#funcSpanNum, #funcBtnBright, #funcBtnTone, #funcBtnTemplate{
	display: none;
}

.btnRotate {
	width: 50px;
	height: 50px;
	border-radius: 5px;
	background: #fff;
	padding: 7px;
}


/* 右側編集メニュー */
section.rightEditArea {
	position: fixed;
	display: none;
	top: 60px;
	right: 0;
	width: 380px;
	height: calc(100% - 60px);
	padding: 10px;
	background: #f1f1f1;
}
.rightEditArea h2 {
	font-size: 12px;
	font-weight: 400;
}
.rightEditArea label {
	font-size: 12px;
}
.rightEditArea .editNowInfo{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	gap: 5px;
}
.editNowInfo .editName {
	width: 175px;
	background-color: rgb(98, 185, 197);
	font-size: 10px;
	padding: 1px 9px;
	color: #fff;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.editNowInfo .editNameArea {
	width: 100%;
}
.selectDeviceAndGroupArea {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin: 10px 0 0 0;
	gap:5px;
}
.selectDevice {
	display: block;
	width: 75px;
	height: 200px;
	background: #fff;
	overflow-y: auto;
	border-radius: 3px;
	border: 1px solid #e6e6e6;
}
.selectGroup {
	display: block;
	width: 280px;
	height: 200px;
	background: #fff;
	overflow-y: auto;
	border-radius: 3px;
	border: 1px solid #e6e6e6;
}
.selectDviceItem {
	font-size: 10px;
	padding: 5px 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.btnArea_2p {
	display: flex;
	gap: 5px;
	margin: 5px 0 15px 0;
}
.btn2P1 {
	width: 180px;
	background: #e6e6e6;
	font-size: 11px;
	padding: 5px;
	text-align: center;
	border-top: 1px solid #f5f5f5;
	border-left: 1px solid #f5f5f5;
	border-right: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;
	border-radius: 3px;
}

#btn_makeGroup{
	opacity: 0.3;
}
#btn_deleteGroup{
	opacity: 0.3;
}


















/* スライダーの調整モード */
.sliderModeArea {
	position: relative;
	width: 360px;
	display: flex;
	flex-direction: initial;
	justify-content: center;
	margin: 0 10px;
}

.controllerModeArea {
	top: 0;
	font-size: 10px;
	width: 127px;
	text-align: center;
	height: fit-content;
	margin: 0 0 10px 0;
}

#controllerModeBalance{
	visibility: hidden;
}
#controllerModeTone{
	visibility: hidden;
}

#spacer{
	display: none;
}

/* スライダー表示エリア */
.controllerArea {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	margin: 10px 10px;
	width: calc(100% - 20px);
	height: fit-content;
}

.controllerEditAreaMask {
	position: absolute;
	top: -10px;
	left: -10px;
	box-sizing: border-box;
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 65px);
	background-color: rgb(241 241 241 / 81%);
	z-index: 200;
}

.bar {
	height: 210px;
	padding: 12px 0 16px 0;
}
.sliderPos1{
	height:100%;
}


.ctrl_OnOff_area {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 368px;
	width: 15%;
}

.ctrl_On, .ctrl_Off{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 30px;
	color: #333;
	background-color: #fff;
	border-radius: 3px;
	border: 0;
	margin: 10px auto;
	font-size: 14px;
	letter-spacing: 3px;
}



#ctrl_bright_area{display:none;gap: 5px;}
#ctrl_tone_area  {display:none;gap: 5px;}
#ctrl_OnOff_area {display:none;gap: 5px;}
.ctrl_bar_area {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 36%;
}
.ctrlBtn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 25px;
	border-radius: 3px;
	background-color: #717071;
	user-select: none;
}

.ctrlBtn.btnUpMore {
	padding: 5px 0 6px;
	margin-bottom: 3px;
}
.ctrlBtn.btnUp {
	padding: 5px 0 6px;
}
.ctrlBtn.btnDown {
	padding: 5px 0 6px;
}
.ctrlBtn.btnDownMore {
	padding: 5px 0 6px;
	margin-top: 3px;
}
.ctrlBtn.btnUpMore img   {width: 14px;margin: 3px;}
.ctrlBtn.btnUp img       {width: 14px;margin: 3px;}
.ctrlBtn.btnDown img     {width: 14px;margin: 3px;}
.ctrlBtn.btnDownMore img {width: 14px;margin: 3px;}

#btnArea_up_slider_Bright_range{display: none;}
#btnArea_down_slider_Bright_range{display: none;}
#btnArea_up_slider_Tone_range{display: none;}
#btnArea_down_slider_Tone_range{display: none;}



.ctrlNumArea {
	font-size: 7px;
}

.ctrlNumArea span{
	font-size: 14px;
}


/* スライダー */
.noUi-rtl .noUi-value-vertical {
	transform: translate(-9px,50%);
	font-size: 7px;
}
.noUi-tooltip {
	font-size: 11px;
}
#slider_Bright_single {display: none;} 
#slider_Tone_range   {display: none;}

#slider_Bright_single .noUi-connects{
	background: linear-gradient(rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}
#slider_Bright_range .noUi-connects{
	background: linear-gradient(rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}

#slider_Tone_single .noUi-connects{
	/*
	background: linear-gradient(rgba(185,222,240,1) 0%, rgba(255,255,255,1) 50%, rgba(233,182,31,1) 100%);
	background: linear-gradient(#9bdfff 0%, #e7f1e0 30%, #f7bd0b 100%);
	*/
	background: linear-gradient(rgba(184,221,240,1) 0%, rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%, rgba(234,184,37,1) 100%);

}
#slider_Tone_range .noUi-connects{
	background: linear-gradient(rgba(184,221,240,1) 0%, rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%, rgba(234,184,37,1) 100%);
	/*
	background: linear-gradient(rgba(185,222,240,1) 0%, rgba(255,255,255,1) 50%, rgba(233,182,31,1) 100%);
	background: linear-gradient(#9bdfff 0%, #e7f1e0 30%, #f7bd0b 100%);
	*/
}


/* TYPE選択後スライダー */
#ctrlBright_EditArea{display:none;gap: 3px;}
#ctrlTone_EditArea  {display:none;gap: 3px;}

#slider_afterType_Bright_single {display: none;} 
#slider_afterType_Tone_range   {display: none;}

#slider_afterType_Bright_single .noUi-connects{
	background: linear-gradient(rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}
#slider_afterType_Bright_range .noUi-connects{
	background: linear-gradient(rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}

#slider_afterType_Tone_single .noUi-connects{
	background: linear-gradient(rgba(184,221,240,1) 0%, rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%, rgba(234,184,37,1) 100%);
}
#slider_afterType_Tone_range .noUi-connects{
	background: linear-gradient(rgba(184,221,240,1) 0%, rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%, rgba(234,184,37,1) 100%);
}



.allSaveBtnArea{
	display: flex;
	justify-content: flex-end;
	position: absolute;
	width: calc(100% - 20px);
	bottom: 0px;
	margin: 10px;
	justify-content: flex-end;
	gap: 7px;
}
.allSaveBtnArea div{
	align-items: center;
	justify-content: center;
	width: 115px;
	height: 30px;
	color: #fff;
	background-color: #717071;
	font-size: 12px;
	letter-spacing: 3px;
}
.allSaveBtnArea .btn_load{
	display: flex;
	background: #fff;
	color:#333;
}
.allSaveBtnArea #btn_sceneFileOperate{
	display: none;
}

.allSaveBtnArea .btn_allSave{
	display: flex;
	background: #62b9c5;
	color:#fff;
}
.btn_allEdit{
	display: none;
}
#btn_editSave{
	z-index: 300;
}

@keyframes saveBtnEffect {
  0% {
    box-shadow: 0 0 7px #e39b20;
		background:#e39b20;
  }
  100% {
    box-shadow: 0 0 0;
		background:#e37e20;
  }
}
 



/* テンプレート選択エリア */
section.templateArea {
	display: none;
	position: absolute;
	top: 60px;
	width: 230px;
	padding: 10px 10px 10px 10px;
	height: calc(100% - 60px);
	background: #f1f1f1;
}
[id^="tmplateList_"]{
	display: none;
	height: calc(100% - 100px);
	overflow-y: scroll;
}

.templateArea h2{
	font-size: 8pt;
	font-weight: 100;
	margin: 0 0 7px 0;
}
.templateArea .tmplateList{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.templateArea [class^="btn_templateSelect"]{
	position: relative;
	padding: 7px 7px 7px 13px;
	font-size: 10px;
	color: #fff;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.btn_templateNameChange {
	display: none;
	width: 25px;
	border-left: 1px solid #fff;
	padding: 5px;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.templateBtnArea{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 5px;
	height: 76px;
}
.templateBtnArea [class^="btn_"]{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 1px solid #717071;
	font-size: 11px;
	padding: 5px;
}
.templateBtnArea .btn_edit{
	background: #717071;
	color: #fff;
}
.templateBtnArea .btn_load{
	background-color:#fff;
}
#btn_templateLoad{
	opacity: 0.3;
}
#windowLoadTemplateDone{
	display: none;
}

/* テンプレート編集エリア */
section.templateEditArea {
	display: none;
	position: absolute;
	top: 60px;
	width: 430px;
	padding: 10px 10px 10px 10px;
	height: calc(100% - 60px);
	background: #f1f1f1;
	z-index: 200;
}
.tmplateListEdit {
	display: none;
	flex-direction: column;
	gap: 2px;
	flex-wrap: wrap;
	height: 318px;
}
.templateEditArea h2{
	font-size: 8pt;
	font-weight: 100;
	margin: 0 0 7px 0;
}
.templateEditArea .tmplateList{
	width: 100%;
	height: 340px;
	display: flex;
	flex-direction: initial;
	flex-wrap: wrap;
	gap: 5px;
}
.templateEditArea [class^="btn_templateSelect"]{
	display: flex;
	align-items: center;
	position: relative;
	width: 200px;
	padding: 7px 7px 7px 13px;
	font-size: 10px;
	color: #fff;
}
[id^="templateName_editMode_"] {
	display: inline-block;
	width: 140px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.tempalteSymbol{
	display: inline-block;
	width: 12px;
	margin: 0 5px 0 0;
	text-align: center;
}
.templateEditBtnArea{
	position: absolute;
	bottom: 10px;
	width: 362px;
	display: flex;
	flex-direction: initial;
	justify-content: flex-end;
	gap: 5px;
	height: 30px;
}
.templateEditBtnArea [class^="btn_"]{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 1px solid #717071;
	font-size: 11px;
	padding: 5px;
}


.templateEditBtnArea .btn_save{
	border: 0;
	background-color:#62b9c5;
	color: #fff;
}



/* テンプレート説明画像 */
.templateExplanationImg{
	display: none;
	position: absolute;
	top: 60px;
	left: 420px;
	width: calc(100% - 800px);
	padding: 10px 10px 10px 10px;
	height: calc(100% - 60px);
	background: #f1f1f1;
	border-right: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	z-index: 200;
}
.templateExplanationImg h2{
	font-size: 8pt;
	font-weight: 100;
	margin: 0 0 7px 0;
}
[id^="templateExplanationImg_"]{
	display: none;
	height: 96%;
}


/* テンプレートスライダーエリア */
section.templateSliderArea {
	display: none;
	position: fixed;
	top: 60px;
	right: 0;
	width: 380px;
	height: calc(100% - 60px);
	padding: 10px;
	background: #f1f1f1;
	z-index: 200;
}
[id^="tmplateSlider_"]{
	display: none;
}
.bar_holizontal {
	padding: 20px 10px 0 10px;
	width: 255px;
	font-size: 10px;
	height: 58px;
}

[id^="slider_templateEdit_single_"] .noUi-connects{
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}

.templateSliderControllUnit {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.sliderControll {
	font-size: 10px;
	width: 20px;
	height: 40px;
	flex-direction: column;
}
.sliderControll img {
	width: 8px;
	margin: 2px;
}

.templateSliderUnit {
	position: relative;
	margin: 0 auto 3px 0;
}
.templateSliderUnit label {
	font-size: 12px;
}
.templateSliderUnit input {
	margin: 0 7px 0 0;
}

.templateSliderMemoryUnit{
	position:relative;
}
.templateSliderMemory {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 28px;
	left: -88px;
	font-size: 4px;
	color: #aaa;
	width: 432px;
	transform: scale(0.5);
	transform-origin: center;
}

[id^="slider_templateEdit_brightBalance_range"] .noUi-connects{
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
}
[id^="slider_templateEdit_toneCheck_single_"] .noUi-connects{
	background: linear-gradient(270deg ,rgba(184,221,240,1) 0%, rgba(255,255,255,1) 45%,rgba(255,255,255,1) 55%, rgba(234,184,37,1) 100%);
}

[id^="sliderBlinder_"] {
	display: block;;
	position: absolute;
	top: 0px;
	left: -5px;
	width: 103%;
	height: 100%;
	background: rgb(241 241 241 / 80%);
	z-index: 100;
}



#ctrlBright_EditArea{display: none;}
#ctrlTone_EditArea{display: none;}
#ctrlOnOff_EditArea{display: none;}



/* unit自体の方向 */
.unitDirection_1{
	display: flex;
	flex-direction: column;
}
.unitDirection_2{
	display: flex;
	flex-direction: initial;
	align-items: center;
}
.unitDirection_3{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}
.unitDirection_4{
	display: flex;
	flex-direction: column-reverse;
}

/*r
span.deviceIcon {
	font-weight: bold;
	font-size: 19px;
	color: #62b9c5;
}
*/

.imgMask_dl_1{
	display: flex;
	-webkit-mask-image: url(../img/device_icon_mask/dl_1.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 32px;
	background-color: #62b9c5;
}
.imgMask_dl_2{
	display: flex;
	-webkit-mask-image: url(../img/device_icon_mask/dl_2.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 32px;
	background-color: #62b9c5;
}
.imgMask_sl_1{
	display: flex;
	-webkit-mask-image: url(../img/device_icon_mask/sl_1.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 32px;
	background-color: #62b9c5;
}
.imgMask_pl__1{
	display: flex;
	-webkit-mask-image: url(../img/device_icon_mask/pl_1.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 32px;
	background-color: #62b9c5;
}
.imgMask_fd_1{
	display: flex;
	-webkit-mask-image: url(../img/device_icon_mask/dl_1.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 32px;
	background-color: #62b9c5;
}


.deviceIcon {
	height: 30px;
	width: 30px;
	margin: auto;
}

.iconSizeY {
	height: 100%;
	width: 8px;
}
.iconSizeX {
	width: 100%;
	height: 8px;
}

/* ポップアップ時の背景 */
.bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.7);
	z-index: 1000;
}
#bg2{
	z-index: 1400;
}

.windowMainArea{
	padding: 20px;
}

/* ウィンドウ共通 */
.windowBase{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding-bottom: 30px;
	width: 500px;
	height: fit-content;
	background: #fff;
	border-radius: 10px;
	z-index: 1100;
}

.windowBase h2{
	font-size: 14px;
	font-weight: 300;
	border-bottom: 1px solid #7e7e7e;
	text-align: center;
	width: 100%;
	color: #333;
}

.windowInputText {
	display: block;
	margin: 30px auto 10px auto;
	border: 1px solid #dddddd;
	border-radius: 5px;
	width: 300px;
}

#windowRenameScene{
	display: none;
}
#windowSceneDeleteConfirm{
	z-index: 2000;
}

.windowBase .cancelBtn{
	position: absolute;
	width: 50%;
	margin: 0;
	padding: 5px;
	background-color: #ddd;
	border: 0px;
	bottom: 0;
	left: 0;
	font-size: 12px;
	border-radius: 0 0 0 10px;
}

.windowBase .saveBtn{
	position: absolute;
	width: 50%;
	margin: 0;
	padding: 5px;
	background-color: #7e7e7e;
	color: #fff;
	border: 0px;
	bottom: 0;
	right: 0;
	font-size: 12px;
	border-radius: 0 0 10px 0;
}

.integrationBtn {
	position: absolute;
	width: 50%;
	margin: 0;
	padding: 5px;
	background-color: #7e7e7e;
	border: 0px;
	bottom: 0;
	right: 0;
	font-size: 12px;
	border-radius: 0 0 10px 0;
	color: #fff;
}


/* 完了ウィンドウ */
.windowBaseDone{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 300px;
	height: 90px;
	background: #fff;
	border-radius: 10px;
	z-index: 1100;
	text-align: center;
}

.windowBaseDone .done_closeBtn{
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 5px;
	background-color: #ddd;
	border: 0px;
	bottom: 0;
	left: 0;
	font-size: 12px;
	border-radius: 0 0 10px 10px;
}

.mainText {
	font-size: 14px;
	margin: 20px 10px 0 10px;
	text-align: center;
}

/* シーン読み出し */
.loadTemplateRec {
	display: flex;
	padding: 3px;
	border-bottom: 1px solid #f1f1f1;
	padding: 8px 0;
	justify-content: space-around;
	align-items: center;
}
.loadTemplateName {
	width: 310px;
}
.loadTemplateDate {
	letter-spacing: -1px;
}
[id^="loadTemplateList_"] {
	display: none;
}
.templateLoadList{
	font-size: 10px;
	overflow-y: scroll;
	height: 250px;
	padding: 5px;
}

/* 色温度統合ウィンドウ */
.windowBase p{
	font-size: 13px;
	text-align: center;
	margin: 20px 0 0 0;
}
.windowBaseDone .integrationBtn{
	position: absolute;
	width: 50%;
	margin: 0;
	padding: 5px;
	background-color: #7e7e7e;
	color: #fff;
	border: 0px;
	bottom: 0;
	right: 0;
	font-size: 12px;
	border-radius: 0 0 10px 0;
}

#controllerModeBalanceByEdit{
	visibility: hidden;
}
#controllerModeToneByEdit{
	visibility: hidden;
}

#windowRenameTemplate{
	display: none;
}
#windowRenameTemplateDone{
	display: none;
}
#windowBrightIntegration{
	display: none;
}
#windowToneIntegration{
	display: none;
}
#windowMakeGroup{
	display: none;
}
#windowDelGroup{
	display: none;
}

.delGroupNameArea {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	margin: 20px auto 0 auto;
}

/* シーン読み出し、書き出し、削除 */
#displaySceneFile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: fit-content;
	height: fit-content;
	z-index: 1000;
}
#displaySceneFile{
	display: none;
}
button.sceneFileBtn {
	background: #676767;
	border: none;
	color: #fff;
	font-size: 12px;
	padding: 5px;
	width: 300px;
	border-radius: 50px;
}
button.sceneFileCloseBtn {
	border: none;
	background: none;
	color: #fff;
	font-size: 12px;
	padding: 5px;
}

/* シーン読み出し */
#windowLoadScene{
	display: none;
}
.loadSceneRec {
	display: flex;
	padding: 3px;
	border-bottom: 1px solid #f1f1f1;
	padding: 8px 0;
	justify-content: space-around;
	align-items: center;
}
.loadSceneName {
	width: 310px;
}
.loadSceneDate {
	letter-spacing: -1px;
}
.sceneList{
	font-size: 10px;
	overflow-y: scroll;
	height: 250px;
	padding: 5px;
}

#windowLoadSceneDone{
	display: none;
}

/* シーン書き出し*/
#windowWriteScene{
	display: none;
}
#windowWriteSceneDone{
	display: none;
}

/* シーン削除*/
#windowSceneDelete{
	display: none;
	height: 340px;
}
#windowSceneDeleteDone{
	display: none;
}






/* 10.5inch */
@media screen and (min-width: 1112px) {
/*
	.templateExplanationImg {
		width: 312px;
	}
*/
}



#testBtn {
	width: 23px;
	height: 21px;
	position: absolute;
	right: 110px;
}
#deviceDebugBtn {
	width: 14px;
	height: 21px;
	position: absolute;
	right: 82px;
}
#spanDebugBtn {
	width: 14px;
	height: 21px;
	position: absolute;
	right: 54px;
}

.dataBaloon {
	position: absolute;
	display: none;
	flex-wrap: wrap;
	top: -64px;
	width: 100px;
	height: 60px;
	border-radius: 5px;
	border: 1px solid #f1f1f1;
	background: #fff;
	box-shadow: 0 0 3px rgb(0 0 0 / 20%);
	z-index: 100;
}
.dataBaloon::after {
	content: "";
	width: 0;
	height: 0;
	border: 10px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	bottom: -18px;
	left: 0;
	right: 0;
	margin: auto;
}
.dataBaloon div {
	display: flex;
	align-items: center;
}
.baloonLargeTitle {
	justify-content: center;
	background: #333;
	width: 100%;
	border-radius: 4px 4px 0 0;
	font-size: 12px;
	color: #fff;
}
.baloonMiniTitle {
	justify-content: flex-end;
	font-size: 11px;
	font-weight: bolder;
	width: 64px;
	padding: 0 3px;
}
.dataBaloon .data{
	width: 34px;
	justify-content: center;
}





#deviceDataDebugWindow, #spanDataDebugWindow{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	z-index: 100;
	background-color: #00000030;
	backdrop-filter: blur(4px);
}

.dataDebug{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	z-index: 100;
	color: #00d900;
	background-color: rgb(0 0 0 / 60%);
	backdrop-filter: blur(1px);
}

.debugWindowleft{
	border-right: 1px solid #00d900;
}

.debugWindowRight{
	left: 50%;
}

.dataDebug h2 {
	position: sticky;
	top: 0;
	text-align: center;
	font-size: 10px;
	padding: 5px;
	border-bottom: 1px solid #00d900;
	background: #000000cc;
	z-index: 20;
}
.debug_text_body{
	width: 100%;
	height: 100%;
	font-size: 11px;
}

.debugCloseBtn {
	position: sticky;
	top: 2px;
	right: 2px;
	left: 98%;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid #00d901;
	z-index: 110;
	color: #00d901;
}

.debug_text_body h3{
	position: sticky;
	top: 26px;
	background: #000000cc;
	padding: 0px 0 1px 4px;
	color: #02d802;
	font-size: 10px;
	font-weight: bold;
	z-index: 10;
}

.debug_text_body ul{
}

.debug_text_body li{
	font-size: 9px;
	border: 0;
	list-style-type: none;
}

.debug_text_body .debugDataSet {
	display: flex;
}

.debugDataSet {
	border-bottom: 1px solid #15d40738;
}

.debugDataSet .data_id {
	width: 120px;
}
.debugDataSet .data_name {
	width: 130px;
	padding-left: 5px;
}
.debugDataSet .data_bright {
	width: 60px;
	text-align: right;
}
.debugDataSet .data_tone {
	width: 60px;
	text-align: right;
}
.debugDataSet .data_address {
	padding-left: 40px;
	width: 170px;
}



/* テストとして非表示 */
/*
.templateArea .tmplateList_7{
	display: none;
}
.templateEditArea .tmplateList_7{
	display: none;
}
#templateExplanationImg_7{
 display:none;
}
.tmplateSlider_7{
	display: none;
}
*/