@charset "utf-8";

/*----------------------------
	reset
----------------------------*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section { 
  display:block;
}
body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	background: #000;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 100%;
}

/*----------------------------
	画像用レイヤー	
----------------------------*/
.image {
	display: block;
	max-width: 100%;
	height: auto;
	/*margin: 0 auto;*/
	margin: 0;
}

#imgContainer {
	transform-style:flat;
	/*perspective: none;*/
}

#base {
	position: absolute;
	top: 50%;
	z-index: 0;
	filter: blur(3px);
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
	/*display: none;*/
}

#mask500 {
	position: absolute;
	top: 50%;
	z-index: 10;
	-webkit-mask-image: url(images/case1_mask_5.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#mask300 {
	position: absolute;
	top: 50%;
	z-index: 20;
	-webkit-mask-image: url(images/case1_mask_4.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#mask100 {
	position: absolute;
	top: 50%;
	z-index: 30;
	-webkit-mask-image: url(images/case1_mask_3.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#mask70 {
	position: absolute;
	top: 50%;
	z-index: 40;
	-webkit-mask-image: url(images/case1_mask_2.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#mask50 {
	position: absolute;
	top: 50%;
	z-index: 50;
	-webkit-mask-image: url(images/case1_mask_1.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#mask40 {
	position: absolute;
	top: 50%;
	z-index: 52;
	-webkit-mask-image: url(images/case5_mask_6.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
	display: none;
}

#mask30 {
	position: absolute;
	top: 50%;
	z-index: 60;
	-webkit-mask-image: url(images/case4_mask_0.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#maskHaloGlare {
	position: absolute;
	top: 50%;
	z-index: 55;
	-webkit-mask-image: url(images/haloGlare_mask.png);
	-webkit-mask-mode: luminance;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100%;
  transform: translateY(-50%) translateZ(0);
}

#testHaloGlare {
	position: absolute;
	top: 50%;
	z-index: 55;
  transform: translateY(-50%) translateZ(0);
}

#contrast {
	position: absolute;
	top: 50%;
	z-index: 70;
	opacity: 0;
 	transform: translateY(-50%) translateZ(0);
  /*transform: translateZ(0);*/
}

#depth_1,
#depth_3,
#depth_4,
#depth_5 {
	position: absolute;
	top: 50%;
	z-index: 80;
 	transform: translateY(-50%) translateZ(0);
}


#glare_cockpit {
	position: absolute;
	display: none;
}

#case5Divide {
	position: absolute;
	top: 50%;
	z-index: 75;
  transform: translateY(-50%) translateZ(0);
	display: none;
}

#forCafe {
	display: none;
}

.mugen {
	font-weight: bold;
	font-size: 28px;
	/*line-height: 35px;*/
	background: #D98484;
	display: table-cell;
  vertical-align: middle;
}

/*----------------------------
	UI
----------------------------*/
#uiContainer {
	position: absolute;
	z-index: 100;
	right: 0;
	top: 50%;
  transform: translateY(-50%);
	width: 249px;
	height: 574px;
	overflow: hidden;
	display: block;
	transition-property: right, display;
  transition-duration: 0.4s;
}

#uiContainer>.leftBox {
	float: left;
	width: 18px;
	height: 100%;
	/*background: rgba(255,255,255,0.80)*/
	background: url(imgs/arrow-right.png) left 50% no-repeat, rgba(255,255,255,0.80);
	background-size: 17px, 39px;
	cursor: pointer;
}

#uiContainer>.rightBox {
	float: right;
	width: 231px;
	height: 100%;
	background: rgba(255,255,255,0.60);
	padding: 22px 21px;
}

.rightBox select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 24px;
	font-size: 12px;
	padding: 2px 4px;
	border: 0px;
	border-radius: 0px;
	background: url(imgs/arrow-down.png) right top no-repeat, #fff;
	/*background: #fff; */
	background-size: 24px, 24px;
	cursor: pointer;
}

.rightBox select:hover {
	background: url(imgs/arrow-down-on.png) right top no-repeat, #fff;
	background-size: 24px, 24px;
}

#graphIcon {
	position: absolute;
	cursor: pointer;
}

.haloGlareGrp {
	display: none;
}

.visionBtn {
	width: 55px;
	height: 35px;
	/*background: rgba(0,120,213,1.00);*/
	background-image: url(imgs/btn-s.png);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 12px;
	line-height: 35px;
	text-align: center;
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 4px;
}

.infinity {
	background-image: url(imgs/btn-infinity.png);
	background-size: cover;
}

.over500-1 {
	font-weight: bold;
	line-height: 1.0;
	position: absolute;
	text-align: center;
	width: 100%;
	top: 5px;
}
.over500-2 {
	font-weight: bold;
	line-height: 1.0;
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 4px;
}

.cataractBtn,
.ransiBtn,
.contrastBtn,
.saveBtn,
.haneiBtn,
.ikkatuBtn,
.ikkatuDoBtn,
.haloGlareBtn {
	width: 173px;
	height: 35px;
	/*background: rgba(0,120,213,1.00);*/
	background-image: url(imgs/btn-l.png);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	display: block;
	cursor: pointer;
}

.slotList,
.saveList {
	overflow: hidden;
}

.slotList>li {
	width: 100%;
	height: 35px;
	background: rgba(0,120,213,1.00);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	display: block;
	cursor: pointer;
	margin-bottom: 12px;
	overflow: hidden;
}

.saveList>li {
	width: 100%;
	height: 35px;
	font-weight: bold;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	display: block;
	margin-bottom: 12px;
}


.leftMergin4 {
	margin-left: 4px;
}

.leftMergin5 {
	margin-left: 5px;
}

.uiTitle {
	font-size: 16px;
	color: rgba(0,60,106,1.00);
	font-weight: bold;
}

.slotList>li:hover,
.radioGroup label:hover,
span#saveSet:hover,
span#saveCancel:hover {
	background: rgba(104,189,255,1.00);
	color: rgba(0,60,106,1.00);
}

.visionBtn:hover {
	background-image: url(imgs/btn-s-on.png);
	color: rgba(0,60,106,1.00);	
}

.infinity:hover {
	background-image: url(imgs/btn-infinity-on.png);
	background-size: cover;
}

.ransiBtn:hover,
.haloGlareBtn:hover {
	background-image: url(imgs/btn-m-on.png);
	color: rgba(0,60,106,1.00);	
}

.cataractBtn:hover,
.contrastBtn:hover,
.saveBtn:hover,
.haneiBtn:hover,
.ikkatuBtn:hover,
.ikkatuDoBtn:hover {
	background-image: url(imgs/btn-l-on.png);
	color: rgba(0,60,106,1.00);		
}

.ikkatuDoBtn {
	margin: 24px auto;
}

.haneiDialog h3,
.saveDialog h3,
.ikkatuDialog h3 {
	font-size: 16px;
	font-weight: bold;
	color: rgba(0,60,106,1.00);
	text-align: center;
	margin-top: 2px;
	margin-bottom: 16px;
}


.btnDisable:hover {
	background: rgba(81,118,146,1.00);
	color: rgba(142,166,184,1.00);
}

hr {
	height: 0;
	padding: 0;
	border: 0;
	border-top: 2px dotted rgba(0,60,106,1.00);
	margin: 15px 0;
}

.uiBox {
	background: #fff;
	padding: 8px;
	overflow: hidden;
}

.btnDisable {
	background: rgba(81,118,146,1.00);
	color: rgba(142,166,184,1.00);
	cursor: not-allowed;
}

.notes {
	position: absolute;
	z-index: 99;
	right: 10px;
	bottom: 4px;
	text-align: left;
	color: #FFF;
	font-size: 11px;
	line-height: 1.2;
}

#depthBtn {
	position: absolute;
	z-index: 81;
	top: 10px;
	left: 10px;
	width: 90px;
	height: 30px;
	text-align: center;
	color: #FFF;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	padding: 9px;
	/*background: rgba(0,0,0,0.7);*/
	background: rgba(60,60,60,0.8);
	cursor: pointer;
}

#depthBtn:hover {
	background: rgba(7,98,210,0.85);
}

#cafeZoomBtn {
	position: absolute;
	z-index: 82;
	top: 50px;
	left: 0;
	cursor: pointer;
	display: none;
}

.cafe_val {
	position: absolute;
	z-index: 83;
	color: #FFF;
	font-size: 58px;
	line-height: 88px;
	width: 264px;
	height: 88px;
	text-align: center;
	overflow: hidden;
}

.lens7 {
	display: none;
}

/*----------------------------
	modal window
----------------------------*/
.modal {
	display: none;
}

.cataractSlider,
.visionSlider,
.ransiSlider,
.haloGlareSliderV4,
.haloGlareSlider,
.contrastSlider {
	position: absolute;
	z-index: 110;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/*width: 628px;*/
	width: 660px;
	height: 174px;
	/*border: 2px solid #A8A8A8;*/
	text-align: center;
	background: rgba(255,255,255,1.0);
}

.graphWindow {
	position: absolute;
	z-index: 110;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 500px;
	height: 375px;
	text-align: center;
	background: rgba(255,255,255,1.0);
}

.haneiDialog,
.saveDialog {
	position:absolute;
	z-index: 110;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 16px;
	width: 320px;
/*	height: 482px;*/
	height: 248px;
	text-align: center;
	background: rgba(255,255,255,1.0);
	display: none;
}

.ikkatuDialog {
	position:absolute;
	z-index: 110;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 16px;
	/*width: 984px;*/
	width: 1024px;
	height: 618px;
	text-align: center;
	background: rgba(255,255,255,1.0);
	display: none;
}

.ikkatuDialog table {
	margin: 0 auto;
	width: 100%;
}


.ikkatuDialog table th,
.ikkatuDialog table td.tdName {
	background: rgba(0,120,213,1.00);
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	padding: 1px;
}

/*cont fix*/
.ikkatuDialog table td.tdName {
	min-width: 130px;
}

.ikkatuDialog table tr:nth-child(even) {
	background: #CFD5EA;	
}

.ikkatuDialog table tr:nth-child(odd) {
	background:#E9EBF5;
}

/*cont fix*/
.ikkatuTextBox,
.ikkatuTextBoxR,
.ikkatuTextBoxC,
.ikkatuTextBoxHG1,
.ikkatuTextBoxHG2,
.ikkatuTextBoxHGVal{
	-webkit-appearance: none;
	/*width: 54px;*/
	width: 47px;
	height: 46px;
	border: none;
	color: #000;
	/*font-size: 16px;*/
	font-size: 14px;
	text-align: center;
	line-height: 46px;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: rgba(0,0,0,0.00);
}

.ikkatuTextBoxR,
.ikkatuTextBoxHG1,
.ikkatuTextBoxHG2,
.narrow {
	/*width: 40px;*/
	width: 38px;
}

.hgTitle {
	font-size: 10px !important;
}

.textBox {
	-webkit-appearance: none;
	width: 288px;
	height: 35px;
	border: none;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 33px;
	background: rgba(0,120,213,1.00);
	padding: 0;
	margin: 0;
	border-radius: 0;
	cursor:pointer;
}

.textBox:focus {
	outline: 0;
	/*background: rgba(0,120,213,1.00);*/
	cursor: text;
	background: rgba(104,189,255,1.00);
	color: rgba(0,60,106,1.00);
}

input[type=range] {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.visionSlider > input[type=range] {
	-webkit-appearance: none;
	background: rgba(53,53,53,1.0);
	height:2px;
	width: 585px;
	/*margin-left: 16px;*/
}

.contrastSlider > input[type=range] {
	-webkit-appearance: none;
	background: rgba(53,53,53,1.0);
	height:2px;
	width: 585px;
	margin-left: -2px;
}

.cataractSlider > input[type=range],
.ransiSlider > input[type=range],
.haloGlareSlider > input[type=range] {
	-webkit-appearance: none;
	background: rgba(53,53,53,1.0);
	height:2px;
	width: 587px;
	margin-left: 2px;
}


input[type=range]::-webkit-slider-thumb {
	-webkit-appearance:none;
	cursor:pointer;
	position:relative;
	z-index:115;
	border:none;
	width:18px;
	height:38px;
	/*background-color:rgba(0,120,213,1.00);*/
	background-image: url(imgs/slider-knob.png);
	/*border-radius:50%;*/
}

input[type=range]:focus,
input[type=range]:focus::-webkit-slider-thumb,
input[type=range]:active,
input[type=range]:active::-webkit-slider-thumb {
	cursor:ew-resize;
	outline:none;
}

div.windowTitle {
	position: relative;
	background: rgba(0,120,213,1.00);
	padding: 8px;
	color: white;
}

.windowTitle>p,
span.cm {
	font-size: 14px;
	font-weight: bold;	
}

span#saveSet,
span#saveCancel {
	width: 84px;
	height: 35px;
	background: rgba(0,120,213,1.00);
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14px;
	line-height: 35px;
	text-align: center;
	display: inline-block;
	cursor: pointer;	
}

.saveDialog>p {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(0,68,120,1.00);
	font-weight: bold;
}

.closeBtn {
	position: absolute;
	right: 5px;
	top: 4px;
	bottom: 4px;
	background: #EEE;
	border: 1px solid #DDD;
	color: #333;
	font-weight: bold;
	cursor: pointer;
	margin: 0;
}

.closeBtn2 {
	position: absolute;
	right: 0px;
	top: -4px;
	background: #EEE;
	border: 1px solid #DDD;
	color: #333;
	font-weight: bold;
	cursor: pointer;
	margin: 0;
	height: 22px;
}

.debugBox {
	position: absolute;
	right: 5px;
	top: 37px;
	font-size: 12px;
	color: #000;
}

.alignBox {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 4px;
	top: 0;
	bottom: 0;
}
.alignBox>span {
	margin: 0 0 0 10px;
	display: inline-block;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	line-height: 30px;
	cursor: pointer;
}
.alignBox>span:first-child {
	margin: 0 0 0 4px;
}

.closeBtn:hover,
.closeBtn2:hover {
	background: #FFF;
}

.statusContainer {
	position: absolute;
	bottom: 0;
	left: -985px;
	z-index: 105;
	overflow: hidden;
	/*width: 676px;*/
	width: 1003px;
	/*height: 82px;*/
	height: 62px;
	margin: 0;
	padding: 0;
	transition-property: left, display;
  transition-duration: 0.4s;
	background: rgba(0,0,0,0.85);
}

#statusBox {
	/*width: 558px;*/
	width: 658px;
	/*height: 82px;*/
	height: 62px;
	float: left;
	/*background: rgba(0,0,0,0.85);*/
	color: #FFF;
	font-weight: bold;
	line-height: 1.5;
}

.statusSwitch {
	float:right;
	width: 18px;
	height: 62px;
	background: url(imgs/arrow-right2.png) right 50% no-repeat, rgba(60,60,60,0.80);
	background-size: 17px, 39px;
	cursor: pointer;
}

th.thRight {
	text-align: right;
}

th.thLeft {
	text-align: left;
}

#canvas1 {
	/*margin-right: 4px;*/
}

.contrastVal,
.gsizeVal,
.gBrightVal,
.hsizeVal,
.hBrightVal,
.ssizeVal,
.sBrightVal,
.ransiVal {
	margin-left: 3px;
	font-size: 12px;
}

.hWidthVal,
.hNumVal,
.hSpaceVal,
.hDecayVal,
.hazeSizeVal,
.hazeBrightVal {
	font-size: 12px;
}


/*
#statusHaro {
	position: absolute;
	left: -123px;
	bottom: 6px;
	z-index: 106;
	line-height: 1.5;
	color: #FFF;
	transition-property: left;
  transition-duration: 0.4s;
}
*/

/*----------------------------
	ラジオボタン
----------------------------*/
.radioGroup {
	width: 200px;
	margin: 20px auto;
	overflow: hidden;
	text-align: center;
}

.radioGroup input {
	display: none;
}
.radioGroup label {
	display: inline-block;
	cursor: pointer;
	width: 24px;
	height: 24px;
	margin: 0 0 0 20px;
	padding: 0;
	background: rgba(0,120,213,1.00);
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 24px;
}
.radioGroup label:first-of-type {
	margin-left: 0;
}
.radioGroup label:last-of-type {
	margin-left: 14px;
}
.radioGroup input[type="radio"]:checked + label {
	background: rgba(104,189,255,1.00);
	color: rgba(0,60,106,1.00);
}


/*----------------------------
	ダイアログ
----------------------------*/
#myDialog,
#myConfirm {
	background: #fff;
	width: 400px;
	height: 150px;
	padding: 20px;
	border: 1px solid #999;
	border-radius: 4px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 125;
	display: none;
}

#myDialog p,
#myConfirm p {
	line-height: 1.5;
	margin: 0 0 20px;
}

#myDialogBtn,
#myConfirmBtn {
	text-align: center;
}

#btnOK, #btnCancel,
#confirmOK, #confirmCancel {
	cursor: pointer;
	width: 88px;
	border: 1px solid #999;
	border-radius: 3px;
	text-align: center;
	font-size: 12px;
	line-height: 28px;
	margin: 4px;
	background: #FFF;
}

#myDialogMask {
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 120;
	display: none;
}

#myDialogMask2 {
	background: rgba(0, 0, 0, 1);
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 120;
	display: none;
}

#myDialog2 {
	background: #fff;
	width: 240px;
	height: 100px;
	padding: 20px;
	border: 1px solid #999;
	border-radius: 4px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 300;
	text-align: center;
	display: none;
}

#myDialog2>p {
	line-height: 2.0;
}

/*----------------------------
	スタート画面
----------------------------*/
#startScreen {
	position: absolute;
	z-index: 200;
	width: 1024px;
	height: 768px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: #000;
	background-position: center center;
	background-image: url(images/title.png);
	background-size: cover;
}

.close-info {
	position: absolute;
	width: 600px;
	height: 215px;
	top: 85px;
	left: 115px;
	text-align: center;
	/* display: none; */
}

.close-info h2 {
	font-size: 16px;
	letter-spacing: 4px;
	font-weight: bold;
	color: #FFF;
	background: #a80a09;
	margin: 0;
	padding: 12px;
	display: inline-block;
}

.close-info p {
	font-size: 14px;
	line-height: 1.5;
	color: #000000;
	margin-top: 12px;
}

.close-info p a {
	font-size: 18px;
	line-height: 2;
	color: #054691;
	text-decoration: none;
}


#title {
	color: #333;
	font-size: 48px;
	font-weight: bold;
	text-align: center;
	position: absolute;
	width: 100%;
	height: 60px;
	line-height: 60px;
	top: 30%;
	left: 0;
	right: 0;
	margin: auto;
	/* display: none; */
}

#startBtn {
	position: absolute;
	width: 296px;
	height: 81px;
	top:395px;
	left: 263px;
	background: #fff;
	opacity: 0;
	cursor: pointer;
	display: none;
}

#management {
	position: absolute;
	width: 190px;
	height: 45px;
	bottom: 114px;
	right: 35px;
	cursor: pointer;
	display: none;
}

#manual {
	position: absolute;
	width: 228px;
	height: 52px;
	top: 599px;
	left: 67px;
	background: #fff;
	opacity: 0;
	display: none;
}

#about {
	position: absolute;
	width: 228px;
	height: 52px;
	top: 660px;
	left: 67px;
	background: #fff;
	opacity: 0;
	display: none;
}

.viztools div {
	position: absolute;
	width: 120px;
	height: 69px;
	left: 861px;
	background: #fff;
	opacity: 0;
	/* display: none;	 */
}

#startBtn:hover,
#manual:hover,
#about:hover,
.viztools div:hover {
	opacity: 0.15;
}


#loadingInfo {
	color: #FFF;
	font-size: 14px;
	text-align: center;
	width: 250px;
	height: 32px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10%;
	margin: auto;
}

#wrapper {
	display: none;
}

@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-ring-css {
  background: none;
  position: relative;
  width: 200px;
  height: 200px;
	margin: auto;
}
.uil-ring-css > div {
  position: absolute;
  display: block;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 80px;
  box-shadow: 0 6px 0 0 #7d7d7d;
  -ms-animation: uil-ring-anim 1s linear infinite;
  -moz-animation: uil-ring-anim 1s linear infinite;
  -webkit-animation: uil-ring-anim 1s linear infinite;
  -o-animation: uil-ring-anim 1s linear infinite;
  animation: uil-ring-anim 1s linear infinite;
}



/*----------------------------
	ハローグレア
----------------------------*/
.glareSprite, .starSprite, .hazeSprite {
	display: none;
	position: absolute;
	z-index: 35;
}

.haloGlareWrapper {
	overflow: hidden;
	margin: 4px 8px 8px 8px;
	padding: 0;
}
.haloGlareLeft {
	float: left;
	overflow: hidden;
}
.haloGlareRight {
	float: right;
	overflow: hidden;
}
.haloGlareWrapper h3 {
	font-size: 12px;
	background:#C9C9C9;
	padding: 3px;
}
.haloGlareWrapper span,
.haloGlareWrapper p {
	font-size: 12px;
}
.haloGlareWrapper input[type=range] {
	-webkit-appearance: none;
	background: rgba(53,53,53,1.0);
	height:2px;
	width: 175px;
	margin: 0;
}
table.haloGlareTable tr td {
	height: 48px;
	vertical-align: middle;
}

.col40 {
	display: none;
}

.haloType {
	cursor: pointer;
}

.forHalo {
	display: none;
}

#haloStatusIcon {
	display: inline-block;
	width: 18px;
	height: 18px;
	position: relative;
	bottom: -3px;
}

#haloStatusIcon img {
	position: absolute;
}


/*----------------------------
	v4.00
----------------------------*/
.kensinGrp {
	position: absolute;
	z-index: 81;	
}

#kensinBtn, #questionBtn, #recBtn, #recBtn2 {
	position: absolute;
	top: 0;
	left: 10px;
	width: 100px;
	height: 36px;
	text-align: center;
	color: #FFF;
	font-size: 16px;
	line-height: 36px;
	font-weight: bold;
	background: rgba(0,120,213,1.00);
	cursor: pointer;
	user-select: none;
}

#kensinBtn {
	top: 42px;
	left: 10px;
	width: 47px;
	height: 36px;
}

#recBtn {
	top: 42px;
	left: 63px;
	width: 47px;
	height: 36px;
}

#recBtn2 {
	top: auto;
	left: auto;
	right: 10px;
	bottom: 10px;
}

#kensinBtn:hover, #questionBtn:hover, #recBtn:hover {
	background: rgba(104,189,255,1.00);
	color: rgba(0,60,106,1.00);
}

.cancelBtn {
	position: absolute;
	bottom: 10px;
	left: 10px;
	width: 82px;
	height: 30px;
	text-align: center;
	color: #FFF;
	font-size: 12px;
	line-height: 30px;
	font-weight: bold;
	background: rgba(0,120,213,1.00);
	cursor: pointer;
	user-select: none;
}


.question {
	position: absolute;
	z-index: 125;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 16px;
	width: 800px;
	height: 500px;
	background: rgba(255,255,255,1.0);
	display: none;
}

.question h1 {
	margin-top: -16px;
	margin-left: -16px;
	margin-right: -16px;
	height: 40px;
	background: rgba(0,120,213,1.00);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

.question p.q_title1 {
	display: block;
	height: 64px;
	color: rgba(0,120,213,1.00);
	font-size: 18px;
	font-weight: bold;
	line-height: 64px;
	text-align: center;	
}

.question p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.question h2 {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding-left: 25px;
	height: 20px;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	background: url("extra/rect.png") left center no-repeat;
}

.question h2 span {
	color: rgba(0,120,213,1.00);
	font-weight: bold;
}

.question ul {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 21px;
	padding-bottom: 21PX;
	border-bottom: 2px dashed #666;
}

.question ul li {
	display: inline-block;
	width: 16%;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

ul.q5 {
	margin-top: 8px;
	padding-bottom: 6px;
}

div.q6 {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	padding-bottom: 24PX;
	border-bottom: 2px dashed #666;
}

div.q6 span {
	margin-left: 20px;
	font-size: 16px;
	font-weight: bold;	
}

div.q6 img {
	vertical-align: middle;
}

#question_6 p {
	width: 85%;
	margin-top: 40px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;	
	font-size: 16px;
	font-weight: bold;
}

input#q_0 {
	width: 350px;
	font-size: 24px;
	font-weight: bold;
	padding: 6px;
	margin-left: 10px;
}

#next_btn_1,#next_btn_2,#next_btn_3,#next_btn_4,#next_btn_5,#next_btn_6 {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.q_1,.q_2,.q_3,.q_4,.q_1_1,.q_2_1,.q_3_1,.q_8,
#next_btn_1,#next_btn_2,#next_btn_3,#next_btn_4,#next_btn_5,#next_btn_6 {
	cursor: pointer;
}

.question_slider {
	position: relative;
	width: 620px;
	height: 85px;
	margin: 10px auto 10px auto;
}
.question_slider>input[type=range] {
	-webkit-appearance: none;
	background: rgba(53,53,53,1.0);
	height:2px;
	width: 602px;
	margin-top: -16px;
	position: absolute;
	top: 50px;
}

.question_slider>img {
	position: absolute;
	left: 10px;
}

.variation_wrapper {
	position: absolute;
	z-index: 125;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 600px;
	height: 430px;
	display: none;
}

.variation_title {
	position: absolute;
	right: 10px;
	top: 0;
	text-align: right;
	font-size: 14px;
	color: #fff;
}
.variation_wrapper li {
	display: inline-block;
	width: 108px;
	height: 24px;
	line-height: 24px;
	margin-right: 3px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: rgb(91,91,91);
	background: rgb(51,51,51);
	cursor: pointer;
	user-select: none;
}

.variation_wrapper li.toggle_on {
	color: rgb(87,87,87);
	background: rgb(230,230,230);
}

.toggle_off {
	color: rgb(91,91,91);
	background: rgb(51,51,51);
}

.variation_box {
	position: absolute;
	border: 4px solid #fff;
	width: 200px;
	height: 200px;
	background: #000;	
}
.variation_1 {
	top: 24px;
	left:0;
}
.variation_2 {
	top: 24px;
	left:197px;
}
.variation_3 {
	top: 24px;
	left:394px;
}
.variation_4 {
	top: 221px;
	left:0;
}
.variation_5 {
	top: 221px;
	left:197px;
}
.variation_6 {
	top: 221px;
	left:394px;
}

.variation_num {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	color: #fff;
	background: #535353;
	font-size: 14px;
	line-height: 16px;
	text-align: center;
}

.kougen {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1px solid #ff0000;
	border-radius: 50%;
	left: 88px;
	top: 88px;
}

.glare_sel {
	position: absolute;
}

.halo_sel_vari {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 21px;
	top: 21px;
}

.star_sel {
	position: absolute;
	width: 180px;
	height: 180px;
	left: 7px;
	top: 7px;
}

.hit_area {
	position: absolute;
	width: 120px;
	height: 120px;
	/*border: 1px solid #ff0000;*/
	left: 38px;
	top: 38px;
	cursor: pointer;
}

.customBtn {
	/*width: 173px;*/
	height: 30px;
	/*background: rgba(0,120,213,1.00);*/
	background-image: url(imgs/btn-l.png);
	color: #FFFFFF;
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	display: block;
	margin-top: 16px;
	cursor: pointer;
}

.customBtn:hover {
	background-image: url(imgs/btn-l-on.png);
	color: rgba(0,60,106,1.00);		
}

svg {
	position: absolute;
}

.svg-1, .svg-2 {
	/*border: 1px solid #aaa;*/
	overflow: visible;
	/*filter: blur(1px);*/
	left: 0px;
	top: -250px;
	/*transform: scale(0.5);*/
	opacity: 0.5;
	display: none;
}

.svg-blur {
	box-shadow: 
	0 0 8px rgba(255,255,255,1),
	0 0 8px rgba(255,255,255,1) inset;
}

#hazeSizeSlider::-webkit-slider-thumb,
#hazeBrightnessSlider::-webkit-slider-thumb {
	width:16px;
	height:30px;
}

.color_box {
	position: absolute;
	top: 15px;
	z-index: 81;
	right: 258px;
	text-align: center;
	display: none;
}

.color_box div {
	display: inline-block;
	color: #000;
	width: 24px;
	height: 24px;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	margin-left: 8px;
	cursor: pointer;
}

#color_white {
	background: #fff;
}
#color_red {
	background: #f00;
}
#color_blue {
	background: #00f;
}
#color_green {
	background: #0f0;
}

.plus, .minus {
	vertical-align: middle;
	cursor: pointer;
}

.plus {
	margin-left: 8px;
}

.minus {
	margin-right: 8px;
}

.red_me {
	filter: url(#redish);
	-webkit-filter: url(#redish);
}

.green_me {
	filter: url(#greenish);
	-webkit-filter: url(#greenish);
}

#variationAll {
	position: absolute;
	z-index: 100;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 164px;
	height: 405px;
	overflow: hidden;
	display: none;
}

.scroll {
	overflow: auto;
	white-space: nowrap;
}
.scroll::-webkit-scrollbar {
	height: 10px;
}
.scroll::-webkit-scrollbar-track {
	background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
	background: #BCBCBC;
}