@charset "utf-8";

/*========================
シェアボタンベース※必須
========================*/
.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
    font-size: 1.2rem
}
.share {
    margin: 20px 0;
}

.share ul {
    display: flex;
    align-items: center;
    list-style: none;
}
.share li {
    margin-right: 15px;
}
.share li:last-child {
    margin-right: 0;
}
.share i {
    font-size: 1.2rem;
}
.share i:hover {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    transform: rotateX(360deg);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

.tweet i {
    color: #55acee;
}

.facebooklink i {
    color: #315096;
}

.line i {
    color: #00b900;
}

.hatena i {
    color: #008fde;
}

/*=================
ヘッダーシェアボタン
=================*/
.head-share .share {
    margin-top: 20px;
}
.head-share ul {
    display: flex;
    justify-content: center;
    list-style: none;
}
.head-share li {
    border-bottom: none;
}
.head-share a {
    border-bottom: none;
}
.head-share i:hover {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    transform: rotateX(360deg);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}

.head-share .tweet i,
.head-share .facebooklink i,
.head-share .line i,
.head-share .hatena i {
    color: #fff;
}

/*=================
フッターシェアボタン
=================*/
.foot-share {
    max-width: 1354px;
    margin: 0 auto;
}
.foot-share .share {
    margin: 10px 0;
    display: flex;
    justify-content: center;
}
.foot-share .tweet i,
.foot-share .facebooklink i,
.foot-share .line i,
.foot-share .hatena i {
    color: #fff;
}
/*=====================
メディアクエリ1024px以上
=====================*/
@media(min-width:1024px) {
    /*=================
    ヘッダーシェアボタン
    =================*/
    .head-share {
        display: none;
    }
    /*=================
    フッターシェアボタン
    =================*/
    .foot-share {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}