body{margin-left: auto;
margin-right: auto;
width: 100%;}

img{border: none;webkit-backface-visibility: hidden;}

.erase{display:none;}

.readmore{
    position: relative;
    box-sizing: border-box;}

.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 200px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);}

/* 続きを読むボタン */
.readmore-label{
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 0 10px;
    background-color: #00cc00;
    border-radius: 10px;
    color: #FFF;}

.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;}


#box{width: 80%;
border-left: solid 50px #004080;
border-right: solid 50px #004080;
padding: 20px 10px 20px 10px;}

#main{background-color: #004080;
padding: 5px 0px 5px 0px;width: 96%;}

h1, h2{background-color: #004080;
width: 90%;}

h1{color: white;font-size: 25px;}
h2{color: yellow;font-size: 21px;margin-top: 0px;}

#time_publish, #time_modify{font-size: 10px;text-align: right;width: 96%;}
#time_publish2{background-color: black; color: white;font-weight: bold;padding: 1px 5px 1px 5px;}

#beginning, .explain, .paragraph{font-size: 15px;line-height: 2.0em; text-align: left;width: 88%;}
#beginning{margin: 5% 0px 0% 0px;}
.explain{margin-bottom: 25px;}

.title{font-size: 17px;
font-weight: bold;
margin-left: 10px;
margin-bottom: 1.0em;
text-align: left;}

#picture1{width: 90.4%;height: auto;}
#picture2{width: 79.4%;height: auto;}
#picture3{width: 88%;height: auto;}
#picture4{width: 80.6%;height: auto;}
#picture5{width: 94.4%;height: auto;}
#picture6{width: 82%;height: auto;}

#picture7{width: 23.74%;height: auto;vertical-align: top;}
#picture8{width: 19.68%;height: auto;vertical-align: top;margin-left: 5%;margin-right: 5%;}
#picture9{width: 22.5%;height: auto;vertical-align: top;}

#picture10{width: 78.4%;height: auto;}
#picture11{width: 72.2%;height: auto;}

#picture12{width: 94.2%;height: auto;}
#picture13{width: 80%;height: auto;}

#picture14{width: 13.6%;height: auto;}

#picture15{width: 62%;height: auto;}
#picture16{width: 41.4%;height: auto;}
#picture17{width: 33.2%;height: auto;margin-left: 4.4%;margin-right: 4%;}
#picture18{width: 42.6%;height: auto;}

.left_box44{float: left;text-align: left;width: 46%;}
.right_box44, .right_box44b{float: right;margin-left: 0px;width: 44%;}
.right_box44b{font-size: 15px; font-weight: bold;line-height: 1.5em;padding-bottom: 5%;text-align: center;}

.box_right
{background-color: #ffffff;
font-size: 15px;
font-weight: bold;
line-height: 1.5em;
margin-top: 25px;
padding: 5px;}

#left_box-jersey{float: left;width: 44%;}
#right_box-jersey{float: right;width: 44%;}



.horizon, #horizon{margin: 5% 0px 5% 0px;}
#horizon{width: 88%;}

#logo2{margin-right: 1%;height: auto;width: 3%;vertical-align: middle;}
#replisome{height: auto;width: 16.8%;}

.back_blue{background-color: #00ffff;}
.back_yellow{background-color: #ffff00;}
.back_blue, .back_yellow{font-weight: bold;padding: 2px 20px 2px 20px;}

.weight{border: solid 1px gray;margin-bottom: 5%;margin-top: 5%;padding: 5px 0px 5px 0px;width: 70%;}
.balance, .balance2, .balance3{float: left;margin-left: 2%;width: 30%;}
.balance{padding-top: 50px;}
.balance3{padding-top: 10px;}

#problem{margin-bottom: 3.0em;margin-top: 3.0em;text-align: center;}
.problem{margin-right: 30px;vertical-align: top;}

#blue{color: #0000ff;font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 7%;}
.brown{color: #cc0000;font-weight: bold;}

#comparison, .calculate, .center2{font-size: 18px;font-weight: bold;text-align: center;margin-top: 2em;}
.calculate{margin-left: 0px;}
.comparison1, .comparison2{font-size: 15px;line-height: 2.0em;margin-bottom: 1.5em;margin-left: 0px;text-align: center;}
.comparison1{float: left;width: 40%;}
.comparison2{float: right;width: 45%;}

#size{width: 60%;}

.new_line{margin-top: 2.3em;}
.conclusion{background-color: #00ff80;
font-size: 17px;
padding:1px 5px 1px 5px;}
.conclusion2{margin-bottom: 2.5em;margin-left: 75px;width: 80%;}

.center{font-size: 15px;margin-left: 0px;text-align: center;}
#right{padding-top: 5em;margin-top: 5em;text-align: right;}

.appendix1, .appendix3{float: left;margin-left: 0px;margin-top: 1.5em;text-align: left;}

.appendix1{width: 56%;}
.appendix3{margin-top: 4.0em;width: 40%;}

.appendix2, .appendix4{float: right;}
.appendix2{margin-left: 10%;width: 34%;}
.appendix4{margin-left: 0px;margin-top: 4.0em;width: 55%;}

.margin-left0{margin-left: 0px;margin-top: 3.0em;width: 100%;}



.left{text-align: left;}
.space0{clear: both;}
.space{height: 30px;}
.space2, .space2b50{clear: both;}
.space2b50{height: 70px;}
.space3{clear: both;
height: 70px;}




.figure{
border: 2px solid #000000;
line-height: 1.7em;
margin-bottom: 40px;
padding: 5px 0px 5px 0px;
font-size: 12px;
width: 82%;}

.figure2{background-color: black;
color: white;
font-size: 17px;
font-style: italic;
font-weight: bold;
padding: 2px 15px 2px 15px;
text-align: left;}

.figure3, .figure4a, .figure4c{
float: left;
margin-left: 5px;
text-align: center;}

.figure3, .figure4a{width: 31%;}

.figure3, .figure4a{padding-top: 50px;}
.figure4c{padding-top: 40px;}

.figure3a{text-align: center;
float: left;
font-size: 23px;
font-weight: bold;
margin-left: 0px;
padding-top: 80px;
width: 5%;}

.figure3b, .figure3b2{text-align: center;
float: left;
width: 25%;}

.figure3b2{padding-top: 48px;}

.figure4{text-align: center;
float: left;
padding-top: 30px;}

.figure4a, .figure4c{font-size: 16px;font-weight: bold;}

.figure4a{width: 25%;}
.figure4c{width: 10%;}

.figure4b, .figure4b2{text-align: left;
float: left;
margin-left: 20px;
width: 20%;}

.figure4b{padding-top: 40px;}
.figure4b2{padding-top: 20px;}

.note{color: #0000ff;
font-size: 12px;
font-weight: bold;
vertical-align: super;}

#top{
background: rgba(204,204,204,0.5);
border: 1px solid #999999;

font-weight: bold;
padding: 5px;
display: block;
height: auto;
position: fixed;
padding: 3px;
bottom: 2%;
right: 1%;
text-align: center;
width: 10%;}

#top A:link {color:#000000 ; text-decoration:none;}
#top A:visited {color:#000000 ;  text-decoration:under-line;}
#top A:active {color:#ff0000 ;  text-decoration:under-line;}
#top A:hover {color:#00ffff ;  text-decoration:under-line;}

#close{
font-size: 20px;
font-weight: bold;
margin-bottom: 5%;
margin-left: 0px;
margin-top: 10%;
text-align: center;}

#close A:link {color:#000000 ;  text-decoration:underline ;display: block;width: 100%;}
#close A:visited {color:#800000 ;  text-decoration:underline ;}
#close A:active {color:#ff0000 ;  text-decoration:none ;}
#close A:hover {color:#00ffff ;  text-decoration:none ;}


#add{border: 1px solid #999999;font-size: 15px;text-align: left;margin-bottom: 50px;margin-top: 50px;padding: 5px 0px 5px 5px;}
#addition{background-color: black;color: white;font-weight: bold;padding: 1px;}

#add2 A:link {color:#000000 ; text-decoration:under-line;}
#add2 A:visited {color:#000000 ;  text-decoration:under-line;}
#add2 A:active {color:#ff0000 ;  text-decoration:under-line;}
#add2 A:hover {color:#00ffff ;  text-decoration:under-line;}

.correct{color: #ff0000;
font-size: 14px;
font-weight: bold;
vertical-align: super;}

.correct A:link {color:#ff0000 ; text-decoration:none ;}
.correct A:visited {color: #ff0000 ; text-decoration:none ;}
.correct A:active {color:#ff0000 ; text-decoration:none ;}
.correct A:hover {color:#00ffff ; text-decoration:none ;}

A:link {color:#000000 ; text-decoration:underline ;}
A:visited {color:#000000 ; text-decoration:underline ;}
A:active {color:#ff0000 ; text-decoration:none ;}
A:hover {color:#00ffff ; text-decoration:none ;}