@charset "UTF-8";

/* 初期設定 */
* {
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
}

body {
    font: 19px/1.5 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    background-color: #F7F7F7;
    text-align: center;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

@media screen and (max-width:699px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

.wrapper {
    display: block;
    position: relative;
    width: 100%;
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    padding: 15px 20px;
    background-color: #fff;
    overflow: hidden;
}

header {
    background-color: #999;
    padding: 30px 10px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

footer {
    font-size: 13px;
    padding: 5%;
    background: #ECECEC;
    text-align: center;
    margin-top: 10px;
  }

p {
    color: #000;
    margin-top: 30px;
    line-height: 1.7;
    vertical-align: baseline;
}

ul {
    color: #000;
    margin-top: 20px;
    line-height: 1.7;
    vertical-align: baseline;
}

a {
    display: block;
    color: #1E73BE;
}

img,
video {
    width: 100%;
    object-fit: contain;
    display: block;
    vertical-align: bottom;
    margin-top: 30px;
}

.red {
    color: #e60000;
}

.blue {
    color: #0047b2;
}

.mark_yellow {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff00 0%) repeat scroll 0 0;
}

.mark_yellow02 {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffcc 0%) repeat scroll 0 0;
}

.mark_blue {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce0f5 0%) repeat scroll 0 0;
}

.taL {
    display: block;
    text-align: left;
}

.taR {
    display: block;
    text-align: right;
}

.mt {
    margin-top: 30px !important;
}

.mb {
    margin-bottom: 30px !important;
}

.m0 {
    margin: 0;
}

.fsS {
    font-size: 14px;
}

.fsM {
    font-size: 21px;
}

.fsL {
    font-size: 23px;
}

.fsLL {
    font-size: 25px;
}

.fsLLL {
    font-size: 27px;
}

.big {
    font-size: 29px;
}

.bgnavy {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 41, 102);
}

.bgred {
    color: rgb(255, 255, 255);
    background-color: rgb(230, 0, 0);
}

.bgyellow {
    background-color: rgb(255, 255, 0);
}

.bgyellow02 {
    background-color: rgb(255, 255, 204);
}

.anno {
    text-align: right;
    font-size: 10px;
    margin-top: 10px;
}

h2 {
    border-left: solid 5px #f7b3a8;
    background: #fff4f2;
    line-height: 2;
    padding: 12px 15px 15px;
    letter-spacing: 0.04em;
    text-align: left;
    font-size: 22px;
    margin-top: 60px;
}


/* --------------------リスト-------------------- */


/*全体の設定*/
.cross {
    /*表外側の余白　1番目の値は上余白、2番目の値は右余白、3番目の値は下余白、4番目の値は左余白*/
    margin: 30px 10px 0 10px;
    /*表内側の余白　1番目の値は上余白、2番目の値は右余白、3番目の値は下余白、4番目の値は左余白*/
    padding: 2px 10px 10px 10px;
    /*背景の色*/
    background: #AEC1E3;
    /*表の角丸*/
    border-radius: 5px;
}

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

/*表内の一行ずつの設定*/
li {
    position: relative;
    list-style: none;
    /*文字の色*/
    color: #000;
    /*文字の大きさ*/
    font-size: 22px;
    /*行間*/
    line-height: 1.5;
    /*線種（dotted = 点線）*/
    border-bottom: dotted;
    /*一行ずつの余白、1番目の値は上下の余白、2番目の値は左右の余白*/
    margin: 20px 10px;
    /*文字と点線の余白*/
    padding-bottom: 5px;
    /*文字部分の左からの距離*/
    padding-left: 45px;
}



/*マーク部分の設定*/
li::before {
    position: absolute;
    /*アイコンを全て同じにする場合は下記 " " 内に記号を置いて、下のli:nth-of-type(番号)::beforeはまるごと削除*/
    content: "";
    /*マーク（文字）の大きさ*/
    font-size: 40px;
    /*マーク（文字）の色*/
    color: #FF000;
    /*マーク（文字）の太さ*/
    font-weight: bold;
    /*マークの行間*/
    line-height: 0.7;
    /*上からの距離*/
    top: 0;
    /*左からの距離*/
    left: 0;
    margin: 0;
    text-align: center;
}

/*1番目のリストアイコン*/
li:nth-of-type(1)::before {
    content: "✔︎";
}

/*2番目のリストアイコン*/
li:nth-of-type(2)::before {
    content: "✔︎";
}

/*3番目のリストアイコン*/
li:nth-of-type(3)::before {
    content: "✔︎";
}

/*4番目のリストアイコン*/
li:nth-of-type(4)::before {
    content: "✔︎";
}

/* --------------------揺れ-------------------- */
.swaying-text {
    display: block;
    animation-name: swayingText;
    animation-duration: .25s;
    animation-iteration-count: infinite;
    will-change: transform, animation;
    margin: 40px auto;
}

@keyframes swayingText {
    0% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }

    25% {
        transform: translate(2px, 2px) rotateZ(1deg)
    }

    50% {
        transform: translate(0px, 2px) rotateZ(0deg)
    }

    75% {
        transform: translate(2px, 0px) rotateZ(-1deg)
    }

    100% {
        transform: translate(0px, 0px) rotateZ(0deg)
    }
}

/* --------------------ドット-------------------- */
.continue {
    display: flex;
    justify-content: center;
}

.continue span {
    display: block;
    /*点の幅サイズ*/
    width: 10px;
    /*点の高さサイズ*/
    height: 10px;
    /*点の色*/
    background-color: #ccc;
    /*角を丸くする*/
    border-radius: 100vh;
    /*点周りの余白。左の値が上下、右の値が左右*/
    margin: 10px 0;
}

.continue .dot-1,
.continue .dot-2,
.continue .dot-3 {
    /*アニメーションの指定。左から、アニメーション名、アニメーション時間の長さ（1sは1秒）、infiniteは無限に再生を繰り返す*/
    -webkit-animation: continue 1s infinite;
    -moz-animation: continue 1s infinite;
}

.continue .dot-1 {
    /*アニメーションし始める時間*/
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
}

.continue .dot-2 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
}

.continue .dot-3 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

@-webkit-keyframes continue {

    /*アニメーション時間軸の指定。0%は開始地点、50%は真ん中、100%は最後の地点*/
    0% {
        /*不透明度の指定。1は不透明度100%*/
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes continue {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.balloon {
    position: relative;
    /*吹き出し周りの余白。上｜右｜下｜左*/
    margin: 1em 0 1em 40px;
    /*吹き出し内側の余白*/
    padding: 15px;
    /*背景色*/
    background-color: #fff0c6;
    /*吹き出しの角を丸くする*/
    border-radius: 30px;
    box-sizing: border-box;
    text-align: left;
}

.balloon:before {
    content: "";
    position: absolute;
    left: -38px;
    width: 13px;
    height: 12px;
    bottom: 0;
    /*左の小さな丸い吹き出し色*/
    background-color: #fff0c6;
    border-radius: 50%;
}

.balloon:after {
    content: "";
    position: absolute;
    left: -24px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    /*真ん中の丸い吹き出し色*/
    background-color: #fff0c6;
    border-radius: 50%;
}

.balloon p {
    margin: 0;
    padding: 0;
}

/* --------------------吹き出し-------------------- */
.balloon {
    position: relative;
    /*吹き出し周りの余白。上｜右｜下｜左*/
    margin: 40px 0 40px 40px;
    /*吹き出し内側の余白*/
    padding: 15px;
    /*背景色*/
    background-color: #fff0c6;
    /*吹き出しの角を丸くする*/
    border-radius: 30px;
    box-sizing: border-box;
}

.balloon:before {
    content: "";
    position: absolute;
    left: -38px;
    width: 13px;
    height: 12px;
    bottom: 0;
    /*左の小さな丸い吹き出し色*/
    background-color: #fff0c6;
    border-radius: 50%;
}

.balloon:after {
    content: "";
    position: absolute;
    left: -24px;
    width: 20px;
    height: 18px;
    bottom: 3px;
    /*真ん中の丸い吹き出し色*/
    background-color: #fff0c6;
    border-radius: 50%;
}

.balloon p {
    margin: 0;
    padding: 0;
}

/* --------------------動く矢印-------------------- */
.arrowFlow__area {
    width: 100%;
    height: auto;
    margin: 40px 0;
}

.arrowFlow__inner {
    padding-bottom: 200px;
    overflow-y: hidden;
    position: relative;
}

.arrowFlow__beforeG,
.arrowFlow__afterG {
    width: 80%;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    animation-name: arrowFlow;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform: translate(-50%, -300%);
    position: absolute;
    top: 0;
    left: 50%;
}

.arrowFlow__afterG {
    animation-delay: 1s;
}

.arrow {
    display: inline-block;
    vertical-align: middle;
    color: #ba0d0d;
    line-height: 1;
    position: relative;
    width: 40px;
    height: 60px !important;
    background: currentColor;
    margin: 0 30px;
}

.arrow:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 50px 0 50px;
    border-color: #ba0d0d transparent transparent transparent;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes arrowFlow {
    0% {
        transform: translate(-50%, -300%);
    }

    60% {
        transform: translate(-50%, 100%);
    }

    100% {
        transform: translate(-50%, 400%);
    }
}

/* --------------------動く矢印ピンク-------------------- */
.downArrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 40px 0;
}

.downArrow>span {
    /* 矢印の大きさの設定 */
    width: 100px;
    height: 65px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.downArrow>span::before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%;
    height: 40%;
    /* 矢印の色の設定 */
    background: #ffc8c8;
}

.downArrow>span::after {
    content: "";
    display: block;
    width: 100%;
    height: 60%;
    /* 矢印の色の設定 */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
    background: linear-gradient(to top right, transparent 49%, #ffc8c8 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ffc8c8 50%) top right/50% 100% no-repeat;
}



/*動きの速さを変更する場合は、複数あるanimation-durationの1.5s(=1.5秒)の時間を変更
  動きの回数を変更する場合は、複数あるanimation-iteration-countのinfinite（=無限,               3=3回など）を変更*/
.movebtn {
    -webkit-animation-name: btnAnime02;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: btnAnime02;
    -moz-animation-duration: 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    align-items: flex-start;
    justify-content: center;
}

@-webkit-keyframes btnAnime02 {

    /*初期位置*/
    0% {
        /*1番目の値はX方向, 2番目の値はY方向*/
        -webkit-transform: translate(0, 0);
    }

    /*animation-durationで設定した値の半分の時間（50%）の時の位置*/
    50% {
        -webkit-transform: translate(0, -8px);
    }

    /*animation-durationで設定した値になった（100%）時の位置*/
    100% {
        -webkit-transform: translate(0, 0);
    }
}

/*上記の「@-webkit-keyframes btnAnime02」と同様の値にしてください*/
@-moz-keyframes btnAnime02 {
    0% {
        -moz-transform: translate(0, 0);
    }

    50% {
        -moz-transform: translate(0, -8px);
    }

    100% {
        -moz-transform: translate(0, 0);
    }
}

/* --------------------動く細い矢印-------------------- */
.cp_arrows {
    position: relative;
    /*widget自体の高さ*/
    height: 50px;
    /*widgetの上余白*/
    margin-top: 1em;
    /*widgetの下余白*/
    margin-bottom: 2.5em;
}



/*一個目の矢印*/
.cp_arrows .cp_arrowfirst {
    /*アニメーション設定。
     左からアニメーション名、動きの速さ（2s=2秒）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
    animation: arrow-move08 2s ease-in-out infinite;
}



/*二個目の矢印*/
.cp_arrows .cp_arrowsecond {
    /*アニメーション設定。
     左からアニメーション名、動きの速さ（2s=2秒）、開始時間（1s=1秒後）、変化の度合い（ease-in-out=開始時と終了時は、緩やかに変化）、動きの回数（infinite=無限、3=3回など）*/
    animation: arrow-move08 2s 1s ease-in-out infinite;
}



/*共通設定*/
.cp_arrows .cp_arrow {
    position: absolute;
    /*矢印の到着位置　（縦位置）*/
    top: 100%;
    /*矢印の到着位置　（横位置）*/
    left: 45%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    /*透明度（0=透明、1=不透明）*/
    opacity: 0;
}

.content :first-child {
    margin-top: 0;
}

@keyframes arrow-move08 {

    /*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
    0% {
        top: 40%;
        opacity: 0;
    }

    /*2sの70％（1.7秒）時に不透明になる*/
    70% {
        opacity: 1;
    }

    /*2s（2秒）時に透明になる*/
    100% {
        opacity: 0;
    }
}

.cp_arrows .cp_arrow:before {
    /*矢印左の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
    transform: rotate(30deg) translateX(-39%);
    /*矢印左の棒の起点。（top left=左上）*/
    transform-origin: top left;
}

.cp_arrows .cp_arrow:after {
    /*矢印右の棒の設定。1番目の値は棒の角度、2番目の値は棒のX方向の位置。*/
    transform: rotate(-30deg) translateX(39%);
    /*矢印右の棒の起点。（top right=右上）*/
    transform-origin: top right;
}

.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /*矢印の棒の横の長さ*/
    width: 40px;
    /*矢印の棒の縦の長さ*/
    height: 3px;
    content: '';
    /*矢印の色*/
    background: #E91E63;
}

.cp_arrows *,
.cp_arrows *:before,
.cp_arrows *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_arrows *,
.cp_arrows *:before,
.cp_arrows *:after {
    box-sizing: border-box;
}

content div:after,
.content p:after {
    clear: both;
}

.content div :after,
.content p:after {
    display: block;
    content: "";
    clear: both;
}

/* --------------------口コミ-------------------- */
.box {
    /*最大幅の指定。max-widthで指定した値の最大幅以上には広がらずに表示*/
    max-width: 580px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

.box video,
.box iframe {
    width: 100%;
    margin: 0 !important;
    object-fit: cover;
}

.in:first-child {
    margin-top: 1em;
}

.in {
    position: relative;
    list-style: none;
    margin-bottom: 2em;
    /*枠内側の余白*/
    padding: 12px;
    /*線の指定。線の太さ、線の種類、線の色の順*/
    border: 1px solid #ffc7d3;
    /*枠内側の背景色*/
    background: #fff;
    /*角を丸くする*/
    border-radius: 6px;
}

.in .icon {
    position: absolute;
    top: -15px;
    left: -3px;
    padding-top: 10px;
    width: 60px;
    height: 60px;
    /*左上数字ラベルの背景色*/
    background-color: #0086ff;
    border-radius: 2em;
    background-size: 100% auto;
}

.in .icon .unit {
    font-size: 10px;
    display: block;
    color: #fff;
    line-height: 1;
}

span {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.in .icon .number {
    line-height: 1;
    font-size: 30px;
    display: block;
    position: absolute;
    color: #fff;
    top: 35%;
    left: 20%;
}

.box img {
    max-width: 100%;
    margin-bottom: 1em;
    height: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.in p {
    margin-bottom: 0;
    text-align: left;
}

.span-color {
    /*spanタグ内文字色*/
    color: #e50055;
    /*spanタグの文字の太さ*/
    font-weight: bold;
}

.box .anno {
    text-align: right;
    color: rgb(187, 187, 187);
}

.box p {
    margin-top: 15px;
}

/* --------------------リスト②-------------------- */
.memo {
    margin: 0.5em auto;
    padding: 1em;
    width: 100%;
    border-radius: 15px;
    box-sizing: border-box;
    border: 4px dotted #64D1ED;
    text-align: left;
    font-size: 25px;
    margin: 40px 0;
}

/* --------------------アンケート-------------------- */
.anq_read {
    font-size: 20px;
    color: #ffffff;
    background: #3880ff;
    text-align: center;
    padding: 10px !important;
    margin: 20px 0 30px !important;
    font-weight: 700;
    line-height: 30px;
    position: relative;
    border: none;
}

.anq_read:before {
    border-top: 10px solid #3880ff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
    position: absolute;
    bottom: -10px;
    left: calc(50% - 10px);
}

.anc-wrapper {
    padding: 10px;
    /* 枠の色 */
    background: linear-gradient(#FFE3EA, #FFE3EA);
    margin-top: 30px;
}

.container {
    /* コンテンツ部分の背景色 */
    background-color: #ffffff;
}

.box-title {
    padding: 20px 0 0 0;
    /* Q1部分の背景色 */
    line-height: 1.5;
    background-color: #FFE3EA;
    text-align: center;
    font-family: sans-serif;
    font-size: 24px;
    padding: 0px;
    /* Q1部分の文字色 */
    color: #000;
}

.anc-wrapper p {
    margin: 20px 40px 10px;
}

.anc-wrapper .main {
    padding: 10px 20px 10px;
}

.anc-wrapper img {
    margin-top: 0;
}

.questions {
    margin-top: 30px;
    font-size: 8px;
    text-align: left;
}

input[type="checkbox"] {
    display: none;
    appearance: checkbox;
    box-sizing: border-box;
}

input[type="checkbox"]+span {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
    font: 17px/20px 'Open Sans', Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
}

input[type="checkbox"]:checked+span:before {
    width: 10px;
    top: -5px;
    left: 10px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-right-color: #ff8e16;
    border-bottom-color: #ff8e16;
    border-left-color: transparent;
    transform: rotate(45deg);
}

input[type="checkbox"]+span:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .6;
    transition: all .12s, border-color .08s;
}

/* --------------------CTA-------------------- */
.animate {
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.shuffling {
    animation-duration: 1.4s !important;
    -webkit-animation-duration: 1.4s;
    -ms-animation-duration: 1.4s;
    -moz-animation-duration: 1.4s !important;
    -webkit-animation-name: shuffling;
    -moz-animation-name: shuffling;
    -o-animation-name: shuffling;
    animation-name: shuffling;
    margin: 0;
    margin-top: -30px !important;
}

@media screen and (max-width:699px){
    .shuffling {
        margin-top: -80px !important;
    }
}


@-moz-keyframes shuffling {
    0% {
        -moz-transform: skewX(9deg);
    }

    10% {
        -moz-transform: skewX(-8deg);
    }

    20% {
        -moz-transform: skewX(7deg);
    }

    30% {
        -moz-transform: skewX(-6deg);
    }

    40% {
        -moz-transform: skewX(5deg);
    }

    50% {
        -moz-transform: skewX(-4deg);
    }

    60% {
        -moz-transform: skewX(3deg);
    }

    70% {
        -moz-transform: skewX(-2deg);
    }

    80% {
        -moz-transform: skewX(1deg);
    }

    90% {
        -moz-transform: skewX(0deg);
    }

    100% {
        -moz-transform: skewX(0deg);
    }
}

@-o-keyframes shuffling {
    0% {
        -o-transform: skewX(9deg);
    }

    10% {
        -o-transform: skewX(-8deg);
    }

    20% {
        -o-transform: skewX(7deg);
    }

    30% {
        -o-transform: skewX(-6deg);
    }

    40% {
        -o-transform: skewX(5deg);
    }

    50% {
        -o-transform: skewX(-4deg);
    }

    60% {
        -o-transform: skewX(3deg);
    }

    70% {
        -o-transform: skewX(-2deg);
    }

    80% {
        -o-transform: skewX(1deg);
    }

    90% {
        -o-transform: skewX(0deg);
    }

    100% {
        -o-transform: skewX(0deg);
    }
}

@-webkit-keyframes shuffling {
    0% {
        -webkit-transform: skewX(9deg);
    }

    10% {
        -webkit-transform: skewX(-8deg);
    }

    20% {
        -webkit-transform: skewX(7deg);
    }

    30% {
        -webkit-transform: skewX(-6deg);
    }

    40% {
        -webkit-transform: skewX(5deg);
    }

    50% {
        -webkit-transform: skewX(-4deg);
    }

    60% {
        -webkit-transform: skewX(3deg);
    }

    70% {
        -webkit-transform: skewX(-2deg);
    }

    80% {
        -webkit-transform: skewX(1deg);
    }

    90% {
        -webkit-transform: skewX(0deg);
    }

    100% {
        -webkit-transform: skewX(0deg);
    }
}

@keyframes shuffling {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}