section{
    display: block;
    width: 60%;
    margin: 20px auto; /*上下20px 左右中央*/
    overflow: hidden;
}
article{
    width: 600px;    /*横幅の指定*/
    padding: 2.5%;  /*余白の指定*/
    margin-bottom: 30px;
    background-color: #f9f9f9;  /*背景色の指定*/
    overflow: hidden;   /*おまじない*/
    float: left;    /*フロートする*/
}
article:nth-child(2n){
    margin-left: 30px; /*2の倍数の記事は左側に余白を30px*/
}
article .date{
    font-size: 60%; /*文字サイズの指定*/
    color: orange;  /*文字色の指定*/
    border: 1px solid orange;   /*線を描く*/
    padding-top:3px;    /*文字上部の余白指定*/
    padding-bottom: 3px;    /*文字下部の余白指定*/
    padding-right: 6px; /*文字右側の余白指定*/
    padding-left: 6px;  /*文字左側の余白指定*/
    letter-spacing: 5px;    /*文字と文字の間隔をあける*/
    float: left;    /*フロートする*/
}
article h1{
    width: 100%;    /*横幅の指定*/
    font-size: 120%;    /*フォントサイズの指定*/
    color: #313131; /*文字色の変更*/
    letter-spacing: 3px;    /*文字と文字の間隔をあける*/
    padding-bottom:2px; /*文字下部の余白指定*/
    padding-top: 10px; /*文字上部の余白指定*/
    border-bottom: 1px solid #bababa;   /*文字の下部に線を描く*/
    margin-bottom: 15px;    /*セクションタイトルの下に余白をつくる*/
    float: left;    /*フロートする*/
}
article p{
    font-size: 80%;    /*フォントサイズの指定*/
    color: #313131; /*文字色の変更*/
    letter-spacing: 0px;    /*文字と文字の間隔をあける*/
    line-height: 200%;  /*行間をあける*/
    margin-bottom: 10px;    /*文字とボタンの間をあける*/
    float: left;    /*フロートする*/
}
article h3{
    width: 100%;    /*横幅の指定*/
    font-size: 100%;    /*フォントサイズの指定*/
    color: #313131; /*文字色の変更*/
    letter-spacing: 1px;    /*文字と文字の間隔をあける*/
    margin-bottom: 15px;    /*セクションタイトルの下に余白をつくる*/
    float: left;    /*フロートする*/
}
article .btn{
    color: #fff;    /*文字色の変更*/
    font-size: 80%;    /*フォントサイズの指定*/
    border: 1px solid rgba(64, 18, 180, 0.797);   /*線を描く（ホバー時のずれを防ぐため）*/
    background-color: rgba(64, 18, 180, 0.797);   /*背景色の指定*/
    padding-top: 10px;  /*文字上部の余白を指定*/
    padding-bottom: 10px;   /*文字下部の余白を指定*/
    padding-right: 30px;    /*文字右側の余白を指定*/
    padding-left: 30px; /*文字左側の余白を指定*/
    border-radius: 5px; /*線の角を丸くする*/
    letter-spacing: 5px;    /*文字と文字の間隔をあける*/
    text-decoration: none;  /*ブラウザ標準のリンク装飾をオフに*/
    overflow: hidden;   /*おまじない*/
    float: right;   /*フロートする*/
}
article .btn:hover{
    background-color: #fff; /*背景色の指定*/
    border: 1px solid rgba(64, 18, 180, 0.797); ;   /*線を描く*/
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;   /*ホバー時の変化をなめらかに*/
    color: rgba(64, 18, 180, 0.797); ;  /*文字色の指定*/
    overflow: hidden;   /*おまじない*/
}