@charset "utf-8";


/* -- webfont setting ------------------------------------------------------------ */

@font-face {
    font-family: 'icomoon';
    src: url('../font/icomoon.eot?llxs9x');
    src: url('../font/icomoon.eot?llxs9x#iefix') format('embedded-opentype'),
        url('../font/icomoon.ttf?llxs9x') format('truetype'),
        url('../font/icomoon.woff?llxs9x') format('woff'),
        url('../font/icomoon.svg?llxs9x#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* -- social button base setting ------------------------------------------------------------ */
#snsbtn {
    position: fixed;
    width: 260px;
    text-align: center;
    bottom: 20px;
    z-index: 100;
}

ul.social-button {
    position: relative;
    width: auto;
    bottom: 10px;
    left: 28px;
    float: left;
    list-style-type: none;
    line-height: 0;
    font-size: 1.1em;
}

ul.social-button li {
    display: inline-block;
    margin: 5px 5px;
}

ul.social-button li a {
    display: inline-block;
    padding: 10px 10px 10px;
    border-radius: 50px;
    text-decoration: none;
    color: #ffffff;
    vertical-align: middle;
}

ul.social-button li a:before {
    display: inline-block;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 130%;
    margin-right: 0px;
    vertical-align: middle;
}

ul.social-button li a:hover {
    opacity: 0.7;
}


/* -- twitter button ------------------------------------------------------------ */

ul.social-button li.twitter a {
    background: #333;
}

ul.social-button li.twitter a:before {
    content: "\e90d";
}


/* -- facebook button ------------------------------------------------------------ */

ul.social-button li.facebook a {
    background: #333;
}

ul.social-button li.facebook a:before {
    content: "\e900";
}


/* -- line button ------------------------------------------------------------ */

ul.social-button li.line a {
    background: #333;
}

ul.social-button li.line a:before {
    content: "\e90c";
}




/* -- insta button ------------------------------------------------------------ */

ul.social-button .insta_btn {
    display: inline-block;
    content: "\f16d";
    text-align: center;
    /*中央揃え*/
    color: #2e6ca5;
    /*文字色*/
    text-decoration: none;
    /*下線消す*/
}

.insta_btn:hover {
    /*ホバー時*/
    opacity: 0.7;
}

.insta_btn .insta {
    /*アイコンの背景*/
    position: relative;
    /*相対配置*/
    display: inline-block;
    left: 0px;
    bottom: 10px;
    width: 41px;
    /*幅*/
    height: 41px;
    /*高さ*/
    vertical-align: middle;
    /*垂直中央に*/
    background: #333;
    overflow: hidden;
    /*はみ出た部分を隠す*/
    border-radius: 50px;
    /*角丸に*/
    margin: 5px 5px;
}

.insta_btn .fa-instagram {
    /*アイコン*/
    color: #fff;
    /*白に*/
    position: relative;
    /*z-indexを使うため*/
    z-index: 2;
    /*グラデーションより前に*/
    font-size: 1.7em;
    /*アイコンサイズ*/
    line-height: 1.6em;
    /*高さと合わせる*/
}

@media screen and (max-width: 900px) {
    #snsbtn {
        position: absolute;
        width: 100%;
        bottom: 70px;
    }

    ul.social-button {
        left: 49px;
    }

}