/*
    Theme Name: article01
    Description: 三課記事テンプレ 01
    Version: 1.0
*/

/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font: 16px/1.5 "游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif;
}
p{
    color: #444;
}
a{
    color: #478fde;
}

/* デザイン上、特例的に余白消したいとき */
.no-margin{
    margin: 0 !important;
}
/* デザイン上、特例的に余白追加したいとき */
.padding-around{
    padding: 15px !important;
}

/* PC/SPで表示を変えたい場合*/
@media screen and (min-width: 700px){
    .pc{
        display: inline;
    }
    .sp{
        display: none;
    }
}
@media screen and (max-width: 699px){
    .pc{
        display: none;
    }
    .sp{
        display: inline;
    }
}


/*
    ここからデザイン展開

*/

/*
    ボーダー展開
    命名規則「(属性)-(種類)-(位置)-(太さ)」
    色は別で指定
}*/
    /* 色(!importantの記述必ず) */
    .bdRed{
        border-color: #D13539 !important;
    }
    .bdOrange{
        border-color: #ff8e16 !important;
    }
    .bdBeige{
        border-color: #ffc1af !important;
    }
    .bdLimeGreen{
        border-color: #D5F4a0 !important;
    }
    .bdLightGreen{
        border-color: #58942D !important;
    }
    .bdMint{
        border-color: #54D0B0 !important;
    }
    .bdGreen{
        border-color: #00735f !important;
    }
    .bdBlue{
        border-color: #3DB3DA !important;
    }
    .bdDarkTurquoise{
        border-color: #008ea8 !important;
    }
    .bdLightPurple{
        border-color: #b279ac !important;
    }
    .bdPurple{
        border-color: #975DA2 !important;
    }
    .bdPink{
        border-color: #DB3276 !important;
    }
    .bdSalmonPink{
        border-color: #fd5f5f !important;
    }
    .bdWhite{
        border-color: #fff !important;
    }
    .bdGray{
        border-color: #cfcfcf !important;
    }
    .bdDarkGray{
        border-color: #888 !important;
    }





    /* 直線・細 */
    .bd-solid-top-thin{border-top: 1px solid;}
    .bd-solid-right-thin{border-right: 1px solid;}
    .bd-solid-bottom-thin{border-bottom: 1px solid;}
    .bd-solid-left-thin{border-left: 1px solid;}
    /* 直線・中 */
    .bd-solid-top-middle{border-top: 2px solid;}
    .bd-solid-right-middle{border-right: 2px solid;}
    .bd-solid-bottom-middle{border-bottom: 2px solid;}
    .bd-solid-left-middle{border-left: 2px solid;}
    /* 直線・太 */
    .bd-solid-top-bold{border-top: 4px solid;}
    .bd-solid-right-bold{border-right: 4px solid;}
    .bd-solid-bottom-bold{border-bottom: 4px solid;}
    .bd-solid-left-bold{border-left: 4px solid;}

    /* 点線・細 */
    .bd-dotted-top-thin{border-top: 1px dotted;}
    .bd-dotted-right-thin{border-right: 1px dotted;}
    .bd-dotted-bottom-thin{border-bottom: 1px dotted;}
    .bd-dotted-left-thin{border-left: 1px dotted;}
    /* 点線・中 */
    .bd-dotted-top-middle{border-top: 2px dotted;}
    .bd-dotted-right-middle{border-right: 2px dotted;}
    .bd-dotted-bottom-middle{border-bottom: 2px dotted;}
    .bd-dotted-left-middle{border-left: 2px dotted;}
    /* 点線・太 */
    .bd-dotted-top-bold{border-top: 4px dotted;}
    .bd-dotted-right-bold{border-right: 4px dotted;}
    .bd-dotted-bottom-bold{border-bottom: 4px dotted;}
    .bd-dotted-left-bold{border-left: 4px dotted;}

    /* 破線・細 */
    .bd-dashed-top-thin{border-top: 1px dashed;}
    .bd-dashed-right-thin{border-right: 1px dashed;}
    .bd-dashed-bottom-thin{border-bottom: 1px dashed;}
    .bd-dashed-left-thin{border-left: 1px dashed;}
    /* 破線・中 */
    .bd-dashed-top-middle{border-top: 2px dashed;}
    .bd-dashed-right-middle{border-right: 2px dashed;}
    .bd-dashed-bottom-middle{border-bottom: 2px dashed;}
    .bd-dashed-left-middle{border-left: 2px dashed;}
    /* 破線・太 */
    .bd-dashed-top-bold{border-top: 4px dashed;}
    .bd-dashed-right-bold{border-right: 4px dashed;}
    .bd-dashed-bottom-bold{border-bottom: 4px dashed;}
    .bd-dashed-left-bold{border-left: 4px dashed;}

    /* 二重線・細 */
    .bd-double-top-thin{border-top: 4px double;}
    .bd-double-right-thin{border-right: 4px double;}
    .bd-double-bottom-thin{border-bottom: 4px double;}
    .bd-double-left-thin{border-left: 4px double;}
    /* 二重線・中 */
    .bd-double-top-middle{border-top: 6px double;}
    .bd-double-right-middle{border-right: 6px double;}
    .bd-double-bottom-middle{border-bottom: 6px double;}
    .bd-double-left-middle{border-left: 6px double;}
    /* 二重線・太 */
    .bd-double-top-bold{border-top: 8px double;}
    .bd-double-right-bold{border-right: 8px double;}
    .bd-double-bottom-bold{border-bottom: 8px double;}
    .bd-double-left-bold{border-left: 8px double;}


/*
    フレーム展開
*/
    /* 共通 */
    @media screen and (min-width:700px){
        .frame{
            padding: 15px;
            margin-top: 20px;
            position: relative;
        }
    }
    @media screen and (max-width:699px){
        .frame{
            padding: 10px;
            margin-top: 20px;
            position: relative;
        }
    }
    /* 角丸 */
    .radius{
        border-radius: 10px;
    }
    /* 影 */
    .shadow{
        box-shadow: 3px 3px 0px 0px #E4E4E4;
    }
    .shadowPink{
        box-shadow: 2px 2px 3px #ffa3a3;
    }
    .shadowBlue{
        box-shadow: 2px 2px 3px #d5f3f9;
    }

    /* 背景色 */
    .bgWhite{
        background-color: #fff;
    }
    .bgGray{
        background-color: #EFF2F7;
    }
    .bgBeige{
        background-color: #FFF8ED;
    }
    .bgGreige{
        background-color: #e5e2da;
    }
    .bgYellow{
        background-color: #FFF8C4;
    }
    .bgLightGreen{
        background-color: #A3D362;
    }
    .bgGreen{
        background-color: #00735f;
    }
    .bgOceanBlue{
        background-color: #b8f5f0;
    }
    .bgBlue{
        background-color: #DFEFFF;
    }
    .bgPink{
        background-color: #FFE8F0;
    }
    .bgBoldPink{
        background-color: #DB3276;
    }
    .bgLightPink{
        background-color: #ff5c8a;
    }



    /*枠種*/
    /* 直線 */
    .frame-solid-thin{border: 1.5px solid;}
    .frame-solid-middle{border: 2.5px solid;}
    .frame-solid-bold{border: 4px solid;}
    /* 点線 */
    .frame-dotted-thin{border: 1.5px dotted;}
    .frame-dotted-middle{border: 2.5px dotted;}
    .frame-dotted-bold{border: 4px dotted;}
    /* 破線 */
    .frame-dashed-thin{border: 1.5px dashed;}
    .frame-dashed-middle{border: 2.5px dashed;}
    .frame-dashed-bold{border: 4px dashed;}
    /* 二重線 */
    .frame-double-thin{border: 4px double;}
    .frame-double-middle{border: 6px double;}
    .frame-double-bold{border: 8px double;}

    /* その他の枠 */    
    .innerBorder01{
        position: relative;
        background-color: #DFEFFF;
        box-shadow: 0 0 0 5px #DFEFFF;
        border: 2px dotted #fff;
    }
    .innerBorder01::after{
        position: absolute;
        content: '';
        left: -7px;
        top: -7px;
        border-width: 0 0 15px 15px;
        border-style: solid;
        border-color: #fff #fff #a8d4ff;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }
    .innerBorder02{
        position: relative;
        background-color: #decfd0;
        box-shadow: 0 0 0 5px #decfd0;
        border: 2px dotted #fff;
    }
    .speechBubble01::after,
    .speechBubble02::after,
    .speechBubble03::after,
    .speechBubble04::after{
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        top: 100%;
        left: 30px;
        border: 15px solid transparent;
    }
    .speechBubble01{
        position: relative;
        background-color: #EFF2F7;
    }
    .speechBubble01::after{
        border-top: 15px solid #EFF2F7;
    }
    .speechBubble02{
        position: relative;
        background-color: #e0edff;
    }
    .speechBubble02::after{
        border-top: 15px solid #e0edff;
    }
    .speechBubble03{
        position: relative;
        background-color: #FFE8F0;
    }
    .speechBubble03::after{
        border-top: 15px solid #FFE8F0;
    }
    .speechBubble03{
        position: relative;
        background-color: #FFE8F0;
    }
    .speechBubble03::after{
        border-top: 15px solid #FFE8F0;
    }
    .speechBubble04{
        position: relative;
        background-color: #D5F4a0;
    }
    .speechBubble04::after{
        border-top: 15px solid #D5F4a0;
    }
    .postIt{
        position: relative;
        width: 55%;
        margin: 40px auto 0;
    }
    .postIt_title{
        position: absolute;
        top: -25px;
        background-color: #1D81B4;
        padding: 5px;
        color: #fff;
    }
    .postIt_text{
        padding: 15px;
        height: auto;
        background-image: url('/img/postIt_bg.jpg');
        background-size: 100% 100%;
    }
    /* 口コミ掲載用テンプレ */
    .reviewBox{
        text-align: right;
    }
    .reviewBox div:first-child{
        text-align: left;
    }
    .review-iconArea{
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-feature-settings: "palt";
    }
    img.likeBtn{
        width:90px;
    }
    .review-icon{
        width: 13%;
        height: auto;
    }
    .review-title{
        width: 85%;
    }
    @media screen and (max-width:699px){
        .review-icon{
            width: 20%;
            height: auto;
        }
        .review-title{
            width: 75%;
        }   
    }
    /* 吹き出しデザイン */
    .speechArea{
        position: relative;
        margin-top: 20px;
        height: auto;
    }
    .speechArea img{
        width: 130px;
        height: auto;
    }
    .speech-text{
        height: 100%;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px;
        vertical-align: middle;
    }
    .speech-text p{
        margin: 0;
    }
    .speechArea .bgPink::before,
    .speechArea .bgGray::before{
        content: "";
        position: absolute;
        top: 144px;
        left: 25px;
        margin-top: -12px;
        border: 12px solid transparent;
        z-index: 2;
    }
    .speechArea .bgPink::before{
        border-bottom: 12px solid #FFE8F0;
    }
    .speechArea .bgGray::before{
        border-bottom: 12px solid #EFF2F7;
    }
    @media screen and (max-width:699px){
        .speechArea .bgPink::before,
        .speechArea .bgGray::before{
            left: 10px;
            top: 94px;
        }
        .speechArea img{
            width: 80px;
            height: 80px;
        }
        .speech-text{
            width: 100%;
        }
    }
/*
    リスト展開
    命名規則「(属性)-(種類)」
    <ul>にクラスを指定(liに指定してると記述量増えるので)
*/
    li{
        list-style: none;
        font-weight: bolder;
        margin-top: 5px;
    }
    /* アイコン色 */
    ul.liGray li::before{
        color: #555;
    }
    ul.liPink li::before{
        color: #DB3276;
    }
    ul.liPurple li::before{
        color: #b279ac;
    }
    ul.liOrange li::before{
        color: #ff8e16;
    }
    ul.liBlue li::before{
        color: #3DB3DA;
    }
    ul.liGreen li::before{
        color: #58942D;
    }
    ul.liRed li::before{
        color: #D13539;
    }
    ul.liMint li::before{
        color :#54D0B0;
    }

    /* アイコン形状 */
    ul.list-check li::before{
        content: '✓';
        font-size: 12px;
        margin-right: 5px;
        text-shadow:0.3px 0.3px 0, 0.3px -0.3px 0px,-0.3px 0.3px 0,-0.3px -0.3px 0px,0.3px 0px 0px,0px 0.3px 0px,-0.3px 0px 0px,0px -0.3px 0px;
    }
    ul.list-circle li::before{
        content: '●';
        font-size: 8px;
        margin-right: 5px;
    }
    ul.list-square li::before{
        content: '■';
        font-size: 8px;
        margin-right: 5px;
    }
    ul.list-arrow li::before{
        content: '>';
        font-size: 12px;
        margin-right: 5px;
        text-shadow:0.3px 0.3px 0, 0.3px -0.3px 0px,-0.3px 0.3px 0,-0.3px -0.3px 0px,0.3px 0px 0px,0px 0.3px 0px,-0.3px 0px 0px,0px -0.3px 0px;
    }


/* 
    マーカー展開
    AddQuicktagへの追記忘れずに
*/
    mark.mark-yellow{
        background: linear-gradient(to bottom, transparent 0%, transparent 40%, #ffff66 40%, #ffff66 100%);
        height: 80%;
        vertical-align: bottom;
    }
    mark.mark-pink{
        background: linear-gradient(to bottom, rgba(255, 207, 229, 0) 20%, #ffcfe5 100%);
    }
    mark.mark-blue{
        background: linear-gradient(to bottom, rgba(204, 229, 255, 0) 20%, #CCE5FF 100%);
    }

    /* アニメーション付きマーカー */
    .marker-animation.active{
        background-position: -100% .5em;
    }
     
    .marker-animation {
        display: inline;
        background-image: -webkit-linear-gradient(left, transparent 50%, #ffff66 50%);
        background-image: -moz-linear-gradient(left, transparent 50%, #ffff66 50%);
        background-image: -ms-linear-gradient(left, transparent 50%, #ffff66 50%);
        background-image: -o-linear-gradient(left, transparent 50%, #ffff66 50%);
        background-image: linear-gradient(left, transparent 50%, #ffff66 50%);
        background-repeat: repeat-x;
        background-size: 200% .8em;
        background-position: 0 .5em;
        transition: all 2s ease;
        font-weight: bold;
    }


/* 
    ヘッダー・フッター展開
    基本は同じ数字同士を組み合わせて使ってもらう前提で
*/
    .header01{
        position: fixed;
        /*width: 100%;*/
        top: 0;
        left: 0;
        right: 0;
        opacity: 0.8;
        z-index: 2;
        border-top: #DB3276 2px solid;
        background: linear-gradient(to right, #FFE0EA 0%, #fff 25%, #fff 75%, #FFE0EA 100%);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.34);
        text-align: center;
        font-size: 18px;
        padding: 3px 0;
    }
    .header02{
        position: relative;
        width: 700px;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 18px;
        padding: 3px 0;
    }

    @media screen and (max-width:699px){
        .header02{
            position: absolute;
            width: 100vw;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
            text-align: center;
            font-size: 18px;
            padding: 3px 0;
        }
    }


/*
    ボタン展開
*/
    .button{
        position: relative;
        display: block;
        padding: 20px 0;
        text-align: center;
        text-decoration: none;
    }
    /* ホバーの動きを使い回したいときは、以下に追記していってください */
    .button01:hover{
        box-shadow: none;
        top: 5px;
    }
    .button01{
        background: #ff8585;
        box-shadow: #da5656 0 5px;
        border-radius: 10px;
    }
    .button02{
        background: #ff5555;
        border-radius: 40px;
    }
    .button02:before, .button02:after {
        content: "";
        position: absolute;
        z-index: -10;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 32px;
        background: #ffaaae;
        border: 1px solid #ff999e;
        transform: translate3d(0,0,0);
    }
    .button02:before {
            animation: auraButton 2s ease-out infinite;
    }
    .button02:after {
        animation: auraButton 2s ease-out 1s infinite;
    }
    @keyframes auraButton{
        0%{transform:scale(.95); opacity:1}
        90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0}
    }

/*
    比較表展開
    PC/SPどちらにも記述追加するのを忘れずに！
*/

    /* 青系 */
    .table01{
        border: 10px solid #D5F3F9;
    }
    .table01 th{
        background-color: #0b4685;
        color: #fff;
    }
    .table01 tr td:first-child{
        background-color: #fffde8;
    }

    /* ピンク系 */
    .table02{
        border: 10px solid #ffeff5;
    }
    .table02 th{
        background-color: #da1f86;
        color: #fff;
    }
    .table02 tr td:first-child{
        background-color: #fffde8;
    }
    /* 紫系 */
    .table03{
        border: 10px solid #dadce9;
    }
    .table03 th{
        background-color: #454387;
        color: #fff;
    }
    .table03 tr td:first-child{
        background-color: #fffde8;
    }
    /* 赤系 */
    .table04{
        border: 10px solid #717171;
    }
    .table04 th{
        background-color: #7d0000;
        color: #fff;
    }
    .table04 tr td:first-child{
        background-color: #fffde8;
    }
    /* オレンジ系 */
    .table05{
        border: 10px solid #ffe7d9;
    }
    .table05 th{
        background-color: #ff9959;
        color: #fff;
    }
    .table05 tr td:first-child{
        background-color: #fffde8;
    }
    /* 水色系 */
    .table06{
        border: 10px solid #D5F3F9;
    }
    .table06 th{
        background-color: #78BADC;
        color: #fff;
    }
    .table06 tr td:first-child{
        background-color: #fffde8;
    }
    /* PC表示 */
    @media screen and (min-width: 700px){
        table th{
            position: relative;
            width: 100%;
            padding: 5px;
        }
        table td{
            position: relative;
            padding: 15px 0;
            margin: 0;
            font-size: 15px;
            vertical-align: top;
            border-right: 2px dotted #eee;
        }
    }
    /* スマホ表示 */
    @media screen and (max-width: 699px){
        /* 全デザイン共通 */
        table{
            box-sizing: border-box;
            width: 700px;
            height: auto;
            text-align: left;
        }
        tbody{
            box-sizing: border-box;
            width: 100%;
            display: table-row-group;
        }
        table tr{
            display: table-row;
            width: 100%;
            height: 26px;
        }
        table th{
            position: absolute;
            left: 10px;
            right: 10px;
            z-index: 5;
        }
        table td{
            border-right: 2px dotted #eee;
            padding: 20px 10px 15px;
            font-size: 15px;
            vertical-align: top;
        }
        .table01,
        .table02,
        .table03,
        .table04,
        .table05,
        .table06
        {overflow-x: scroll;}

        /* 3商品用CSS */
        .min-table{
            overflow: hidden !important;
        }
        .min-table table{
            width: 100% !important;
        }
        .min-table table td{
            width: 33%;
        }

        /* 4商品用CSS */
        .mid-table table{
            width: 550px !important;
        }
        .mid-table tbody{
            width: 550px !important;
        }
        .mid-table table td{
            width: 25%;
        }

        /* セルの高さ揃える */
        table tr.height-align td{
            height: 100px;
        }
        table tr.height-align-m td{
            height: 130px;
        }
        table tr.height-align-t td{
            height: 180px;
        }
        table tr.product-cell td
        {
            height: 200px;
        } 
    }

/* 
    その他装飾
*/
    .point{
        position: absolute;
        left: 0;
        bottom: 100%;
        border-radius: 5px 5px 0 0;
        padding: 5px 15px;
        font-size: 14px;
        line-height: 1;
        letter-spacing: .05em;
        z-index: -2;
    }
    @media screen and (min-width:700px){
        .miniIcon{
            position: absolute;
            top: -25px;
            left: -30px;
            width: 60px;
            height: 60px;
            text-align: center;
            border-radius: 100px;
        }
        .miniIcon p{
            margin-top: 10px;
            line-height: 1.3;
        }
    }
    @media screen and (max-width:699px){
        .miniIcon{
            position: absolute;
            top: -30px;
            left: -10px;
            width: 60px;
            height: 60px;
            text-align: center;
            border-radius: 100px;
        }
        .miniIcon p{
            margin-top: 10px;
            line-height: 1.3;
        }
    }
/*
    ここまでデザイン展開

*/
/* デバイスに依存せず共通 */
.wrapper{
    position: relative;
    overflow: visible;
}
header p{
    margin: 0;
}
footer{
    padding: 20px;
    text-align: center;
}
footer a{
    font-size: 12px;
}
img{
    width: 100%;
    object-fit: contain;
    
}
h1{
    text-align: center;
    margin-top: 40px;
    padding: 15px;
}
h2{
    margin-top: 50px;
    padding: 10px;
}
h3{
    font-size: 18px;
    margin-top: 30px;
}
p{
    margin-top: 20px;
    line-height: 1.7;
}
.accordion dd{
    display: none;
}
table tbody tr th, table tbody tr td{
    text-align: center;
}


/* PC表示 */
@media screen and (min-width:700px){
    .wrapper{
        width: 700px;
        margin: 0 auto;
    }

    .article_area{
        width: 700px;
        margin: 0 auto;
    }
    footer{
        margin: 50px auto 0;
    }
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 22px;
    }
}

/* スマホ表示 */
@media screen and (max-width:699px){
    .wrapper{
        width: 95%;
        margin: 0 auto;
    }
    footer{
        margin: 35px auto 0;
    }
    h1{
        font-size: 22px;
    }
    h2{
        font-size: 18px;
    }
}



/* 以下アニメーション展開 */
/* 共通CSS */
.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;
}
@-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);}
}

/* 左右移動 */
.moving{
    vertical-align: middle;
    left: 0;
    top: 0;
    z-index: 10;
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -moz-animation-name: moving;
    -o-animation-name: moving;
    -webkit-animation-name: moving;
    animation-name: moving;
}

@-moz-keyframes moving{
    0% {-moz-transform: translateX(0px);}   
    12.5% {-moz-transform: translateX(20px);}
    25% {-moz-transform: translateX(25px);}
    37.5% {-moz-transform: translateX(20px);}
    50% {-moz-transform: translateX(0px);}
    62.5% {-moz-transform: translateX(-20px);}
    75% {-moz-transform: translateX(-25px);}
    87.5% {-moz-transform: translateX(-20px);}
    100% {-moz-transform: translateX(0px);}
}
@-o-keyframes moving {
    0% {-o-transform: translateX(0px);}   
    12.5% {-o-transform: translateX(20px);}
    25% {-o-transform: translateX(25px);}
    37.5% {-o-transform: translateX(20px);}
    50% {-o-transform: translateX(0px);}
    62.5% {-o-transform: translateX(-20px);}
    75% {-o-transform: translateX(-25px);}
    87.5% {-o-transform: translateX(-20px);}
    100% {-o-transform: translateX(0px);}
}
@-webkit-keyframes moving {
    0% {-webkit-transform: translateX(0px);}   
    12.5% {-webkit-transform: translateX(20px);}
    25% {-webkit-transform: translateX(25px);}
    37.5% {-webkit-transform: translateX(20px);}
    50% {-webkit-transform: translateX(0px);}
    62.5% {-webkit-transform: translateX(-20px);}
    75% {-webkit-transform: translateX(-25px);}
    87.5% {-webkit-transform: translateX(-20px);}
    100% {-webkit-transform: translateX(0px);}
}
@keyframes moving {
    0% {transform: translateX(0px);}   
    12.5% {transform: translateX(20px);}
    25% {transform: translateX(25px);}
    37.5% {transform: translateX(20px);}
    50% {transform: translateX(0px);}
    62.5% {transform: translateX(-20px);}
    75% {transform: translateX(-25px);}
    87.5% {transform: translateX(-20px);}
    100% {transform: translateX(0px);}
}

/* バウンス */
.bouncing{
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -moz-animation-name: bouncing;
    -o-animation-name: bouncing;
    -webkit-animation-name: bouncing;
    animation-name: bouncing;
}
@-moz-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-moz-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-moz-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-moz-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@-o-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-o-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-o-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-o-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@-webkit-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-webkit-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-webkit-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}

/* 点滅 */
.flash {
    animation: flash 3s ease infinite;
    transform-origin: 50% 50%;
}
@keyframes flash {
    0% { opacity:1 }
    16.66667% { opacity:0 }
    33.33333% { opacity:1 }
    50% { opacity:0 }
    66.66667% { opacity:1 }
    100% { opacity:1 }
}

/* 浮遊 */
.fluffy{
    animation: fluffy 1s infinite ease-out;
    margin-bottom: 40px;
}

@keyframes fluffy{
    0% {transform: translateY(7px);}
    50% {transform: translateY(-7px);}
    100% {transform: translateY(7px);}
}