@charset "UTF-8";
 /* --- BOXの定義 -------------------------------------------------*/
 .sample3a {
    position      : relative;            /* タイトル用に親要素定義  */
    box-sizing    : border-box;          /* 罫線・余白も含む大きさ  */
    margin        : 0;                   /* BOXの位置               */
    max-width     : 500px;               /* BOXの最大横幅           */
    background    : #fff;                /* BOXの背景色             */
    padding       : 20px 10px 5px 10px; /* BOX内の余白             */
    border        : 3px solid #0059b3;   /* BOXの枠線               */
    font-size     : 16pt;                /* BOXの文字サイズ         */
    text-align    : center;              /* BOXの文字位置           */
    border-radius : 10px;                /* タイトルの角丸          */
    background-color: #fff;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    margin: 10px 0 0 0;
  }
  .sample3a::before {
    position      : absolute;          /* 親からの相対位置の定義  */
    display       : inline-block;      /* インラインボックス定義  */
    box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
    line-height   : 1;                 /* 1行の高さを初期化       */
    background    : #0059b3;           /* タイトル背景色          */
    color         : #ffffff;           /* タイトルの文字色        */
    content       : attr(title);       /* タイトルに[title]を表示 */
    font-weight   : bold;              /* タイトルは太字          */
    padding       : 8px 10px;          /* タイトル内の余白        */
    top           : -15px;             /* タイトル上位置はマイナス*/
    left          : 12px;              /* タイトル右位置は1文字分 */
    border-radius : 6px;               /* タイトルの角丸          */
    font-size     : 20px;              /* タイトルの文字サイズ    */
    font-family:メイリオ;
    text-decoration:none;
  }
  .testtest::before {
    background    : #ffaf58 !important;           /* タイトル背景色          */
  }

  .sample3a:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    border        : 3px solid #ffaf58;
  }
  
  
/*全体*/
.hidden_box {
    margin: 2em 0;
    padding: 0;
}
.t{
    display: table;
    vertical-align: middle;
    text-align: center;
    position: relative;
    left: 42%;
    width: 200px;
    height: 60px;
    font-family: HG創英角ﾎﾟｯﾌﾟ体;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 45px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;

}
/*ボタン装飾*/
.hidden_box label {
    font-family:HG創英角ﾎﾟｯﾌﾟ体;
    position:relative;
    font-size:20px;
    border-radius: 45px;
    cursor :pointer;
    transition: .5s;
}




/*ボタンホバー時*/
.hidden_box label:hover {
    
        background-color: #2EE59D;
        box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
        color: #fff;
        transform: translateY(-7px);
        
     
}


/*チェックは見えなくする*/
.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;
}