#jpindex { width: 100%; text-align: left;  /* chart*/ /* btn*/ }

#jpindex .main_content { width: 100%; padding: 0px 0px 0px; overflow: hidden; }

#jpindex .jpindex_head { width: 100%; }

#jpindex .jpindex_head .logo_area h3 { padding: 10px 0px 5px 22px; float: left; height: 22px; }

#jpindex .datepickerwrap { overflow: hidden; zoom: 1;}

#jpindex .datepicker { display: inline-block; position: relative; top:0px;  margin-bottom: 30px; cursor: pointer; }

#jpindex .datepicker img { width: 25px; height: 25px; position: absolute; top: 4px; left: 3px; }
    
#jpindex .datepicker-input { width: 110px; font-size: 12px; padding: 8px 8px 8px 30px; border: 1px solid #999; border-radius: 2px; }

#jpindex .head_move { width: 100%; z-index: 999; position: relative; }

#jpindex .logo_area { width: 100%; background: #0A3B79; overflow: hidden; }

#jpindex .jpindex { width: auto; padding: 30px 0px; margin: 10px 22px 0px; text-align: left; }

#jpindex .title { font-size: 28px; color: #8E8E8E; margin-bottom: -2px; }

#jpindex .titlearea { position: relative; text-align: center; border-bottom: 1px solid #D8D8D8; margin-bottom: 17px; padding: 0 10px; }

#jpindex .titlearea-inner { margin: 0 auto; }

#jpindex .leadarea { padding: 0 10px; text-align: left; }

#jpindex .chartarea .chart-valuenav { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 10px; margin-bottom: 18px; }

#jpindex .chartarea .chart-valuenav-list { width: 61px; height: 61px; font-size: 10px;border: 1px solid #4182BD; border-radius: 2px; list-style: none; padding: 0; margin-right: 12px; }

#jpindex .chartarea .chart-valuenav-list-explain { width: 91px; height: 61px; border: 1px solid #4182BD; border-radius: 2px; list-style: none; padding: 0; margin-right: 12px; }

#jpindex .chartarea .chart-valuenav-list-detail { width: 91px; height: 61px; border: 1px solid #4182BD; border-radius: 2px; list-style: none; padding: 0; margin-right: 12px; }

#jpindex .chartarea .chart-valuenav-list:hover { background: #4182BD; }

#jpindex .chartarea .chart-valuenav-list.active { background: #4182BD; }

#jpindex .chartarea .chart-valuenav-list.active a { cursor: default; }

#jpindex .chartarea .chart-valuenav-list-link { display: block; line-height: 1; }

#jpindex .chartarea .chart-main { display: -webkit-box; display: -ms-flexbox; display: block; padding: 0 10px; margin-bottom: 24px; width: 100%; }

#jpindex .chartarea .chart-main-nav { width: 125px; font-size: 14px; margin-left: 5px; float: left; }

#jpindex .chartarea .chart-main-nav .disabled { color: #b3b2b2; }

#jpindex .chartarea .chart-main-view { width: calc(100% - 174px); border: 1px solid #D8D8D8; padding: 50px 0; margin-right: auto; float: left; }

#jpindex .chartarea .chart-main-view .highcharts-background { stroke: white; }

#jpindex .chartarea .chart-main-nav-openudp { text-align: left; margin-top: 16px; }

#jpindex .chartarea .chart-main-nav-openudp-item { margin-bottom: 12px; }

#jpindex .chartarea .chart-main-nav-openudp-item input { vertical-align: text-top; }

#jpindex .chartarea .chart-main-nav-toggle-item span.btn.style01:hover { color: #fff; background: #4182BD; }

#jpindex .chartarea .chart-main-nav-toggle-item.toggleactive span.btn.style01 {color: #fff;border: 1px solid #4182BD;-webkit-box-sizing: border-box;box-sizing: border-box;}

#jpindex .chartarea .chart-main-nav-modal-item { width: 125px; margin-bottom: 8px; }

#jpindex .chartarea .chart-main-nav-modal-item.disabled { color: #b3b2b2; border: 1px solid #b3b2b2; }

#jpindex .chartarea .chart-main-nav-modal-item a.btn.style01:hover { color: #fff; background: #4182BD; }

#jpindex .btn {display: block;height: 34px;line-height: 34px;border-radius: 2px;text-decoration: none;text-align: center;}

#jpindex .btn.style01 {color: #4182BD;border: 1px solid #4182BD;-webkit-box-sizing: border-box;box-sizing: border-box;}

#jpindex .btn.style02 { color: #fff; border: 1px solid #4182BD; background: #4182BD; -webkit-box-sizing: border-box; box-sizing: border-box; }

#jpindex .btn.style03 { color: #fff; border: 1px solid #BD4141; background: #BD4141; -webkit-box-sizing: border-box; box-sizing: border-box; }


.modal-explain { font-size: 100%;width: 900px; margin-bottom: 8px; }
.modal-explain .img4{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:0%;
	width: 100%;

}
.modal-explain p  {
text-align: left;
}
.modal-explain h1  {
font-size: large;
}
.modal-explain .top li  {
position:relative;
top:-30px;

list-style-type: disc;
text-align: left;
}

.modal-explain ul li {
font-size: large;
list-style-type: disc;
text-align: left;
}
.modal-explain ul ul li {
font-size: medium;
list-style-type: square;
text-align: left;
}

.explain_calc{
	border-style: solid;
	border-width: 1px;
	padding: 10px 5px 10px 20px; 
}
.formula{
  position: relative;  
  left: 10%; 
}

.ex-container{
position:relative; 
font-size: 100%;
    width: 100%;
    margin: 8px auto;
}

list-style-type: disc;
.ex-container h2{
    font-size: xx-large;
    
    border-bottom: 1px solid black;
}
.ex-container h3{
	color: #66CCCC;
    font-size: large;
}


.ex-container label{
    width: 100%;
    text-align: left;

    margin: auto;
    padding: 12px 5px;
    position: relative;
    display: block;
    height: 10px;
    color: #000;
}
.ex-container label:hover{
}
.ex-container label:before{
	content: url("../img/icon01.gif");
	position: absolute;
	top: 18px;
	left: -10px;

}
.ex-container:after{

  border: 1px solid #000;
  border-bottom: 0;
}

.ex-container input{
   display: none;
}

.ex-container img{
position: relative;

}

.ex-container .img1{
	position:relative;
	top: 0px;
	width: 30px;
	height: 30px;
	float: left;
}

.ex-container .img2{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:20%;
	height: 100%;

}
.ex-container .img3{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:20%;
	width: 70%;

}
.ex-container .img4{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:0%;
	width: 100%;
}
.ex-container .img5{
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
	position:relative;
	left:0%;
	width: 15%;
	float:left;
}

.ex-container .top li  {
position:relative;
top:-30px;

list-style-type: disc;
text-align: left;
}

.ex-container ul li {

font-weight: bolder;
text-align: left;
}
.ex-container ul.circle li {

font-weight: normal; 
list-style-type: circle;
text-align: left;
	position:relative;
	left:10%;
}

.ex-container2 ul li {

list-style-type: circle;
text-align: left;
}
.ex-container ul ul li {

list-style-type: disc;
text-align: left;
}

.ex-container input:checked ~ div{
   transition: 
   height 0.5s ease-in-out, 
   box-shadow 0.1s linear;

}


/* �����̒�` */
.ex-container input:checked ~ div.ac,div.math{
   height: 100%;
}

.ex-container span{

}
.ex-container .s2{
color: #4070a0
}
.ex-container .m { color: #208050 }
.ex-container .k{
color: #007020;
font-weight: bold;
}

.ex-container p{
	margin:1em 0 0 0;

}

.ex-container h2{
	margin:1em 0 1em 0;
	text-align: left;
	border-bottom: solid 1px #555;
	
}

.ex-container pre{
	text-align: left;
	
}


.ex-container .calucuration{
background-color:#f8f8f8;
}


.ex-container table.docutils {
	width:100%;
	border-collapse: collapse;

}

.ex-container-e{
position:relative; 
font-size: 100%;
    width: 100%;
    margin: 8px auto;
}

list-style-type: disc;
.ex-container-e h2{
    font-size: xx-large;
    
    border-bottom: 1px solid black;
}
.ex-container-e h3{
	color: #66CCCC;
    font-size: large;
}


.ex-container-e label{
    width: 100%;
    text-align: left;

    margin: auto;
    padding: 12px 5px;
    position: relative;
    display: block;
    height: 10px;
    color: #000;
}
.ex-container-e label:hover{
}
.ex-container-e label:before{
	content: url("../img/icon01.gif");
	position: absolute;
	top: 18px;
	left: -10px;

}
.ex-container-e:after{

  border: 1px solid #000;
  border-bottom: 0;
}

.ex-container-e input{
   display: none;
}

.ex-container-e img{
position: relative;

}

.ex-container-e .img1{
	position:relative;
	top: 0px;
	width: 30px;
	height: 30px;
	float: left;
}

.ex-container-e .img2{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:20%;
	height: 100%;

}
.ex-container-e .img3{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:20%;
	width: 70%;

}
.ex-container-e .img4{
	margin-top: 10px;
	margin-bottom: 10px;
	position:relative;
	left:0%;
	width: 100%;
}
.ex-container-e .img5{
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
	position:relative;
	left:0%;
	width: 15%;
	float:left;
}

.ex-container-e .top li  {
position:relative;
top:-30px;

list-style-type: disc;
text-align: left;
}

.ex-container-e ul li {

font-weight: bolder;
text-align: left;
}
.ex-container-e ul.circle li {

font-weight: normal; 
list-style-type: circle;
text-align: left;
	position:relative;
	left:10%;
}

.ex-container-e2 ul li {

list-style-type: circle;
text-align: left;
}
.ex-container-e ul ul li {

list-style-type: disc;
text-align: left;
}

.ex-container-e input:checked ~ div{
   transition: 
   height 0.5s ease-in-out, 
   box-shadow 0.1s linear;

}


/* 高さの定義 */
.ex-container-e input:checked ~ div.ac,div.math{
   height: 100%;
}

.ex-container-e span{

}
.ex-container-e .s2{
color: #4070a0
}
.ex-container-e .m { color: #208050 }
.ex-container-e .k{
color: #007020;
font-weight: bold;
}

.ex-container-e p{
	margin:1em 0 0 0;

}

.ex-container-e h2{
	margin:1em 0 1em 0;
	text-align: left;
	border-bottom: solid 1px #555;
	
}

.ex-container-e pre{
	text-align: left;
	
}


.ex-container-e .calucuration{
background-color:#f8f8f8;
}


.ex-container-e table.docutils {
	width:100%;
	border-collapse: collapse;

}













table tr th,
table tr td {
	
	text-align: left;
    padding: 0 10px;
    border: 1px solid #DDD;
    vertical-align: middle;
}

table tr th {

    text-align: center;
    font-weight: bold;
}

table#explain {
	border-style:none; 

    border-collapse: collapse;
    border-spacing: 0;
}

table#explain th {
    padding: 5px;
	border-style:none; 
    border-width: 0 0 1px 1px;
    background: #F5F5F5;
    font-weight: bold;
    line-height: 100%;
    text-align: center;
}
table#explain td {
	width: 50%;
    padding: 5px;
	border-style:none; 
    border-width: 0 0 1px 1px;
    text-align: left;
}
table#history {
	border-style:none;
	border: 1px #000000 solid; 

}

table#history th {
    padding: 5px;
	border-style:none; 
    text-align: left;
    border: 1px #000000 solid; 

}
table#history td {
	vertical-align: top; 
	border-style:none; 
    text-align: left;
    border: 1px #000000 solid; 

}
table#history td.date {
	vertical-align: top; 
	border-style:none; 
    text-align: left;
    border: 1px #000000 solid; 
    white-space: nowrap;
}