@charset "UTF-8";


/* ステージ ---------------------------------------*/

.frontview{
	width:calc(33.333% - 1px);
	background: #fff;
	margin-left: 2px;
	position: relative;
}

.frontview-stage{
	position: relative;
	width:100%;
	height:390px;
	overflow: hidden;
}

.frontview-stage-alert{
	position: absolute;
	left:20px;
	bottom:10px;
	font-size:10px;
	line-height: 1.0;
	font-weight: bold;
	color:#bbb;
	z-index:10;
}



/* レンズシフト（投写可能エリア） ---------------------------------------*/

.frontview-possible{
	position: absolute;
	content:'';
	background: #D8ECFB;
}

.frontview-possible-draggable{
	position: absolute;
	content:'';
}


/* 部屋 ---------------------------------------*/

.frontview-room{
	background: #FDF2D0;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}


/* 部屋 ---------------------------------------*/

.frontview-movable{
/*	border:2px dashed #0000ff; */
	position:absolute;
	left:-8.5px;
	top:-8.5px;
}

/* スクリーン固定時のシフト稼働エリア ---------------------------------------*/

.frontview-outer-wrapper{
	content:'';
	position:absolute;
	left:0;
	top:0;
	overflow: hidden;
}


.frontview-outer-wrapper > div{
	content:'';
	position: absolute;
}

.frontview-outer{
	content:'';
	display: block;
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}

.frontview-outer-wrapper .frontview-kerare{}


#outercorner1,
#outercorner2,
#outercorner3,
#outercorner4{
	position: absolute;
}


/* ケラレ ---------------------------------------*/

.frontview-kerare-wrapper{
	content:'';
	position:absolute;
	left:0;
	top:0;
	overflow: hidden;
}


.frontview-kerare-wrapper > div{
	content:'';
	position: absolute;
}

.frontview-kerare{
	content:'';
	display: block;
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}

.frontview-kerare-wrapper .frontview-kerare{}

.frontview-kerare#kerare_01{
	background: url(../img/kerare/01.png?20260323) no-repeat center center;
	background-size: 100%;
}

.frontview-kerare#kerare_02{
	background: url(../img/kerare/02.png?20260323) no-repeat center center;
	background-size: 105%;
}

.frontview-kerare#kerare_03{
	background: url(../img/kerare/03.png?20260323) no-repeat center center;
	background-size: 130%;
}

.frontview-kerare#kerare_04{
	background: url(../img/kerare/04.png?20260323) no-repeat center center;
	background-size: 100%;
}

.frontview-kerare#kerare_05{
	background: url(../img/kerare/05.png?20260323) no-repeat center center;
	background-size: 100%;
}

.frontview-kerare#kerare_06{
	background: url(../img/kerare/06.png?20260323) no-repeat center center;
	background-size: 150%;
}

.frontview-kerare#kerare_07{
	background: url(../img/kerare/07.png?20260323) no-repeat center center;
	background-size: 130%;
}

.frontview-kerare#kerare_08{
	background: url(../img/kerare/08.png?20260323) no-repeat center center;
	background-size: 100%;
}

.frontview-kerare#kerare_09{
	background: url(../img/kerare/09.png?20260323) no-repeat center center;
	background-size: 100%;
}

.frontview-kerare#kerare_10{
	background: url(../img/kerare/10.png?20260323) no-repeat center center;
	background-size: 150%;
}

.frontview-kerare#kerare_11{
	background: url(../img/kerare/11.png?20260323) no-repeat center center;
	background-size: 105%;
}

.frontview-kerare.updown{
	transform:rotate(180deg);
}

#corner1,
#corner2,
#corner3,
#corner4{
	position: absolute;
}


/* 投写エリア ---------------------------------------*/

.frontview-light{
	background: rgba(255,255,255,0.5);
	position:absolute;
	left:0;
	top:0;
	box-sizing:border-box;
	border:2px solid #91c8ff;
}

.frontview-light.on{border-color: #262DFB;}

.frontview-light.ratio_4_3:after,
.frontview-light.ratio_4_3:before{
	display:block;
	content:'';
	background:#ccc;
	width:calc(100% * 0.08333);
	height:100%;
	position:absolute;
	top:0;
}

.frontview-light.ratio_4_3:after{right:0px;}
.frontview-light.ratio_4_3:before{left:0px;}

.frontview-light.ratio_16_9:after,
.frontview-light.ratio_16_9:before{
	display:block;
	content:'';
	background:#ccc;
	height:calc(100% * 0.05);
	width:100%;
	position:absolute;
	left:0;
}

.frontview-light.ratio_16_9:after{bottom:0px;}
.frontview-light.ratio_16_9:before{top:0px;}

.frontview-light.vertical.ratio_4_3:after,
.frontview-light.vertical.ratio_4_3:before{
	display:block;
	content:'';
	background:#ccc;
	width:100%;
	height:calc(100% * 0.08333);
	position:absolute;
	top:auto;
	left:0;
}

.frontview-light.vertical.ratio_4_3:after{bottom:0px;}
.frontview-light.vertical.ratio_4_3:before{top:0px;}

.frontview-light.vertical.ratio_16_9:after,
.frontview-light.vertical.ratio_16_9:before{
	display:block;
	content:'';
	background:#ccc;
	height:100%;
	width:calc(100% * 0.05);
	position:absolute;
	left:auto;
	top:0;
}

.frontview-light.vertical.ratio_16_9:after{left:0px;}
.frontview-light.vertical.ratio_16_9:before{right:0px;}


/* プロジェクタ座標線 ---------------------------------------*/

.frontview-maschine-line-wrapper{
	border:2px solid #1B242F;
	position:absolute;
	left:0%;
	top:0%;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

.frontview-maschine-line-vertical,
.frontview-maschine-line-horizontal{
	content:'';
	position: absolute;
	background: #C7D3DC;
}

.frontview-maschine-line-vertical{
	height:100%;
	width:1px;
	top:0px;
}

.frontview-maschine-line-horizontal{
	width:100%;
	height:1px;
	top:0px;
}



/* プロジェクタシルエット ---------------------------------------*/

.frontview-maschine{
	content:'';
	display: block;
	position: absolute;
	left:0px;
	top:0px;
	background: #000;
	position:absolute;
	/* transform:translate(-50%,-50%); */
}

.frontview-maschine.maschine_01{
	background: url(../img/frontview_silet_01.png?20260323) no-repeat center center;
	background-size: 100%;
	/* width: 17px;
	height: 17px; */
	/* width: 11.9px;
	height: 11.9px; */
	width: 16.2836px;
	height: 16.2836px;
}

.frontview-maschine.maschine_01.on{background-image: url(../img/frontview_silet_01_on.png?20260323);}


/* ドラッグして動かす透明エリア ---------------------------------------*/

.frontview-draggable{
/*	border:2px dashed #ff0000; */
	position:absolute;
	left:0;
	top:0;
}


/* 部屋のまわりにある計測線 ---------------------------------------*/


.frontview-ruler-left,
.frontview-ruler-top,
.frontview-ruler-right,
.frontview-ruler-bottom1,
.frontview-ruler-bottom2{
	content:'';
	position: absolute;
	background: #5B6A7A;
}

.frontview-ruler-left,
.frontview-ruler-right{
	width:1px;
	height:100%;
	top:0px;
}

.frontview-ruler-left{left:-13px;}
.frontview-ruler-right{right:-13px;}

.frontview-ruler-left:before,
.frontview-ruler-right:before,
.frontview-ruler-left:after,
.frontview-ruler-right:after{
	width:9px;
	height:1px;
	content:'';
	position: absolute;
	background: #5B6A7A;
	left:-4px;
}

.frontview-ruler-left:before,
.frontview-ruler-right:before{top:0px;}

.frontview-ruler-left:after,
.frontview-ruler-right:after{bottom:0px;}


.frontview-ruler-top,
.frontview-ruler-bottom1,
.frontview-ruler-bottom2{
	width:100%;
	height:1px;
	left:0px;
}

.frontview-ruler-top{top:-13px;}
.frontview-ruler-bottom1{bottom:-13px;}
.frontview-ruler-bottom2{bottom:-37px;}

.frontview-ruler-top:before,
.frontview-ruler-bottom1:before,
.frontview-ruler-bottom2:before,
.frontview-ruler-top:after,
.frontview-ruler-bottom1:after,
.frontview-ruler-bottom2:after{
	width:1px;
	height:9px;
	content:'';
	position: absolute;
	background: #5B6A7A;
	top:-4px;
}

.frontview-ruler-top:before,
.frontview-ruler-bottom1:before,
.frontview-ruler-bottom2:before{left:0px;}

.frontview-ruler-top:after,
.frontview-ruler-bottom1:after,
.frontview-ruler-bottom2:after{right:0px;}


/* 部屋のまわりにある目盛線と数値 ---------------------------------------*/

.frontview-scale-left1,
.frontview-scale-left2,
.frontview-scale-left3,
.frontview-scale-top1,
.frontview-scale-top2,
.frontview-scale-right1,
.frontview-scale-right2,
.frontview-scale-bottom1,
.frontview-scale-bottom2,
.frontview-scale-bottom3,
.frontview-scale-bottom4{
	position: absolute;
	line-height: 1.0;
	display:flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	font-size:10px;
	text-align: center;
	white-space: nowrap;
}

.frontview-scale-left1{
	top:0px;
	left:-60px;
	width:48px;
}

.frontview-scale-left2{
	bottom:0px;
	left:-60px;
	width:48px;
}

.frontview-scale-left3{
	left:-60px;
	width:48px;
}

.frontview-scale-right1{
	top:0px;
	right:-60px;
	width:48px;
}

.frontview-scale-right2{
	bottom:0px;
	right:-60px;
	width:48px;
}

.frontview-scale-left1:after,
.frontview-scale-left2:after,
.frontview-scale-right1:after{
	width:9px;
	height:1px;
	content:'';
	position: absolute;
	background: #5B6A7A;
}

.frontview-scale-left1:after{right:-4px;bottom:0px;}
.frontview-scale-left2:after{right:-4px;top:0px;}
.frontview-scale-right1:after{left:-4px;bottom:0px;}

.frontview-scale-top1{
	top:-40px;
	left:0px;
	height:25px;
}

.frontview-scale-top2{
	top:-40px;
	right:0px;
	height:25px;
}

.frontview-scale-bottom1{
	bottom:-52px;
	left:0px;
	width:100%;
	height:10px;
}

.frontview-scale-bottom2{
	bottom:-32px;
	left:0px;
	height:20px;
}

.frontview-scale-bottom3{
	bottom:-32px;
	right:0px;
	height:20px;
}

.frontview-scale-bottom4{
	bottom:-32px;
	height:20px;
}

.frontview-scale-top1:after,
.frontview-scale-bottom2:after,
.frontview-scale-bottom3:after{
	width:1px;
	height:9px;
	content:'';
	position: absolute;
	background: #5B6A7A;
}

.frontview-scale-top1:after{
	right:0px;
	bottom:-7px;
}

.frontview-scale-bottom2:after{
	right:0px;
	top:-4px;
}

.frontview-scale-bottom3:after{
	left:0px;
	top:-4px;
}


/* レンズシフト ---------------------------------------*/

.renzshift-title{
	position: absolute;
	right:330px;
	top:50px;
	font-size:10px;
	border-right:1px solid #bbb;
	line-height: 1.0;
	padding:5px 10px 3px 0;
}

.renzshift-mode{
	position: absolute;
	right:160px;
	top:50px;
	font-size:10px;
}
.renzshift-mode p{
	float: left;
	line-height: 1.0;
	padding-top: 5px;
	margin-right: 5px;
}

.editswitch.editswitch-renzshift{
	width:110px;
	display:flex;
}

.editswitch.editswitch-renzshift .editswitch-item{
	font-size:11px;
	width:100%;
}

.renzshift-reset{
	position: absolute;
	right:20px;
	top:50px;
	font-size:10px;
}

.renzshift-reset span{
	display: inline-block;
	line-height: 1.0;
	font-size:10px;
	color:#fff;
	padding:5px 8px;
	border-radius:4px;
	cursor:pointer;
    background:#E5596A;
    box-shadow:0px 2px 0px rgba(0,0,0,0.8);
}

.renzshift-v{
	position:absolute;
	right: 10px;
	top: 50%;
	transform: translate(0,-50%);
	width: 45px;
	line-height: 2.5;
	font-size:10px;
	font-weight:bold;
}

.renzshift-h{
	position:absolute;
	left: 0px;
	bottom: 30px;
	width: 100%;
	line-height: 1.0;
	font-size:10px;
	font-weight:bold;
	text-align:center;
}


/* 投写できません ---------------------------------------*/

.frontview-stage .disabled{display: none;}
.frontview-stage .disabled{display: none;}
.frontview-stage.disabled .disabled{
	display: block;
	position:absolute;
	left:0%;
	top:50%;
	width:100%;
	text-align: center;
	transform:translate(0%,-50%);
	color:#fff;
	font-size:12px;
}

.frontview-stage.disabled .frontview-maschine-line-wrapper{background: #62646A;}

.frontview-stage.disabled .frontview-maschine-line-vertical,
.frontview-stage.disabled .frontview-maschine-line-horizontal,
.frontview-stage.disabled .frontview-maschine{display: none;}

/* ■■■ ---------------------------------------*/