.hidden_box {
 margin: 10px 0;
 padding: 0;
 text-align: center;
}

.hidden_box label {
 border: 1px solid #ddd;
 border-radius: 5px;
 cursor: pointer;
 font-weight: bold;
 margin: 0 auto;
 padding: 10px;
 min-width: 50%;
}

.hidden_box label:hover {
 background: #f5f5f5;
}

.hidden_box label:after {
 content: "を表示";	/* 閉じている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input {
 display: none;
}

.hidden_box .hidden_show {
 height: 0;
 overflow: hidden;
 opacity: 0;
 padding: 0;
 text-align: left;
 transition: 0.5s;
}

.hidden_box input:checked + label:after {
 content: "を非表示";	/* 開いている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input:checked ~ .hidden_show {
 height: auto;
 opacity: 1;
 padding: 10px 0;
}

.detail{
    border: 1px solid #c5c5c5;
    margin: 20px auto ;
    width:96%;
    font-size: 20px;
    text-align: center;
}

.detail th{
    padding: 10px;
    background-color:#e0ecec;
    width: 20%;
}

.detail td{
    padding: 10px;
}

@media screen and (max-width: 710px){
    .detail{
        font-size: 25px;
    }
}

.detail2{
    border: 1px solid #c5c5c5;
    margin: 20px auto ;
    width:90%;
    font-size: 20px;
    text-align: center;
}

.detail2 td{
    padding: 10px;
}

@media screen and (max-width: 710px){
    .detail2{
        font-size: 25px;
    }
}