@charset "UTF-8";

/*************
共通設定
*************/

* {
    box-sizing: border-box;
}

html {
    background: #ffffe0;
    padding: 10px;
}

body {
    width: 1040px;
    margin: 0 auto;
    box-shadow: 3px 3px 5px grey;
    /* 右下に影をつくる。-だと左上の影になる */
}

img {
    vertical-align: bottom;
    /*  vw=view_widthという単位。横幅いっぱいに、という意味  */
}

/*************
メイン
*************/

/*************
ボタン
*************/

section.btn {
    width: 1040px;
    height: 200px;
    background-image: url("../images/click.jpg");
    padding-top: 98px;
}

.anime {
    margin-left: 170px;
    /*アニメーションボタンの名称を任意で付ける*/
    animation-name: btn_anime;
    /*アニメーションの再生時間の設定*/
    animation-duration: 0.5s;
    /*アニメーションの速度変化の設定*/
    animation-timing-function: ease-in-out;
    /*アニメーション開始までの時間の設定*/
    animation-delay: 0s;
    /*アニメーションの再生回数の設定*/
    animation-iteration-count: infinite;
    /*アニメーションの再生方向の設定*/
    animation-direction: alternate;
}

/*アニメーションの詳細設定*/

@keyframes btn_anime {
    /*アニメーションがスタートする時点の記述*/
    0% {
        /*変形要素の設定*/
        transform: scale(1, 1);
        /*縦横の比率*/
    }
    /*アニメーションが終了する時点の記述*/
    100% {
        transform: scale(1.05, 1.05);
    }
}

/*************
フッター
*************/

footer {
    height: 200px;
    color: white;
    background-image: url("../images/footer.jpg");
    color: white;
}
footer h3{
    font-size:2em;
    padding:50px 50px 10px;
}
footer ul {
    padding:0 80px;
    font-size:1.2em;
    line-height: normal;
}