body {
  height: 100%;
  margin: 0;
}

#map{
    position: absolute;
    width: 50.0%;
    height: 100.0%;
    left: 0.0%;
    top: 0.0%;
/*     pointer-events: auto;  クリックが両方できるようにする */
}

#hello_pro {
	position:absolute; 
    left: 60.0%;
    top: 80px;
	height:500px; 
	width:500px; 
	background-color:#fbff96;
}


#right_erea {
    position: relative;
    width: 50.0%;
    min-width: 600px;
    height: 100.0%;
    left: 50.0%;
    top: 0.0%;
    font-size:14px;
}

.margin_erea{
	margin: 5px;
}



#right_erea dl dt{
  width: 130px;
  padding:5px 5px;
  float:left;
  clear:both;

  background: #ebddff;
}

#right_erea dl dd{
  padding:5px 5px;
  background: #d5ffee;
}

.wav_space{
	height: 40.0%;
	margin: 10px;
}

.print_pages{
  /*A4縦*/
    width: 172mm;
    height: 251mm;
    page-break-after: always;
}
  /*最後のページは改ページを入れない*/
.print_pages:last-child{
    page-break-after: auto;
}

.table_class{
    overflow: auto;
    width: 100%;

    height: 230px;

/*     padding-top: 10px; */
}
.table_class table{
    margin: 0;
    border-spacing: 0;

}

/*テーブルの色変更*/
.current_tr{
	background-color: #8cc6ff;
  	transition: background-color 0.1s ease-in-out;
}

.other_tr{
 	background-color: #FFFFFF;
	transition: background-color 0.7s ease-in-out;
}



.table_class td{
    white-space: nowrap;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    
/*     background: #FFF; */
    padding: 5px;
}
.table_class th{
    white-space: nowrap;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #f2f2f2;
    position: sticky;
    top: 0;
    left: 0;
}
.table_class tr:first-child th{
    border-top: 1px solid #999;
}
.table_class th:first-child{
    border-left: 1px solid #999;
}
.table_class tr:first-child th:first-child{
    z-index: 1;
}


.input_tbl {
/* 	overflow: auto; */
/* 	width: 400px; */
	min-width: 300px;
    max-width: 100%;
    height: 410px;
/*     border-collapse: collapse; */
}
/* .input_tbl table, td, th { */
/*     border-bottom: 1px solid black; */
/* } */
.input_tbl table{
    margin: 0;
    border-spacing: 0;
    padding: 10px;
    border-bottom: 1px solid #999;
    border-collapse: collapse;
}

/* .input_tbl tr:nth-of-type(2n-1){ */
/*     white-space: nowrap; */
/*     background: #ddffdf; */
/*     position: sticky; */
/*     top: 0; */
/*     left: 0; */
/* } */

.input_tbl td:nth-of-type(1){

	font-weight: bold;
}

.tbl_color_1 {
	background: #8cc6ff;
    white-space: nowrap;
    position: sticky;
    top: 0;
    left: 0;
}

.tbl_color_2 {
	background: #cae4ff;
    white-space: nowrap;
    position: sticky;
    top: 0;
    left: 0;
}

.tbl_color_3 {
	background: #ffffff;
    white-space: nowrap;
    position: sticky;
    top: 0;
    left: 0;
}

#wav_input {
	display:none;
}


/*########################## */
/*音声ファイル選択用*/
.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  margin-left: 10px ;
  text-decoration: none;
  color: #0059b3;
  background: #e3e3e3;
  transition: .4s;
  border:none;

	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

.btn-flat-simple:hover {
  background: #0059b3;
  color: white;
}

/*録音中の時*/
.btn-flat-rec {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	margin-left: 10px ;
	text-decoration: none;
	color: #ffffff;
	background: #ff0000;
	transition: .4s;
	border:none;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
/*########################## */


/*########################## */
/*再生ボタン用*/
.btn-start-voice {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #ff7777;
	background: #e3e3e3;
	transition: .4s;
	border:none;
 	width: 60px;
	height: 60px;
	border-radius: 50%;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

.btn-start-voice:hover {
  background: #ff5151;
  color: white;
  
}

.btn-start-voice::before {
 content: '\f04b';
 font-family: "Font Awesome 5 free";
/*  font-wigth: 400; */
}

/*再生ボタン無効化用*/
.btn-start-voice-none {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #606060;
	background: #e3e3e3;
	transition: .4s;
	border:none;
 	width: 60px;
	height: 60px;
	border-radius: 50%;
/* 	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3); */
/* 	box-shadow: 0 3px 5px rgba(0, 0, 0, .3); */

}




/*停止ボタン用*/
.btn-stop-voice {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: white;
	background: #ff5151;
	transition: .4s;
	border:none;
 	width: 60px;
	height: 60px;
	border-radius: 10%;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

.btn-stop-voice:hover {
  background: #ff5151;
  color: white;
  
}

.btn-stop-voice::before {
 content: '\f04d';
 font-family: "Font Awesome 5 free";
/*  font-wigth: 400; */
}

/*削除ボタン用*/
.btn-delete-voice {
  position: relative;
  display: inline-block;
  font-weight: bold;
  margin-left: 200px ;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #0059b3;
  background: #e3e3e3;
  transition: .4s;
  border:none;

	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

.btn-delete-voice:hover {
  background: #414141;
  color: white;
  
}

.btn-delete-voice::before {
 content: '\f1f8';
 font-family: "Font Awesome 5 free";
/*  font-wigth: 400; */
}


/*再生ボタン用mini*/
.btn-start-voice-mini {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	margin-left: 10px ;
	text-decoration: none;
	color: #ff7777;
	background: #e3e3e3;
	transition: .4s;
	border:none;
/*  	width: 60px; */
/* 	height: 60px; */
	border-radius: 50%;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

.btn-start-voice-mini:hover {
  background: #ff5151;
  color: white;
  
}

.btn-start-voice-mini::before {
 content: '\f04b';
 font-family: "Font Awesome 5 free";
/*  font-wigth: 400; */
}

/*停止ボタン用mini*/
.btn-stop-voice-mini {
	position: relative;
	display: inline-block;
	font-weight: bold;
	padding: 0.25em 0.5em;
	margin-left: 10px;
	text-decoration: none;
	color: white;
	background: #ff5151;
	transition: .4s;
	border:none;
	border-radius: 10%;
	-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

.btn-stop-voice-mini:hover {
  background: #ff5151;
  color: white;
  
}

.btn-stop-voice-mini::before {
 content: '\f04d';
 font-family: "Font Awesome 5 free";
/*  font-wigth: 400; */
}
/*########################## */



/*########################## */
/*プルダウン用*/
.select_style_1 {
	background: #cae3ff;
	outline: none;
	margin: 5px;
	padding: 0px;
	width: 90%;
	height: 80%;
}

.select_style_2 {
	background: #e6f2ff;
	outline: none;
	margin: 5px;
	padding: 0px;
	width: 90%;
	height: 80%;
}
/*########################## */







/*選択中のマーカーの色変更用*/
.cur_maker{
	filter: hue-rotate(130deg);
	
}

/*音声地点マーカーの色変更用*/
.wav_maker{
	filter: hue-rotate(280deg);
	
}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.acsept_butoon-color_true {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  margin-left: 10px;
  text-decoration: none;
  color: #ff4242;
  background: #ff8040;
  transition: .4s;
  border:none;
}



.acsept_butoon-color_true:hover {
  background: #ff6215;
  color: #ffffff;
}

.acsept_butoon-color_true:active {
  /*ボタンを押したとき*/
	background: #ff5402;
	color: #000000;
}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */


/* .acsept_butoon-color_false { */
/* 	background: default; */
/* } */

.hidden_element {
	display:none;
}



/*  ポップアップ用*/

#modal-content {
/* 	width: 50% ; */
	margin: 0 ;
/* 	padding: 10px 20px ; */
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 9999 ;
}

#modal-overlay {
	z-index: 9998 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 100% ;
	background-color: rgba( 0,0,0, 0.75 ) ;

}


#modal-overlay-help {
	position:absolute; 
	z-index: 9998 ;
	display: none ;
/* 	position: fixed ; */
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 100% ;
	background-color: rgba( 0,0,0, 0 ) ;
	pointer-events: none;
}


.hello_popup {
/* 	overflow: auto; */
	max-width: 600px;
    min-width: 600px;
/*     max-height: 500px; */
    min-height: 300px;
}


#stop-content {
/* 	width: 50% ; */
	margin: 0 ;
/* 	padding: 10px 20px ; */
	border: 2px solid #aaa ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 9999 ;
}



/* 暫定設定*/
ul {
  list-style-type: none;
   padding-left: 0px;
}
 .accordion {
 
/*   width: 100%; */
  max-width: 600px;
/*   margin: 30px auto 20px; */
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
 }

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 42px;
  color: #4D4D4D;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #CCC;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li:last-child .link {
  border-bottom: 0;
}

.accordion li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}

.accordion li.open .link {
  color: #ffffff;
}

.accordion li.open i {
  color: #ffffff;
}

.accordion li.open {
  background: #0059b3;
}

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
 * Submenu
 -----------------------------*/
 .submenu {
  display: none;
  font-size: 18px;
  background: #cae4ff;
  font-size: 18px;
  padding-left: 30px;
 }

 .submenu li {
	background: #ffffff;
  border-bottom: 1px solid #4b4a5e;
 }

 .submenu li:hover {
  background: #ffffc1;
/*   color: #FFF; */
 }


 




/*#################################*/
/* #zip_import  { */
/* 	display:none; アップロードボタンのスタイルを無効にする */
/* } */

/* #Export { */
/* 	display:none; */
/* } */

/* #reload { */
/* 	display:none; */
/* } */
/* A simple, css only, (some-what) responsive menu */

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 0px 15px; /* メニューバー内側の余白(左に15px) */
   background-color: #0080ff; /* バーの背景色(濃い赤色) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
   width: 125px;          /* メニュー項目の横幅(125px) */
   display: inline-block; /* ★横並びに配置する */
   list-style-type: none; /* ★リストの先頭記号を消す */
   position: relative;    /* ★サブメニュー表示の基準位置にする */
}
ul.ddmenu label {
	z-index: 5 ;
   background-color: #0080ff; /* メニュー項目の背景色(濃い赤色) */
   color: black;              /* メニュー項目の文字色(白色) */
   line-height: 25px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★項目内全域をリンク可能にする */
}
ul.ddmenu label:hover {
   background-color: #0059b3; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #f2f2f2;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}

/* ---------------------------------- */
/* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
/* ---------------------------------- */
ul.ddmenu li:hover ul {
   display: block;      /* ★マウスポインタが載っている項目の内部にあるリストを表示する */
}

/* -------------------- */
/* ▼サブメニューの装飾 */
/* -------------------- */
ul.ddmenu ul {
   margin: 0px;         /* ★サブメニュー外側の余白(ゼロ) */
   padding: 0px;        /* ★サブメニュー内側の余白(ゼロ) */
   display: none;       /* ★標準では非表示にする */
   position: absolute;  /* ★絶対配置にする */
}

/* ------------------------ */
/* ▼サブメニュー項目の装飾 */
/* ------------------------ */
ul.ddmenu ul li {
	z-index: 5 ;
   width: 200px;               /* サブメニュー1項目の横幅(135px) */
   border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
}
ul.ddmenu ul li label {
	z-index: 5 ;
   line-height: 35px;     /* サブメニュー1項目の高さ(35px) */
   text-align: left;      /* 文字列の配置(左寄せ) */
   padding-left: 5px;     /* 文字列前方の余白(5px) */
   font-weight: normal;   /* 太字にはしない */
}
ul.ddmenu ul li label:hover{
   background-color: #0059b3; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
   color: #f2f2f2;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
}


#progress {
	width: 200px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#load_icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}