﻿/* Speach CSS 20240302 */
  * {
    font-family: Verdana, Arial, sans-serif;
  }
body {
  background-color:#feffee;
  margin-left:3px;
}

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-jil1{background-color:#9ef9f6;border-color:#090909;font-size:10px;text-align:left;vertical-align:top}
.tg .tg-t2nq{background-color:#9aff99;border-color:#090909;text-align:left;vertical-align:top}

.speechSection {
  border:1px solid black;
  background-color:#ffc;
  width:55px;
/*  width:25vw;max-width:85px;"*/
  height:55px;
  float:left;
  display: inline-block;_display:inline;
  margin-top:-1px;"
  }
/*.micSection {
  border:1px solid blue;
  width:40px;
  height:54px;
  float:left;
  display: inline;
  }
*/
#start_button {
  border: 1;
  background-color:transparent;
  padding: 0;
  }

.PracticeButton {
  height:55px;
  width:23vw;max-width:85px;"
  padding:0px;
  margin:-1px;
  margin-top:3px;
  margin-right:1px;
  font-size:15px;
  }

#info {
  border: 1px solid black;
  background-color:#ffc;
  width:120px;
height: 18px;
  font-size: 8px;
  text-align: left;
  padding: 0px;
  color: black;
/*display: inline; */
  overflow-y:scroll;
  }

.textarea{
  border:1px solid black;
  color: black;
  padding-right: 3px;
  background-color:#eef;
  width:95vm;
/*  min-width:400px;*/
  min-height:20px;
  max-height:200px;
  overflow-y:scroll;
  font-size:16px; 
  text-align:justify;
  text-justify: auto;
  vertical-align: top;
  margin-top: 0px;
  margin-bottom:1px;
  }

.searcharea{
  border:1px solid black;
  color: black;
  background-color:#eef;
  min-width:100px;
  min-height:20px;
  max-height:80px;
  overflow-y:scroll;
  font-size:16px; 
  text-align:justify;
  text-justify: auto;
  vertical-align: top;
  padding-right: 3px;
  margin-top:0px;
  margin-bottom:-18px;
  }

/* DropDown Menu inside a Navigation Bar*/
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
/* For Google translate Button*/
.goog-te-combo {
  width: 100px;
  height: 20px;
  font-size:20px;
  float: left;
  display: visible;
}
#f-selector { display: none; }
.fukidashi {
  display: none;
  width:380px;
  font-size:12px;
  position: relative;
  margin-top: 20px;
  left: 10px;
  padding: 5px;
  border-radius: 5px;
  background: #99ff99;
}
.textarea:hover + .fukidashi {
  display: block;
}
/*以下、文章の形式を整形するCSS　文字の幅を制御するので、本当はemを使うべきのところ、*/
/*プロポーショナルフォントで、綺麗に整形されないため、文字の高さを使って整形することにした。*/
.L11  { PADDING-LEFT: 1em; line-height:130%}/*行開始位置を1字下げ*/
.L22  { PADDING-LEFT: 2em; line-height:130%}/*行開始位置を2字下げ*/
.L33  { PADDING-LEFT: 3em; line-height:130%}/*行開始位置を3字下げ*/
.L44  { PADDING-LEFT: 4em; line-height:130%}/*行開始位置を4字下げ*/
.L55  { PADDING-LEFT: 5em; line-height:130%}/*行開始位置を5字下げ*/
.L66  { PADDING-LEFT: 6em; line-height:130%}/*行開始位置を6字下げ*/
.L77  { PADDING-LEFT: 7em; line-height:130%}/*行開始位置を6字下げ*/
.L88  { PADDING-LEFT: 8em; line-height:130%}/*行開始位置を6字下げ*/
.L99  { PADDING-LEFT: 9em; line-height:130%}/*行開始位置を6字下げ*/

/*複数行に亘る文章を文字下げで表示*/
/*　例　あいうえお～　padding-leftは２行目の先頭位置、text-indentは２行目の先頭位置を基準とした１行目の先頭位置*/
/*　　かきくけこ。　*/
.L10 { PADDING-LEFT: 0em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L21 { PADDING-LEFT: 1em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L32 { PADDING-LEFT: 2em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L43 { PADDING-LEFT: 3em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L54 { PADDING-LEFT: 4em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L65 { PADDING-LEFT: 5em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L76 { PADDING-LEFT: 6em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L87 { PADDING-LEFT: 7em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.L98 { PADDING-LEFT: 8em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/
.La9 { PADDING-LEFT: 9em; TEXT-INDENT: 1em; line-height:130%} /*複数行書く場合の書式*/

/*接頭記号のある複数行に亘る文章を文字下げで表示*/
/*　例　１　あいうえお～　*/
/*　　　　かきくけこ。　*/
.L01 { PADDING-LEFT: 1em; TEXT-INDENT: -1em; line-height:130%}/*0字下げ＋接頭記号＋複数行*/
.L12 { PADDING-LEFT: 2em; TEXT-INDENT: -1em; line-height:130%}/*1字下げ＋接頭記号＋複数行*/
.L23 { PADDING-LEFT: 3em; TEXT-INDENT: -1em; line-height:130%}/*2字下げ＋接頭記号＋複数行*/
.L34 { PADDING-LEFT: 4em; TEXT-INDENT: -1em; line-height:130%}/*3字下げ＋接頭記号＋複数行*/
.L45 { PADDING-LEFT: 5em; TEXT-INDENT: -1em; line-height:130%}/*4字下げ＋接頭記号＋複数行*/
.L56 { PADDING-LEFT: 6em; TEXT-INDENT: -1em; line-height:130%}/*5字下げ＋接頭記号＋複数行*/
.L67 { PADDING-LEFT: 7em; TEXT-INDENT: -1em; line-height:130%}/*5字下げ＋接頭記号＋複数行*/
.L78 { PADDING-LEFT: 8em; TEXT-INDENT: -1em; line-height:130%}/*5字下げ＋接頭記号＋複数行*/
.L89 { PADDING-LEFT: 9em; TEXT-INDENT: -1em; line-height:130%}/*5字下げ＋接頭記号＋複数行*/

/*接頭記号のある複数行に亘る文章を文字下げで表示*/
/*　例　注:あいうえお～　*/
/*　　　 かきくけこ。　　*/
.Left67x {padding-left:6ex;text-indent:-1ex;}/*2字下げ　 注:　などと全角＋半角文字がある場合　*/

/*接頭記号のある複数行に亘る文章を文字下げで表示*/
/*　例　例　・あいうえお～　*/
/*　　　　　かきくけこ。　　*/
.L02 {padding-left:2em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L13 {padding-left:3em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L24 {padding-left:4em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L35 {padding-left:5em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L46 {padding-left:6em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L57 {padding-left:7em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L68 {padding-left:8em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
.L79 {padding-left:9em;text-indent:-2em;}/*1字下げ　 例　・などがある場合　*/
