@charset "utf-8";

/* ===================================================================
リセット
=================================================================== */
* { box-sizing: border-box;}
 ::before,::after {box-sizing: inherit;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,
th,td{margin:0;padding:0}
html{overflow-y:scroll;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ol,ul{list-style:none}fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
caption{text-align:left_side_menu}
address,caption,cite,code,dfn,strong,th,var{font-style:normal;font-weight:normal}
a:active,a:focus{outline:0}
/*-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-box-sizing:border-box;*/



/* ===================================================================
common
=================================================================== */
html{font-size:62.5%;}  /* font-sizeは16pxの62.5%の10px 聞いていない場合は16pxがデフォルト*/
body{font-size:1.6em; margin:10px auto}  /*1em=16px*/
body {
  font: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

#content{margin:0 20px}

a:link{text-decoration:none;color:darkgreen}
a:visited{text-decoration:none;color:green}

strong{font-weight:bold}
img{max-width:100%;}
p{line-height:1.5;}
/* ===================================================================
header
=================================================================== */
header{margin-top:10px}
h1{font-size:180%;margin:auto;text-align:center;}	
.langSwitch{text-align: center;padding:5px}
	
/* ===================================================================
top_MSG
=================================================================== */
#top_MSG{padding:20px;font-size:115%;background-color:#FFFFCC}
#top_MSG li{margin-left:20px;
list-style-type:disc;}

/* ===================================================================
navi
=================================================================== */
#navi{margin:10px 0 0;padding:10px 0px;}
#navi ul{display:flex;}
#navi ul li{flex-basis:100%;font-size:110%;height:40px;background:yellowgreen;padding:5px;margin-right:1px;padding:8px 0 0 15px}
#navi li.selected{color:white;}
#navi ul li a, #navi ul li{color:darkgreen;}
#navi ul li a:hover{color:white;}
#navi ul li .fas{margin-right:5px}

/* ===================================================================
Performance Assessment
=================================================================== */
.DivisionTable, .AssesmentTable{margin:auto 10px}
ul.division{display:flex; flex-wrap:wrap; align-content:space-between;}
ul.division li{flex-basis:150px; height:35px; align-self:center;margin:2px;padding:5px 0 0 10px;background-color:#e7f3ce;font-size:1.8rem}
.btn{margin-top:10px;padding:7px;font-size:102%;}
h3.direction{background:none}

/* ===================================================================
Performance Assessment Result
=================================================================== */
.tableA, .tableB{margin:10px}
.tableA th{background-color:#e7f3ce;font-weight:bold;padding:0.5em 1em;font-size:1.8rem}
.tableA td{padding:0.5em 1em;font-size:1.8rem}
.tableA th, .tableA td, .tableB th, .tableB td{ border:solid 1px silver}
.tableB thead th{font-weight:bold;padding:0.5em 1em;background-color:#ededed ;}
.tableB tbody th, .tableB tbody td{padding:0.5em 1em;text-align:left;}
colgroup#function, colgroup#indicator{width:40%}
#aspect{width:30%}
.tableB tbody th:first-child{vertical-align: top;}


.exNote{margin:10px;font-size:1.4rem ;}
.txtBrown{color:#a0522d;font-weight: bold;}

/* ===================================================================
further info main content 
=================================================================== */
h2{margin:10px 0;padding: 0.3em 0.5em;color:#6B8E23;background: #e7f3ce;
  border-left: solid 5px #6B8E23;font-size:110%}
h3{background:linear-gradient(transparent 80%, #FFFFCC 80%);margin:7px 0 7px 10px;font-weight:bold;font-size:105%}

iframe{display:block;margin:0 auto}


/*PASheet*/
.district {margin:0.5em 1em;padding: 0;max-width:100%;/*最大幅*/}
.district input{display:none}
.district label {display: block;margin:5px 0;padding: 0.3em 0.5em;color :#6B8E23;font-weight: bold;background :#e7f3ce;font-size:110%;transition: all 0.5s;}

/*ラベルホバー時*/
.district label:hover {background :#aad553;color:white}


/*中身を非表示にしておく*/
.district .zila_upazila{height: 0;padding: 0;overflow: hidden;opacity: 0;}


/*クリックで中身表示*/ 
.accordion:checked + label + .zila_upazila{height: auto;padding: 5px;opacity: 1;
transition: 0.5s;}

/*アイコンを表示*/
.district label:before {content:'\f054';font-family:"Font Awesome 5 Free";padding-right:5px;}
.accordion:checked + label:before{content:'\f078';}

.zila_upazila ul{overflow:hidden;margin:0 0 0.5em 0.7em;padding:0.3em 0 0.3em 1em;background:#ededed}
.zila_upazila li{float:left; padding:3px 10px;width:150px;line-height:2em;}
.zila_upazila li a{display:block;text-decoration:underline;color:darkgreen}
.zila_upazila li a:hover{background-color:#FFFFCC}

/*tips*/
.tips_list{margin:3px 15px;line-height:1.5em;}
.tips_list a:hover{background-color:yellowgreen;color:white}

table.guide{margin:10px}
table.guide th{background-color:#ededed;font-weight:bold;padding:0.5em 1em;border-right:solid 1px white;border-bottom:solid 1px white}
table.guide td:first-child{background-color:#e7f3ce;padding:0.5em 1em;border-right:solid 1px white;vertical-align:top;line-height:1.5em;width:70%}
table.guide td:last-child{background-color:#FFFFCC;padding:0.5em 1em;border-right:solid 1px white;vertical-align:top;line-height:1.5em}

ul.tips li{list-style:disc;margin-left:15px}
ul.remark li:before{content:'*'
}

p.back_to_top{font-size:85%;text-align:right}
p.back_to_top a{text-decoration:underline;color:darkgreen}
.fas.fa-arrow-up{margin-right:5px;font-size:85%;color:darkgreen}

.GoToHome{text-align:center}
.GoToHome a{color:darkgreen}





/* ===================================================================
footer
=================================================================== */
footer{font-size:95%;text-align:center;border-top:solid 1px #006600;margin-top:15px;padding-top:10px
}


@media (max-width: 600px){
	
#content{margin:10px}
}

@media (max-width: 400px){
#navi{margin:0;padding:0}
h1{font-size:150%}	
#navi ul{font-size:90%; padding:10px 0 0 0}

}