@charset "utf-8";

/* ============================================================
   アクセスカウンター
   ============================================================ */

.accessCounter {
    margin: 3vh auto 0;
    text-align: center;
}
.accessCounter[hidden],
.accessCounter [hidden] {
    display: none !important;
}


/* 数字の並び */

.acDigits {
    display: inline-flex;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.1em;
    line-height: 1;
    letter-spacing: 0;
    transform: rotate(-2deg);
}
.acDigit {
    display: block;
    width: .8em;
    height: 1.2em;          /* 数字がのぞく窓の高さ */
    margin: 0 .14em;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,.05);
    color: #666666;
}

/* 0〜9 を 2周ぶん縦に並べた帯。ずらして目的の数字を窓に出す */
.acReel {
    display: block;
    transform: translateY(0);
    transition: transform 1.1s cubic-bezier(.16,.84,.28,1);
    transition-delay: calc(var(--acN, 0) * 70ms);
}
.acReel i {
    display: block;
    height: 1.2em;          /* .acDigit の高さと必ず同じにする（リールの計算がここに依存） */
    font-style: normal;
    line-height: 1.27em;    /* 高さより少しだけ大きく。数字を窓の中央に落とすため */
}
.acIsReady .acReel {
    /* 帯は 20 コマ ＝ 1コマ 5%。--acPos は「10 ＋ 出したい数字」 */
    transform: translateY(calc(var(--acPos, 0) * -5%));
}


/* 「since ○○○○」。数字より控えめに、幅も数字より狭くなるように */
.acSince {
    margin-top: .7em;
    font-family: 'Bebas Neue', cursive;
    font-size: .8em;
    letter-spacing: .18em;
    color: #c2c2c2;
}


/* 「おまけのおまけ」。カウンターの下に、since と同じくらい控えめに */
.omakeOmake {
    margin-top: 1.2em;
    font-size: .8em;
    letter-spacing: .18em;
    text-align: center;
}
.omakeOmake a {
    color: #c2c2c2;
}
.omakeOmake a:hover {
    color: #999999;
}


/* 動きを控えたい設定の人には回転させない */

@media (prefers-reduced-motion: reduce) {
    .acReel {
        transition: none;
    }
}


/* 画面幅699px以下用CSS */

@media (max-width:699px) {
    .accessCounter {
        margin: 2vh auto 0;
    }
    .acDigits {
        font-size: 1em;
    }
}