button.graphicbtn1 {
    /* 文字の太さをboldに指定 */
    font-weight: bold;

    /* 縦方向に10px、
	* 横方向に30pxの余白を指定 */
    padding: 0px 0px;

    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    /* ボタンの影の指定
     * 影の横幅を2px
     * 縦長を2px
     * ぼかしを3px
     * 広がりを1px
     * 色を#666（グレー）に指定 */
    box-shadow: 2px 2px 3px 1px #666;
    -moz-box-shadow: 2px 2px 3px 1px #666;
    -webkit-box-shadow: 2px 2px 3px 1px #666;

    /* テキストの影の指定
     * 影の横幅を1px
     * 縦長を1px
     * ぼかしを2px
     * 色を#000（黒）に指定 */
    text-shadow: 1px 1px 2px #000;

    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #8E3E1F, #41241c 50%, #8E3E1F);
    background: -webkit-gradient(linear, left bottom, left top, from(#8E3E1F), color-stop(0.5, #41241c), to(#8E3E1F));

    /* 角丸の指定 */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    cursor: default;
}

button.topbtn {
    /*幅指定*/
    width: 600px;
    height: 50px;
    margin: 20px;

    font-size: 28px;
}
button.smallbtn {
    /*幅指定*/
    width: 80px;
    height: 35px;
    margin: 20px;

    font-size: 26px;
}
/* スマホだけに適用するCSS */
@media screen and (max-width:700px)
{
    button.topbtn {
        /*幅指定*/
        width: 250px;
        height: 50px;
        margin: 10px;

        font-size: 16px;
    }
    button.smallbtn {
        /*幅指定*/
        width: 80px;
        height: 35px;
        margin: 10px;

        font-size: 16px;
    }
}
button.graphicbtn:hover {
    /* グラデーションの指定 */
    background: -moz-linear-gradient(bottom, #ffd9c6, #ffb18c 50%, #ffd9c6);
    background: -webkit-gradient(linear, left bottom, left top, from(#ffd9c6), color-stop(0.5, #ffb18c), to(#ffd9c6));
    cursor: pointer;
}

button.graphicbtn {
    border-radius: 4px;
    /* 文字色を白色に指定 */
    color: #fff;

    /* ボーダーをなくす */
    border-style: none;

    -webkit-box-shadow: inset 0 1px 1px #000;
    -moz-box-shadow: inset 0 1px 1px #000;
    box-shadow: inset 0 1px 1px #000;
    
    background: #7DBB3C; /* Old browsers */
    background: -moz-linear-gradient(bottom, #8E3E1F, #41241c 50%, #8E3E1F);
    background: -webkit-gradient(linear, left bottom, left top, from(#8E3E1F), color-stop(0.5, #41241c), to(#8E3E1F));
    background: -o-linear-gradient((bottom, #8E3E1F, #41241c 50%, #8E3E1F)); /* Opera 11.10+ */
    background: -ms-linear-gradient((bottom, #8E3E1F, #41241c 50%, #8E3E1F)); /* IE10+ */
    background: linear-gradient((bottom, #8E3E1F, #41241c 50%, #8E3E1F)); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8E3E1F', endColorstr='#8E3E1F', GradientType=0); /* IE7,8,9 */
}