@charset "UTF-8";

/** ボタン **/
.disp-box label {
    display: inline-block;
    color: #332c10;                   /* ボタンの文字色 */
    background-color: #ffdb4f;        /* ボタンの背景色 */
    font-weight: bold;                /* 文字の太さ */
    padding: 0.5em 1em;               /* ボタン内側の余白 */
    border-bottom: solid 4px #ccb03f; /* ボタンの影部分 */
    border-radius: 3px;               /* 角丸 */
    cursor: pointer;                  /* ボタンにカーソルを合わせた時に指アイコンを表示 */
}
/** ボタンクリック時のボタンを押し込む動作 **/
.disp-box label:active {
    -webkit-transform: translateY(4px); /* Chrome、Safari用 */
    -moz-transform: translateY(4px);    /* Firefox用 */
    -ms-transform: translateY(4px);     /* IE用 */
    transform: translateY(4px);
    border-bottom: none;
}
/** チェックボックス **/
.disp-box input {
    display: none; /* 非表示 */

}
/** 表示・非表示を切り替えるテキスト（「クリックされました！」の部分） **/
.disp-box .text {
    color: #C9171E;    /* 文字色 */
    font-weight: bold; /* 文字の太さ */
    overflow: hidden;
    opacity: 0;        /* 文字を非表示 */
    transition: 0.2s;  /* 文字が表示・非表示される時のスピード */
    height: 0;
    padding: 0;
}
/** チェックボックスにチェックが入った時の、テキストの処理 **/
.disp-box input:checked ~ .text {
    height: auto;
    opacity: 1; /* 文字を表示 */

}