/*全体の背景色*/
body {
  background-color: var(--main-bg-system-color);
}

/*input,textarea*/
/*
textarea, input {
    font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ" !important ;
}
*/

/*マスタメンテ右下固定領域*/
div#footerArea {
  background-color: #fff;
  border-color: var(--main-system-color);
  border-top: 1px solid;
  position: absolute;
  padding-top: 5px;
  left : 0px;
  /*bottom : 40px;*/
  bottom : 0px;
  height : 40px;
  width: 100%;
  position:fixed;
}

/*各画面のメニューボタン
===============================*/
div#funcMenu {
  background-color: #fff;
  border-color: var(--main-system-color);
  border-top: 1px solid;
  position: absolute;
  left : 0px;
/*  bottom : 0px; */
  top : 40px;
  height : 35px;
  width: 100%;
  position:fixed;
}

div#topmenu input[type="button"] {
  color: #fff;
/*  background-color: #1e90ff;*/
/*  border-color: #49a84d;*/
  background-color: var(--main-system-color);
  border-color: var(--main-system-color);
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 2px;
  border: 1px solid transparent;
}
div#topmenu input[type="button"]:hover {
  filter: brightness(110%);
}

/* レイアウト規約*/

/* ラベル背景色・文字色 */
.inchkLabel{
  /* 未チェック/チェック済 */
  text-align: center;
  color:white;
  background-color:#CC66CC;
}

.jmcatLabel{
  /* 商品/販促・サンプル */
  text-align: center;
  color:white;
  background-color:#459DA0;
}

.modfrLabel{
  /* Online,FAX */
  text-align: center;
  color:white;
  background-color:#66CC33;
}

.newLabel{
  /* 新規/修正 */
  text-align: center;
  color:white;
  background-color: var(--sub-system-color);
}

.newLabelColor{
  /* 新規/修正 */
  text-align: center;
  color:white;
  background-color: var(--sub-system-color);
}

.cutaxLabel{
  /* 税込み */
  text-align: center;
  color:black;
  background-color: yellow;
}

.eosLabel{
  /* FAX/EOS */
  text-align: center;
  background-color:#CCFFFF;
}

/*文字色*/
.red{
  color:red
}

.blue{
  color:blue
}

.yellow{
  color:yellow
}

.white{
  color:white
}

.green {
  color:green
}

.gray {
  color:gray
}

.link {
  color:rgb(15, 138, 219)
}
.link:hover {
  cursor: pointer;
}

/*文字の太さ*/
.bold{
  font-weight:bold;
}


/*多明細ｺﾒﾝﾄ*/
.comment {
  padding-top:2px;
}

/*Functionボタン関連*/
.Func .noevent{
  background-color:gray !important ;
}

.Func .gapspace{
  display: inline-block;
  width: 30px;
  background-color:white !important ;
}

.Funclabel {
  margin-bottom:-5px;
}

.Funclabel label{
  float:none !important;
}

/*aボタン関連*/
a.noevent{
  background-color:gray !important ;
}

select.readonly {
  pointer-events: none;
  background-color:#eee !important ;
  user-select: none;
}

/* ファンクションの為一時無効
.btn-close {
  margin-left:20px;
}
*/

/*項目サイズ関連*/
/*標準項目サイズ*/
.wd-kbn {  /* 1-2 */
  width:   30px;
}

.wd-SS {  /* 3-5 */
  width:   45px;
}

.wd-S   { /* 6-10 */
  width:   80px;
}

.wd-M   { /* 11-14 */
  width:   150px;
}

.wd-MM   { /* 15-20 */
  width:   200px;
}

.wd-L   { /* 21-35 */
  width:   260px;
}

.wd-LL   { /* 36-50 */
  width:   360px;
}

.wd-LLL   { /* 51- */
  width:   460px;
}

/*商品名用*/
.wd-jan {
  width: 108px;
}
.wd-vjan {
  width: 108px;
}
.wd-gdnm {
  width: 550px;
}
.wd-gdjnm {
  width: 280px;
}
.wd-gdjstnd {
  width: 280px;
}
.wd-50b { /*50byte用の幅*/
  width: 355px;
}

/*ファンクションボタンサイズ*/
.wd-func   {
  font-size: 12px !important;
  width:  95px;
  height: 26px;
}
/*ファンクションボタンサイズ*/
.wd-func2   {
  width:  170px;
  height: 26px;
}
/*ファンクションボタンサイズ*/
.wd-func3   {
  width:  255px;
  height: 26px;
}


/*セレクトボックス*/
/*
select{
  height:  25px!important;
}
*/
.wd-select-SS   {
  width:   80px;
}

.wd-select-S   {
  width:   100px;
}

.wd-select-M   {
  width:   200px;
}
.wd-select-MM   {
  width:   150px;
}

.wd-select-L   {
  width:   200px;
}

.wd-select-LL   {
  width:   350px;
}

/*チェックボックス*/
.wd-check   {
  width:   23px;
}

input[type="checkbox"]{
  height:  23px;
}
input[type="checkbox"]:hover{
  cursor: pointer;
}
input[type="radio"]:hover{
  cursor: pointer;
}
.checkbox-label:hover {
  cursor: pointer;
  user-select: none;
}

/* FILE INPUT */
/* オリジナルボタン */
.file_btn {
    border: 1px solid #ddd;
    padding: 3px;
    cursor: pointer;
    border-radius: 5px;
    color: #666;
    background: linear-gradient(to bottom,#fff 0,#f4f4f4 100%);
    box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.09);
}
/* ファイル名 */
.file_filename {
    display: inline-block;
    font-size: 12px;
    background-color: #fff !important;
    border-color: #fff !important;
/*    border: 0px solid transparent !important;*/
}

/*日付*/
/*yyyy/mm/dd*/
.wd-date   {
  width:   85px;
}

/*yy/mm/dd 24mm:ss*/
.wd-date2   {
  width:   107px;
}

/*yyyy*/
.wd-year   {
  width:   40px;
}

/*hh:mi*/
.wd-time   {
  width:   60px;
}

/*数値*/
/*format="999,999,990"*/
.wd-number   {
  width:   100px;
}


/*画面を左右で2分割*/
div.Split2-1 , div.Split2-2 {
  float: left;
  width: 50%;
}

/*画面を3分割*/
div.Split3-1, div.Split3-2, div.Split3-3 {
  float: left;
  width: 33%;
}

/*画面を4分割*/
div.Split4-1 ,div.Split4-2 ,div.Split4-3 ,div.Split4-4 {
  float: left;
  width: 25%;
}

/*画面を左右で2:1分割*/
div.Split21-1 {
  float: left;
  width: 66%;
}
div.Split21-2 {
  float: left;
  width: 33%;
}

/*ここまで　江守*/

.btn-success2 {
  color: #fff;
  background-color: #1e90ff;
  border-color: #49a84d;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0px;
  border: 1px solid transparent;
}

.btn-popup {
  color: #fff;
  background-color: #1e90ff;
  border-color: #49a84d;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0px;
  border: 1px solid transparent;
  width: 25px;
  margin-right: 2px;
}

.popbtn {
  position: relative;
  float: left;
  width: 23px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 2px;
  height: 23px;
  padding: 6px 2px;
  margin: 1px 3px 1px 0px;
  line-height: 1.0;
  text-align: center;
}
.popbtn:hover {
  /*
  border: 1px solid #cfcfcf;
  background-color: #fefefe;
  */
  filter: brightness(110%);
  color: #555;
}
.wd-popbtn  {width: 26px} /*明細タイトルでpopupボタンの幅を取るよう*/

/*メインページ内ボタン*/
.btn-main {
  color: #fff;
/*  background-color: #1e90ff;*/
/*  border-color: #49a84d;*/
  background-color: var(--sub-system-color);
  border-color: var(--sub-system-color);
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .3s;
       -o-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-property: all;
       -o-transition-property: all;
          transition-property: all;
  padding: 3px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 2px;
  border: 1px solid transparent;
}
.btn-main:hover{
  filter: brightness(110%);
}
.btn-main.noevent{
  background-color:gray !important ;
}



/* テーブル関連
===============================*/
.wd-010   {width:   10px}
.wd-020   {width:   20px}
.wd-030   {width:   30px}
.wd-040   {width:   40px}
.wd-050   {width:   50px}
.wd-060   {width:   60px}
.wd-070   {width:   70px}
.wd-080   {width:   80px}
.wd-090   {width:   90px}
.wd-100   {width:  100px}
.wd-110   {width:  110px}
.wd-120   {width:  120px}
.wd-130   {width:  130px}
.wd-140   {width:  140px}
.wd-150   {width:  150px}
.wd-160   {width:  160px}
.wd-170   {width:  170px}
.wd-180   {width:  180px}
.wd-190   {width:  190px}
.wd-200   {width:  200px}
.wd-210   {width:  210px}
.wd-220   {width:  220px}
.wd-230   {width:  230px}
.wd-240   {width:  240px}
.wd-250   {width:  250px}
.wd-260   {width:  260px}
.wd-270   {width:  270px}
.wd-280   {width:  280px}
.wd-290   {width:  290px}
.wd-300   {width:  300px}
.wd-310   {width:  310px}
.wd-320   {width:  320px}
.wd-330   {width:  330px}
.wd-340   {width:  340px}
.wd-350   {width:  350px}
.wd-360   {width:  360px}
.wd-370   {width:  370px}
.wd-380   {width:  380px}
.wd-390   {width:  390px}
.wd-400   {width:  400px}
.wd-410   {width:  410px}
.wd-420   {width:  420px}
.wd-430   {width:  430px}
.wd-440   {width:  440px}
.wd-450   {width:  450px}
.wd-460   {width:  460px}
.wd-470   {width:  470px}
.wd-480   {width:  480px}
.wd-490   {width:  490px}
.wd-500   {width:  500px}
.wd-510   {width:  510px}
.wd-520   {width:  520px}
.wd-530   {width:  530px}
.wd-540   {width:  540px}
.wd-550   {width:  550px}
.wd-560   {width:  560px}
.wd-570   {width:  570px}
.wd-580   {width:  580px}
.wd-590   {width:  590px}
.wd-600   {width:  600px}
.wd-610   {width:  610px}
.wd-620   {width:  620px}
.wd-630   {width:  630px}
.wd-640   {width:  640px}
.wd-650   {width:  650px}
.wd-660   {width:  660px}
.wd-670   {width:  670px}
.wd-680   {width:  680px}
.wd-690   {width:  690px}
.wd-700   {width:  700px}
.wd-710   {width:  710px}
.wd-720   {width:  720px}
.wd-730   {width:  730px}
.wd-740   {width:  740px}
.wd-750   {width:  750px}
.wd-760   {width:  760px}
.wd-770   {width:  770px}
.wd-780   {width:  780px}
.wd-790   {width:  790px}
.wd-800   {width:  800px}
.wd-810   {width:  810px}
.wd-820   {width:  820px}
.wd-830   {width:  830px}
.wd-840   {width:  840px}
.wd-850   {width:  850px}
.wd-860   {width:  860px}
.wd-870   {width:  870px}
.wd-880   {width:  880px}
.wd-890   {width:  890px}
.wd-900   {width:  900px}
.wd-910   {width:  910px}
.wd-920   {width:  920px}
.wd-930   {width:  930px}
.wd-940   {width:  940px}
.wd-950   {width:  950px}
.wd-960   {width:  960px}
.wd-970   {width:  970px}
.wd-980   {width:  980px}
.wd-990   {width:  990px}
.wd-1000  {width: 1000px}
.wd-1010  {width: 1010px}
.wd-1020  {width: 1020px}
.wd-1030  {width: 1030px}
.wd-1040  {width: 1040px}
.wd-1050  {width: 1050px}
.wd-1060  {width: 1060px}
.wd-1070  {width: 1070px}
.wd-1080  {width: 1080px}
.wd-1090  {width: 1090px}
.wd-1100  {width: 1100px}
.wd-1110  {width: 1110px}
.wd-1120  {width: 1120px}
.wd-1130  {width: 1130px}
.wd-1140  {width: 1140px}
.wd-1150  {width: 1150px}
.wd-1160  {width: 1160px}
.wd-1170  {width: 1170px}
.wd-1180  {width: 1180px}
.wd-1190  {width: 1190px}
.wd-1200  {width: 1200px}
.wd-1210  {width: 1210px}
.wd-1220  {width: 1220px}
.wd-1230  {width: 1230px}
.wd-1240  {width: 1240px}
.wd-1250  {width: 1250px}
.wd-1260  {width: 1260px}
.wd-1270  {width: 1270px}
.wd-1280  {width: 1280px}
.wd-1290  {width: 1290px}
.wd-1300  {width: 1300px}
.wd-1400  {width: 1400px}
.wd-1500  {width: 1500px}
.wd-2000  {width: 2000px}

.wp-100   { width: 100%; }
.wp-095   { width: 95%; }
.wp-090   { width: 90%; }
.wp-085   { width: 85%; }
.wp-080   { width: 80%; }
.wp-075   { width: 75%; }
.wp-070   { width: 70%; }
.wp-065   { width: 65%; }
.wp-060   { width: 60%; }
.wp-055   { width: 55%; }
.wp-050   { width: 50%; }
.wp-045   { width: 45%; }
.wp-040   { width: 40%; }
.wp-035   { width: 35%; }
.wp-030   { width: 30%; }
.wp-025   { width: 25%; }
.wp-020   { width: 20%; }
.wp-015   { width: 15%; }
.wp-010   { width: 10%; }
.wp-005   { width:  5%; }

.col {
  position: relative;
  float: left;
}

.item {
/* +5px 幅考慮 */
  position: relative;
  float: left;
  margin-right:2px;
  padding-left:5px;
  margin-bottom:2px;
/*  border-radius: 4px; 19.04.01 角丸にしない by M.Sasaki*/
  border-radius: 0px;
}

/* 明細タイトルはitemのマージンを考慮する */
label {
  position: relative;
  float: left;
  padding-bottom:1px;
  vertical-align: middle;
}
label.labelright {
  text-align: right;
  padding-right:5px;
}
.detailHeader label {
  padding-left:3px;
  margin-right:2px;
}
.detailFooter label {
  padding-top: 3px;
  margin-right:2px;
}

/*画面を左右で分割*/
div.detailLeft {
  float: left;
  width: 50%;
}
div.detailRight {
  float: right;
  width: 50%;
}

/*画面を左右で分割*/
div.detailLeft2 {
  float: left;
  width: 33%;
}

div.detailCenter2 {
  float: left;
  width: 33%;
}

div.detailRight2 {
  float: left;
  width: 33%;
}


.well2 {
  min-height: 20px;
  padding: 5px;
  background-color: #ffffff;
  border: 2px solid #e3e3e3;
/*  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); */
}

.well3 {
  min-height: 20px;
  background-color: #ffffff;
  border-top: 1px solid #c0c0c0;
}
.well4 { /*エラーになる予定のエリア用 枠の太さを確保しておくので、位置がずれなくて嬉しい*/
  border: 3px solid #ffffff;
  opacity: 1;
}

.midasi {
  padding-top:initial !important;
  font-size: 18px;
}

.zikkou {
  font-size: 18px;
}

/* 明細関連
===============================*/
.detail, .detailHeader {
  position: relative;
  width: 100%;
  float: left;
  padding-left:3px;
}
.detail2, .detailHeader {
  position: relative;
  width: 100%;
  float: left;
  padding-left:3px;
}

.x_scroll {
  overflow-y: scroll;
}
.y_scroll {
  overflow-x: scroll;
}
.selectRow {
  box-sizing: border-box;
  padding-left:0px;
  background-color: rgba(33,150,243,0.35);
  border-left: darkblue solid 3px;
}

.kakutei {
  box-sizing: border-box;
  padding-left:0px;
  background-color:  rgba(40, 169, 255, 1);
}

.sample3-tooltips {
  position: absolute;
  bottom: -2.8em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample3-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 0.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

.tooltip-inner {
  max-width:1200px;
}

/* 表示関連
===============================*/
body {
  padding-top:40px;
  /*padding-top:80px;*/
}

.noevent {
  pointer-events: none;
}

.currency, .number, .percent, .text-right  {
    text-align: right;
}

.center, .text-center  {
    text-align: center;
}

.text-right2  {
    text-align: right;
    padding-right:15px;
}

.non {
    display:none;
}

.no-stress {
  opacity: .20;
}

.box {
  border-style: groove;
}

.nopoplabel {
}

.poplabel {
/*  text-decoration: underline;*/
}

.rowEvn {
  background-color: #ddd
}
.rowOdd {
  background-color: #fff
}

.dummy {
  opacity:0;
  height:0px;
  width:1px;
}
.dummy2 {
  opacity:0;
  height:0px;
  width:1px;
}

hr {
display: block;
width: 100%;
height: 1px;
background-color: var(--main-hr-color);
border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
margin-bottom: 1px;
}

hr.separation {
  margin-top: 10px;
}

/*必須項目赤字*/
.in-required {
/*  color: red;*/
  color: #D73057;
  font-weight: bolder;
}

.control-label-xxs {
  font-size: 8px;
}

/*枠線 styleでheight指定要*/
.in-box1 {
  padding: 0.5em 1em;
  margin: 2em 0;
  border: solid 1px #c0c0c0;/*線*/
  border-radius: 10px;/*角の丸み*/
}

.right {
  float:right;
}
.right:after {
  float:none;
}

.radio label {
  vertical-align:middle;
}

label.number{
  text-align: right;
  padding-right:15px;
}

label.inputReadOnly {
  font-weight: normal !important;
  border: 1px solid #ccc;
  background-color: #eee;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnly {
  border: 1px solid #ccc;
  background-color: #eee;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyPink {
  border: 1px solid #ccc;
  background-color: #ffe4e1;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyYellow {
  border: 1px solid #ccc;
  background-color: #ffffe0;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyBlue {
  border: 1px solid #ccc;
  background-color: #afeeee;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyLightcyan {
  border: 1px solid #ccc;
  background-color: lightcyan;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyLightyellow {
  border: 1px solid #ccc;
  background-color: lightyellow;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.inputReadOnlyStp {
  border: 1px solid #ccc;
  background-color: #FFCAE4;
  height: 25px;
  padding: 6px 2px;
  font-size: 12px;
  line-height: 1.0;
  border-radius: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.impactLine {
  border-bottom: solid 3px #1e90ff;
}
div.underLine {
  border-bottom: solid 1px #555555;
}


/*  カレンダー
===============================*/
.dow {
  background-color:"blue";
}

/*  ツールチップ
===============================*/
.error + .tooltip > .tooltip-inner {
    background-color: red;
    color: #FFFFFF;
    border: 1px solid black;
    font-size: 14px;
}
/* auto comp
===============================*/
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

/*  アイコン系
===============================*/
.arrow {
  position: relative;
  display: inline-block;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  height:24px;
  width:23px;
  margin-left:5px;
}
.arrow::before,
.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.arrow-top::before{
  width: 20px;
  height: 20px;
  -webkit-border-radius: 25%;
  border-radius: 25%;
  background: #7a0;
}
.arrow-top::after{
  left: 5px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.arrow-bottom::before{
  width: 20px;
  height: 20px;
  -webkit-border-radius: 25%;
  border-radius: 25%;
  background: #7a0;
}
.arrow-bottom::after{
  left: 5px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

/* イベント
===============================*/
#loading, #loading2 {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.4;
}

#loading .loadingMsg, #loading2 .loadingMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  background: url("../img/load.gif") center center no-repeat;
}

/*  エラー
===============================*/
.error {
  border-color: #ea1c0d;
  border-width: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error:focus {
  border-color: #ba160a;
  border-width: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/*  ダイアログ
===============================*/
.dialog {
  border-radius: 3px;
  box-shadow: 0 0 8px dimgray;
  margin:10px;
  background-color:#fff;
  position: absolute;
  z-index:1;
  width: 300px;
  height: 150px;
  top:300px;
  left:400px;
}
.dialog.top {
  top:0px;
}
.dialog .title{
  border-radius: 3px 3px 0px 0px;
  background-color: var(--main-system-color);
  color:#fff;
  height:25px;
  line-height: 25px;
  padding: 0px 2px 0px 5px; /*上下はline-heightで真ん中に来るようにする*/
}
.dialog .main{
  padding: 2px 2px 2px 5px;
}
.dialog .bottom {
  position: absolute;
	bottom: 0;
  padding: 5px;
}
/*ブラウザダイアログに似せたボタンにしたい場合?*/
.dialog .browslike .btn-yes{
  background-color: royalblue;
  color: white;
  font-weight: bolder;
  border-radius: 4px;
  height: 30px;
  box-sizing: border-box;
}
.dialog .browslike .btn-yes:hover{
  filter: brightness(110%);
}
.dialog .browslike .btn-yes:focus{
  border: 2px solid black;
}

.dialog .browslike .btn-no{
  background-color: white;
  color: royalblue;
  font-weight: bolder;
  border-radius: 4px;
  border: 1px solid lightgray;
  height: 30px;
  box-sizing: border-box;
}
.dialog .browslike .btn-no:hover{
  filter: none;
  background-color: #F0F3FD;
}
.dialog .browslike .btn-no:focus{
  border: 2px solid black;
}
