@charset 'UTF-8';
/* ------------------------------------------- CSS Information
 File Name:      default.css
 Author:         Your Name (sue)
 Style Info:     ブラウザスタイルのリセットと基本設定
----------------------------------------------------------- */
/* ------------ Font Style */

html, body, button, h1, h3, h4 {
    font-family:'メイリオ','Meiryo','HG丸ｺﾞｼｯｸM-PRO','Lucida Grande','Hiragino Kaku Gothic Pro',
    			'ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック','MS PGothic','sans-serif';
/*zoom:90%;*/
/*	color:#ff0000;*/
/*本番用*/
/*	background-color:#eaffea;*/
/*デバッグ用*/
/*	background-color:#eae1cf;*/
/*テスト用*/
	background-color:#dda0dd;*/
	}

/*
input[type=button]{
	font-size: 0.9em;padding: 0px 5px;
	}
*/


.wrapper
	{overflow: auto; position: relative;}
.wrapper.size130
	{height: calc(100vh - 130px);}
.wrapper.size170
	{height: calc(100vh - 170px);}
.wrapper.size180
	{height: calc(100vh - 180px);}
.wrapper.size190
	{height: calc(100vh - 190px);}
.wrapper.size200
	{height: calc(100vh - 200px);}
.wrapper.size220
	{height: calc(100vh - 220px);}
.wrapper.size240
	{height: calc(100vh - 240px);}
.wrapper.size250
	{height: calc(100vh - 250px);}
.wrapper.size270
	{height: calc(100vh - 270px);}
.wrapper.size283
	{height: calc(100vh - 283px);}
.wrapper.size300
	{height: calc(100vh - 300px);}
.wrapper.size305
	{height: calc(100vh - 305px);}
.wrapper.size335
	{height: calc(100vh - 335px);}
.wrapper.size350
	{height: calc(100vh - 350px);}
.wrapper.size400
	{height: calc(100vh - 400px);}
.wrapper.size410
	{height: calc(100vh - 410px);}
.wrapper.size465
	{height: calc(100vh - 465px);}
.wrapper.size500
	{height: calc(100vh - 500px);}
.wrapper.size550
	{height: calc(100vh - 550px);}
.wrapper.size600
	{height: calc(100vh - 600px);}
.wrapper.size650
	{height: calc(100vh - 650px);}
.wrapper.size700
	{height: calc(100vh - 700px);}
.wrapper.sizeMax
	{height: calc(100vh);}
/*２分割用*/
.wrapper.size235a
	{height: calc(calc(100vh - 235px)/2);}
*::-ms-backdrop, .wrapper.size235a
	{height: calc((100vh - 235px)/2);} /* IE11 */

.wrapper.size200a
	{height: calc(calc(100vh - 200px)/2);}
*::-ms-backdrop, .wrapper.size200a
	{height: calc((100vh - 200px)/2);} /* IE11 */

.wrapper.size000a
	{height: calc(calc(100vh + 0px)/2);}
*::-ms-backdrop, .wrapper.size000a
	{height: calc((100vh + 0px)/2);} /* IE11 */

.wrapper.size400a
	{height: calc(calc(100vh - 400px)/2);}
*::-ms-backdrop, .wrapper.size400a
	{height: calc((100vh - 400px)/2);} /* IE11 */

.desc
	{margin-bottom: 25px;}
.intro-container
	{position: relative;}
.intro-container .cta
	{margin-bottom: 10px;}
.intro-container .main-demo
	{margin-top: 0px;}
.intro-container .wrapper
	{width: 100%;}

table
	{max-width: none; border-style: none;}
table thead
	{background-color: #eee;}
table.floated
	{background-color: #d5ffd5;}
table.large
	{width: auto;}
table.huge
	{width: 1500px;}

h1.sue1{font-size:12pt;font-weight:bold;padding:3px 5px; background-color:#AAFFFF;}
h1.sue2{font-size:12pt;font-weight:bold;padding:3px 5px; background-color:#FF0000;}
h1.sue3{font-size:12pt;font-weight:bold;padding:3px 5px; background-color:#FFFF00;}
h3.sue1{font-weight:bold;margin:0px;padding:0px; color:#4169e1;}
h4.sue1{font-size:12pt;font-weight:bold;margin:0px;padding:0px;}
h4.sue2{font-size:12pt;font-weight:bold;margin:-24px 0px 0px 0px; padding:0px;}


table {margin:0px;}
/*table input.chkchk[type=button]{font-size: 0.8em;padding: 0px 5px;}*/
table input#ship[type=submit],
	  input.chkchk[type=submit],
      input.chkchk0[type=submit],
	  input#chkchk0[type=submit],
      input.chkchk1[type=submit],
      input#chkchk1[type=submit],
      input.chkchk2[type=submit],
	  input#chkchk2[type=submit]{font-size: 0.8em;padding: 0px 5px;}
table input[type=text]{height: 25px; padding:3px;}
table input[type=tel]{height: 25px; padding:3px;}
table input[type=number]{height: 25px; padding:3px;}

table.sue-color1 tr:hover{background: #FFCC99 !important;}
table.sue-color2 tr:nth-child(even){background: #add8e6;}
table.sue-color3 tbody:hover{background: #FFCC99 !important;}


table.sue1 td, th {padding: 1px 1px;text-align:center;vertical-align:middle}
table.sue1 th {border: solid 1px #c0c0c0;}
table.sue1 td {border: solid 1px #c0c0c0;}
table.sue1 input, select, textarea{margin:0px;color: #0000ff}
table.sue1 thead td{color: #1798A5;}

table.sue1 a:hover{
				text-decoration: underline;
}
table.sue1 a{
			    color: #0000ff;
}



table.sue2 {width: 692px;
			height:490px;
			border-collapse: collapse;
			border: 3px solid #20b2aa;
			margin:auto;
			margin-top:10px;
			background-size:contain;
			background-image:url(../../img/sue/OutputReceipt_ER.jpg)
}
table.sue2 td, th {padding: 1px 1px;}
table.sue2 tr {border-style: none}
table.sue2 input, select, textarea{font-weight:700;
									margin:0px;
									background-color:transparent;
									border-color:#20b2aa;
}



table.sue4 td,th{
				padding: 5px 5px;
				vertical-align: middle;
}
table.sue4 th{
				border-top:none;
}
table.sue4 input, select, textarea{
				margin:0px;
}
table.sue5 td, th{
				padding: 10px 10px;
				text-align:left;
				background : none;
				vertical-align:middle;
				border-top   :solid 1px #00cccc;
				border-bottom:solid 1px #00cccc;
}
table.sue5 a:hover{
				text-decoration: underline;
}
table.sue5 a{
				color: #0000ff;
}

table.sue6 td, th {margin:0;padding:1px 1px;text-align:center;vertical-align:middle}
table.sue6 {border: none;border-collapse: separate;}
table.sue6 th {border: none}
table.sue6 input, select, textarea{margin:0px}











textarea{
	background-color:#ffffff;
	color:#000000;
	font-weight:normal;
}

.sue_panel{
	margin:15px 15px 0 15px;
	padding:5px 5px 0px 5px;
  	border-top: solid 1px #a9a9a9;
  	border-bottom: solid 1px #a9a9a9;

}


select{
  -webkit-appearance:none;
  /*padding-top:2px;*/
  height: 25px;
  line-height: 18px;
  	border: solid 1px #a9a9a9;
	background-color:#ffffff;
	font-size:14px;
	font-weight:normal;
/*	line-height:24px;*/
/*	padding:0 0 0 5px;*/
}

.jan-kan {ime-mode:disabled;}
.text{display:inline;}

label.hover:hover{
   background-color: #FFCC99;
}

.copyToClipboard:hover {
   background-color: #FFCC99;
   cursor : pointer;
}
.addNewPage:hover {
   background-color: #00bfff;
   cursor : pointer;
}
.selectAll:hover {
   cursor : pointer;
}

.posi0{
    position: absolute;
    top: 7px;
    left: 220px;
    width: 300px;
    height: 25px;
    color: #0000ff;
    font-size: 16px;
    font-weight:700;
}
.posi1{
    position: absolute;
    top: 7px;
    left: 180px;
    width: 120px;
    height: 25px;
    color: #0000ff;
    font-size: 16px;
    font-weight:700;
}
.posi2{
margin:0 0 0 -30px;
	position: absolute;
/*    top: 10px;*/
/*    left: 950px;*/
/*    width: 200px;*/
    height: 25px;
    color: #0000ff;
    font-size: 16px;
    font-weight:700;
}
.posi3{
    position: absolute;
    top: 45px;
    left: 95px;
    width: 200px;
    height: 25px;
    color: #0000ff;
    font-size: 16px;
    font-weight:700;
}
.posi4{
    position: absolute;
    top: 117px;
    left: 220px;
    width: 200px;
    height: 25px;
    color: #0000ff;
    font-size: 16px;
    font-weight:700;
}

input.submenu{
	background-color: #eeeeee;
	width: 200px;
	font-size: 18px;
	font-weight: bold;
	color: #555555;
}
input.submenu:hover{color: #0000ff;}


input.submenu_hide{
	pointer-events: none;
	background-color: #eeeeee;
	width: 200px;
	font-size: 18px;
	font-weight: bold;
	color: #d6d6d6;
}

.top_answer .ui-state-active {
	border: 1px solid #add8e6!important;
	background: #dbedff!important;
	font-weight: 400!important;
	color: red;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #add8e6!important;
	background: #dbedff!important;
	font-weight: 400!important;
	color: red;
}

.ui-menu-item-wrapper {
  position: relative; padding: 1px 1em 1px .4em;
	border: 1px solid #fff!important;
	font-size: 14px;
	color: #000;
}
/*
select {
	border: solid 1px #a9a9a9;
	background-color:#ffffff;
	font-size:14px;
	font-weight:normal;
	line-height:24px;
	padding:0 0 0 5px;
}
*/


.oc {
	display:none;
	font-size:11px;
	}

.op {
    font-size:11px;
    }

/* ----------------------- Basic Style */
/*
.content {
	padding: 4px 32px;
}
*/
/*-------------------------------------*/
div.check-group1 input {
    display: none;
}
div.check-group1 label {
    cursor: pointer;
/*    padding: 5px 10px; */
    padding: 2px 2px;
	width: 50px;
	height: 25px;
    float: left;
    border: solid 1px #aaa;
    margin-left: -4px;
    margin-right: 4px;
    background: #eee;
    text-align: center;
}
div.check-group1 input:checked+label {
    color: #fff;
    background: #696969;
}
/*-------------------------------------*/
div.check-group2 input {
    display: none;
}
div.check-group2 label {
    cursor: pointer;
    padding: 1px 1px;
	width: 45px;
    float: left;
    border: solid 1px #aaa;
    margin-left: -1px;
    background: #eee;
    text-align: center;
	font-size: 11px;
}
div.check-group2 input:checked+label {
    color: #fff;
    background: #696969;
}
/*-------------------------------------*/
div.check-group3 input {
    display: none;
}
div.check-group3 label {
    cursor: pointer;
    padding: 1px 1px;
	width: 30px;
    float: left;
    border: solid 1px #aaa;
    margin: 0px 0 0px 6px;
    background: #eee;
    text-align: center;
	font-size: 11px;
}
div.check-group3 input:checked+label {
    color: #fff;
   background: #696969;
}
/*-------------------------------------*/
.onoff {
	display: none;
}
.onoff + label:before {
    padding: 1px 1px;
	width: 20px;
    float: left;
    border: solid 1px #aaa;
    margin: 2px 0 -2px -5px;
    background: #eee;
    text-align: center;
	font-size: 11px;
	content: "未";
    color:#0000ff;
    font-weight: bold;
}
.onoff:checked + label:before {
	content: "済";
    color:#a9a9a9;
    font-weight: normal;
}
/*-------------------------------------*/
#fukidashi div {
  position: relative;
}
.arrow_box {
  /*display: none;*/
  visibility: hidden;
  position: absolute;
  z-index: 9999;
  padding: 4px;
  margin-top: 8px;
  margin-bottom: 0px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #999;
  color: #fff;
  font-size: 12px;
  line-height: 130%;
}
.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 20px;
  width: 0;
  height: 0;
  margin-left: -10px;

  border: solid transparent;
  border-color: rgba(50, 50, 50, 0);
  border-bottom-color: #999;
  border-width: 10px;

  pointer-events: none;
  content: " ";
}
span:hover + p.arrow_box {
  visibility: visible;
  display: block;
}

.arrow_box1 {
  /*display: none;*/
  visibility: hidden;
  position: absolute;
  z-index: 9999;
  padding: 4px;
  margin-top: 8px;
  margin-left: -70px;
  margin-bottom: 0px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #999;
  color: #fff;
  font-size: 12px;
  line-height: 130%;
}
.arrow_box1:after {
  position: absolute;
  bottom: 100%;
  left: 90px;
  width: 0;
  height: 0;
  margin-left: -10px;

  border: solid transparent;
  border-color: rgba(50, 50, 50, 0);
  border-bottom-color: #999;
  border-width: 10px;

  pointer-events: none;
  content: " ";
}
span:hover + p.arrow_box1 {
  visibility: visible;
  display: block;
}


.marquee {
  overflow:hidden;
  margin:1em 0;
}

.marquee p {
  margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
  animation-name:marquee;
  animation-duration:20s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

@keyframes marquee {
  from { transform:translate(0);}
  to   { transform:translate(-100%);}
}



/* 点滅 */
.blinking{
	animation-name: blink; /* アニメーションの名前を設定 */
	animation-duration: 1.5s; /* アニメーションの秒数を設定 */
	animation-iteration-count: infinite; /* 繰り返しを設定（１回だけなら不要） */
}
@-webkit-keyframes blink{
    0% {opacity:1;}
    50% {opacity:0;}
}
@-moz-keyframes blink{
    0% {opacity:1;}
    50% {opacity:0;}
}
@keyframes blink{
    70% {opacity:1;}
    30% {opacity:0;}
}