body{
 text-align: center;
 letter-spacing: 1px;
 line-height: 1.7;
 font-size: 17pt;
 font-family: 'Segoe UI',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
 background: #d8ccdd;
 color: #0c0c0c;
}
#box{
 width: 900px;
 margin: 10px auto;
 padding: 0;
 text-align: left;
 background-color: #f7f7f7;
 color: #0c0c0c;
}
.text{
 margin: 0;
 padding: 0;
 text-align: left;
}
.text p{
 margin: 0;
 padding: 0 20px;
 text-align:justify;
 text-justify: distribute-all-lines;
}
.footer{
 margin: 0 10px;
 padding: 0px;
 text-align: center;
 border: 1px #000000 dotted;
}
.other{
 margin: 0 10px;
 padding: 10px;
 text-align: left;
 border: 1px #000000 dotted;
}
h1{
 font-size: 25pt;
 margin: 0 10px;
 padding: 5px 0 0 0;
 text-align: right;
 border-bottom: 6px #d8ccdd double;
 background: #f7f7f7;
 color: #000000;
}
h2{
 font-size: 10pt;
 margin: 0 10px;
 padding: 5px 0 0 0;
 text-align: right;
 border-top: 1px #CC0000 solid;
 color: #000000;
}
a{
 color: #1F1F1F;
}
a:hover{
 color: #B3B3B3;
 text-decoration: none;
}
-->

/*全体*/
.hidden_box {
　　text-align: left;
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px;
    cursor :pointer;
    text-align: center;

}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #e8f2ed;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}