/* SITT CSS 20240131 */
  * {
    font-family: Verdana, Arial, sans-serif;
  }
body {
  background-color:#feffee;
}

.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;
  width:55px;
  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:116px;
  padding:-1px;
  margin:-1px;
  font-size:15px;
  }

#info {
  border: 1px solid blue;
  width:120px;
  font-size: 8px;
  text-align: left;
  margin-left:0px;
  padding: 0px;
  color: black;
  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;
  }

/* 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; }

.interim {
 border: 1px solid black;
 color: black;
 width: 95%;
 min-width: 380px;
 min-height: 20px;
 padding-right: 3px;
 font-size: 16px;
 margin-top: -20px;
 background-color: #eef;
}
.container {
  border:1px solid black;
  margin-left:2px;/*左空白*/
  margin-bottom:-10px;
  overflow: auto;
  scroll-snap-type: y mandatory; /*snap方向y,X mandatoryは近い方 proximityは中間も*/
  height: 200px; /*窓の縦サイズ vhはビューポートに対する割合 50vh*/
  width: 94vw; /* 400px窓の横サイズ　vwはビューポートに対する割合*/
}
.area {
  padding-left:2px;/*左余白*/
  scroll-snap-align: start;/*snap位置 start:上、end:下、center:中央*/
  height: 200px; /*窓の縦サイズ containerに合わせる*/
  overflow-y:auto;/*コンテンツ行数が多い場合はスクロール*/
}

/* General Styling */
span { line-height:0.9em;
    margin-bottom:-8px;
    font-size:95%;
}
p { line-height:1.0em;
    margin-bottom:-8px;
    font-size:95%;
}
h1 { font-size: 110%;
     line-height:0.1em;
     font-weight: normal;
}
.area:nth-child(even){ /*偶数番目の領域のバックグランド色*/
  background-color: #cfd;
}
.area:nth-child(odd) { /*奇数番目の領域のバックグランド色*/
  background-color: #cdf;
}
.ex {
    padding-left: 30px;
    background: url(speaker20.png) no-repeat left center;
}

/*以下、文章の形式を整形する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字下げ　 例　・などがある場合　*/