.black {
    color: #444
}

.black_bg {
    background-color: #444
}

.white {
    color: #fff
}

.white_bg {
    background-color: #fff
}

.red {
    color: #d93200
}

.red_bg {
    background-color: #d93200
}

.yellow {
    color: #ffc817
}

.yellow_bg {
    background-color: #ffc817
}

.orange {
    color: #ff4f36
}

.orange_bg {
    background-color: #ff4f36
}

.pink {
    color: #ff0d51
}

.pink_bg {
    background-color: #ff0d51
}

.navy {
    color: #2c4256
}

.navy_bg {
    background-color: #2c4256
}

.blue {
    color: #0076a3
}

.blue_bg {
    background-color: #0076a3
}

.light-blue {
    color: #e0f3fa
}

.light-blue_bg {
    background-color: #e0f3fa
}

.green {
    color: #6ba521
}

.green_bg {
    background-color: #6ba521
}

.marker_yellow {
    background: linear-gradient(transparent 60%, #ff6 60%)
}

.marker_green {
    background: linear-gradient(transparent 60%, #6FC 60%)
}

.list_red {
    background: #fcf3f6
}

.list_green {
    background: #f4fee5
}

.detailwrap,
.list_white {
    background: #fff
}

.detailwrap {
    padding-bottom: 1%;
    margin-bottom: 4%;
    overflow: hidden
}

.detailwrap .detailFavorite {
    margin: 0 auto 4%;
    overflow: hidden;
    padding: 0 0 2%
}

.detailwrap .detailFavorite a.favorite {
    border: 1px solid #eaebdd;
    border-radius: 4px;
    box-sizing: border-box;
    background: #eff0e5;
    box-shadow: 0 3px 0 0 #eaebdd;
    color: #2c4256;
    display: block;
    font-size: .9em;
    font-weight: 700;
    text-align: center;
    padding: 3% 0 2%;
    width: 100%;
    float: right
}

.detailwrap .detailFavorite a.favorite:hover {
    border: 1px solid #eff0e5;
    background: #f8f9f0;
    box-shadow: 0 3px 0 0 #eff0e5;
    color: #25b9ae
}

.detailwrap .detailFavorite a.favorite img {
    margin-right: 6px;
    vertical-align: sub;
    margin-top: 0;
    width: 8%
}

.detailwrap dl.detailServiceTop {
    width: 94%;
    margin: 10px auto;
    overflow: hidden
}

.detailwrap dl.detailServiceTop dt {
    width: 36%;
    float: left
}

.detailwrap dl.detailServiceTop dt .detailIcon {
    text-align: center;
    width: 100%;
    margin: 0 auto
}

.detailwrap dl.detailServiceTop dt .detailIcon img {
    max-width: 300px;
    padding: 0;
    width: 100%;
    object-fit: contain;
    height: 12rem
}

.detailwrap dl.detailServiceTop dd {
    width: 60%;
    float: right
}

.detailwrap dl.detailServiceTop dd h2 {
    color: #2c4256;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4em;
    padding: 0 0 4%
}

.detailwrap .reviews_inner .reviewBox dd {
    width: 100%
}

.detailwrap .reviews_inner .reviewBox dd .average {
    display: inline-block;
    width: 45%
}

.detailwrap .reviews_inner .reviewBox dd .average img {
    vertical-align: middle;
    width: 100%
}

.detailwrap .reviews_inner .reviewBox dd .number {
    font-size: 1.1em
}

.detailwrap .reviews_inner .reviewBox dd .number a {
    font-size: 1em;
    display: inline-block;
    padding: 0 2%;
    font-weight: 700
}

.detailwrap dl.detailPointInner {
    width: 94%;
    margin: 6% auto 0;
    display: table;
    border-bottom: 2px solid #eff0e5
}

.detailwrap dl.detailPointInner dt {
    display: table-cell;
    font-size: .9em;
    line-height: 1.4em;
    padding-left: 2%;
    vertical-align: bottom
}

.detailwrap dl.detailPointInner dt .moraeru {
    font-weight: 700;
    color: #019cf6;
    margin: 0;
    display: block
}

.detailwrap dl.detailPointInner dt .easyp-point {
    font-size: 1.2em
}

.detailwrap dl.detailPointInner dd {
    display: table-cell;
    vertical-align: bottom
}

.detailwrap dl.detailPointInner dd span {
    color: #aaa;
    font-size: 14px;
    float: right
}

.detailwrap dl.detailPointInner dd img {
    vertical-align: text-bottom;
    width: 24px;
    margin-left: 4px
}

.detailwrap dl.detailPointInner dd.Point {
    color: #444;
    text-align: right
}

.detailwrap dl.detailPointInner dd.Point em {
    font-size: 2em;
    padding-right: 4%
}

.detailwrap dl.detailPointInner dd.Point em i.ico {
    font-size: .8em;
    padding: 0 0 0 .2em
}

.detailwrap dl.detailPointInner dd.Point span {
    color: #ff0d51;
    font-size: 1.4em;
    font-weight: 700
}

.detailwrap dl.detailPointInner dd.Point span.crossout {
    font-weight: 400;
    font-size: 1em;
    color: #444;
    text-decoration: line-through;
    float: none
}

.detailwrap dl.detailPointInner dd.Point span img.up {
    padding: 0 4px;
    vertical-align: middle;
    width: 14px;
    margin: 0
}

.detailwrap dl.detailPointInner dd.Point span img.coin {
    padding: 0 4px;
    vertical-align: middle;
    height: 16px
}

.detailwrap a.btn_red:before,
.detailwrap a.btn_y:before,
.detailwrap span.iOS_about_open:before {
    height: 5rem;
    right: -5%;
    bottom: -1.6em;
    animation: fluffy1 5s ease infinite;
    content: ""
}

.detailwrap p.Terms {
    margin: 0 auto;
    width: 94%;
    text-align: right;
    padding-right: 2%
}

.detailwrap p.Terms span {
    color: #888;
    display: block;
    font-size: .8em
}

.detailwrap a.btn_red,
.detailwrap a.btn_y,
.detailwrap span.iOS_about_open {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-btn_bg01', endColorstr='$color-btn_bg02', GradientType=0);
    padding: 2% 0 3%;
    border-radius: 8px;
    color: #444;
    display: block;
    text-align: center;
    font-weight: 700
}

.detailwrap a.btn_red,
.detailwrap a.btn_y {
    background: #8bc34a;
    background: -moz-linear-gradient(top, #8bc34a 0, #8bc34a 100%);
    background: -webkit-linear-gradient(top, #8bc34a 0, #8bc34a 100%);
    background: linear-gradient(to bottom, #8bc34a 0, #8bc34a 100%);
    -webkit-box-shadow: 0 3px 0 #8bc34a;
    -moz-box-shadow: 0 3px 0 #8bc34a;
    box-shadow: 0 3px 0 #8bc34a;
    font-size: 1.4em;
    margin: 4% auto 6%;
    position: relative;
    width: 80%;
    text-shadow: 0 2px 0 #8bc34a
}

.detailwrap a.btn_red span,
.detailwrap a.btn_y span {
    font-size: .7em;
    display: block;
    font-weight: 700;
    line-height: 2em;
    text-shadow: 0 1px 0 #8bc34a
}

.detailwrap a.btn_red:hover,
.detailwrap a.btn_y:hover {
    background: #8bc34a
}

.detailwrap a.btn_red:before,
.detailwrap a.btn_y:before {
    background: url(../../../../img/user/sp/icon/finger.png?1703228340972) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    width: 15%
}

.detailwrap a.btn_y {
    margin: 4% auto 3%
}

.detailwrap span.iOS_about_open {
    background: #8bc34a;
    background: -moz-linear-gradient(top, #8bc34a 0, #8bc34a 100%);
    background: -webkit-linear-gradient(top, #8bc34a 0, #8bc34a 100%);
    background: linear-gradient(to bottom, #8bc34a 0, #8bc34a 100%);
    -webkit-box-shadow: 0 3px 0 #8bc34a;
    -moz-box-shadow: 0 3px 0 #8bc34a;
    box-shadow: 0 3px 0 #8bc34a;
    font-size: 1.4em;
    margin: 4% auto 6%;
    position: relative;
    width: 80%;
    text-shadow: 0 2px 0 #8bc34a
}

.detailwrap a.btn_red,
.quiz form p.button input {
    -webkit-box-shadow: 0 3px 0 #b70900;
    -moz-box-shadow: 0 3px 0 #8bc34a
}

.detailwrap span.iOS_about_open span {
    font-size: .7em;
    display: block;
    font-weight: 700;
    line-height: 2em;
    text-shadow: 0 1px 0 #8bc34a
}

.detailwrap span.iOS_about_open:hover {
    background: #8bc34a
}

.detailwrap span.iOS_about_open:before {
    background: url(../../../../img/user/sp/icon/finger.png?1703228340972) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    width: 15%
}

.detailwrap .notes_box {
    width: 90%;
    margin: 0 auto 4%;
    font-size: .9em;
    background: #ffede7;
    padding: 4%;
    border-radius: 6px;
    color: #d93200
}

.detailwrap .notes_box img {
    width: 84%;
    margin: 3% auto 0;
    display: block
}

.detailwrap .guide_link {
    text-align: center;
    margin-bottom: 4%;
    font-size: .9em
}

.detailwrap .guide_link img {
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1%
}

.detailwrap img.btn_red {
    display: block;
    text-align: center;
    margin: 20px auto -33px;
    width: 66%
}

.detailwrap a.btn_red {
    background: #d93200;
    background: -webkit-linear-gradient(top, #ff3d33, #d93200);
    background: -moz-linear-gradient(top, #8bc34a, #8bc34a);
    background: -ms-linear-gradient(top, #8bc34a, #8bc34a);
    background: -o-linear-gradient(top, #8bc34a, #8bc34a);
    background: linear-gradient(to bottom, #ff3d33, #d93200);
    border: 1px solid #b70900;
    text-shadow: 0 1px 0 #ff3d33;
    box-shadow: 0 3px 0 #b70900;
    color: #444
}

.detailwrap .detailCheckText {
    background: url(../../../../img/user/sp/detail/checkBg.png?1703228340972) left bottom no-repeat;
    background-size: 100% auto;
    color: #2c4256;
    font-size: .9em;
    height: 38px;
    line-height: 1.4em;
    letter-spacing: 1px;
    margin: 20px auto 30px;
    position: relative;
    text-align: center;
    width: 310px
}

.detailwrap .detailCheckText p {
    position: absolute;
    left: 22%;
    width: 72%
}

a.serviceinfo_link {
    border-radius: 30px;
    border: 2px solid #eff0e5;
    padding: 1% 0 .8%;
    display: block;
    width: 100%;
    margin: 0 auto 4%;
    text-align: center;
    font-size: .74em;
    background: #f8f9f0
}

a.serviceinfo_link span img {
    height: 1.2em;
    width: auto;
    padding-right: 1.5%;
    vertical-align: sub
}

.detailTabWrap .tab_box {
    align-items: center;
    margin: 0 auto;
    width: 100%;
    z-index: 1;
    position: relative;
    display: table
}

.detailTabWrap .tab_box li {
    background: #eff0e5;
    box-sizing: border-box;
    color: #0287d3;
    border: none;
    cursor: pointer;
    font-size: .9em;
    padding: 2% 3% 1.6%;
    line-height: 1.5em;
    position: relative;
    text-align: center;
    width: 48%;
    margin: 0 2%;
    border-radius: 8px 8px 0 0;
    height: 4em;
    display: table-cell;
    vertical-align: middle
}

.detailTabWrap .tab_box li img.coin {
    display: inline;
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    padding: 0 2% 0 0
}

.detailTabWrap .tab_box li:before {
    content: "";
    background: #019cf6;
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.detailTabWrap .tab_box li.active {
    border-top: 3px solid #019cf6;
    border-left: 3px solid #019cf6;
    border-right: 3px solid #019cf6;
    background: #fff;
    color: #2c4256;
    border-radius: 8px 8px 0 0
}

.detailTabWrap .tab_box li.active:before {
    content: "";
    background: 0 0
}

.detailTabWrap .tab_box li span {
    display: inline-block
}

.detailTabWrap .tab_box li .attention,
.detailTabWrap .tab_box li .megaphone_icon {
    display: block;
    z-index: 5;
    position: absolute;
    content: ""
}

.detailTabWrap .tab_box li .attention {
    background: url(../../../../img/user/sp/detail/checkIcon.png?1703228340972) no-repeat;
    background-size: contain;
    height: 4rem;
    top: -30%;
    right: -10%;
    width: 35%;
    max-width: 45px;
    animation: check 3s ease infinite
}

.detailTabWrap .tab_box li .megaphone_icon {
    background: url(../../../../img/user/sp/detail/megaphone.png?1703228340972) no-repeat;
    background-size: 100% auto;
    left: -8%;
    top: -20%;
    width: 28%;
    max-width: 40px;
    height: 4rem;
    animation: pikopiko 1s steps(2, start) infinite
}

@keyframes pikopiko {
    0% {
        transform: rotate(20deg)
    }

    to {
        transform: rotate(-10deg)
    }
}

.detailExplainBox {
    background: #fff;
    position: relative;
    width: 100%;
    margin: 0 auto 4%;
    padding: 5% 5% 7%;
    line-height: 1.6em;
    font-size: 1em
}

.detailExplainBox:before {
    content: "";
    background: #019cf6;
    height: 3px;
    position: absolute;
    top: -3px;
    left: 0;
    width: 100%
}

.detailExplainBox h3 {
    font-size: 1.3em;
    border-bottom: #eaebdd dashed 2px;
    color: #ed341a;
    padding: 0 0 2%;
    margin: 3% auto 2%;
    text-indent: -.5em;
    letter-spacing: .05em
}

.detailExplainBox h3:first-child {
    margin: 0 auto 1%;
    color: #2c4256
}

.detailExplainBox b {
    font-weight: 700
}

.detailExplainBox u {
    text-decoration: none;
    color: #d93200
}

.detailExplainBox .detailConditionsBox {
    margin: 0 0 4%
}

.detailExplainBox .detailConditionsBox .detailConditionsInner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f8f9f0;
    padding: 3%;
    width: 100%;
    font-size: 1em;
    margin: 0 auto
}

#review,
.detailExplainBox .detailConditionsBox .detailConditionsInner:nth-child(2n) {
    background: #fff
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dt {
    margin-right: 10px;
    width: 50%
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd {
    overflow: hidden;
    width: 50%
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd span {
    color: #aaa;
    font-size: .8em;
    float: right
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd span.crossout {
    float: none;
    text-decoration: line-through;
    padding-right: 8px
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd img {
    vertical-align: middle;
    height: 1.6rem;
    margin: 0 4% 0 0;
    width: auto
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd a {
    display: block;
    font-size: .8em
}

.detailExplainBox .detailConditionsBox .detailConditionsInner dd em {
    font-size: 20px
}

.detailExplainInner p:first-child {
    margin-bottom: 15px
}

.service_information {
    width: 100%;
    margin: 0 auto;
    border-radius: 8px
}

.service_information h2 {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 3%
}

.service_information h2 img {
    margin-right: 2%;
    vertical-align: sub;
    width: 6vw
}

.service_information p {
    padding-bottom: 1%
}

.service_information p strong {
    font-weight: 700;
    font-size: 1.2em;
    color: #d93200
}

.service_information p em {
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif, 'Microsoft Yahei';
    font-size: 1.1em;
    font-weight: 400;
    font-style: normal
}

#review {
    margin: 20px 0 0;
    padding-bottom: 0;
    position: relative
}

#review .ReviewInfo {
    position: absolute;
    right: 4%;
    top: 2.4%
}

#review .ReviewInfo span.review_about_open {
    letter-spacing: .1em;
    color: #0287d3;
    font-size: 1.2rem
}

#review .ReviewInfo span.review_about_open img {
    width: 18px;
    padding-right: 2%;
    vertical-align: sub
}

#review .ReviewInfo span.review_about_open:hover {
    color: #25b9ae;
    text-decoration: none
}

#review .detailReviewBox {
    width: 100%;
    margin: 4% auto
}

#review .detailReviewBox div.loader {
    position: relative;
    width: 8%;
    margin: 0 auto 10px;
    display: none
}

#review .detailReviewInner {
    border: 1px solid #eaebdd;
    margin: 0 3% 4%
}

#review .detailReviewInner:last-child {
    margin-bottom: 0
}

#review .detailReviewInner dt {
    background: #eaebdd;
    padding: 3% 4%;
    overflow: hidden
}

#review .detailReviewInner dt time {
    margin-left: 2%
}

#review .detailReviewInner dt span {
    float: right;
    width: 50%
}

#review .detailReviewInner dd p img,
#review .detailReviewInner dt img {
    width: 23%;
    margin-bottom: 1.3%;
    vertical-align: middle
}

#review .detailReviewInner dt img {
    margin-right: 3%
}

#review .detailReviewInner dd {
    background: #fff;
    padding: 2% 4% 4%
}

#review .detailReviewInner dd p {
    padding: 2% 0
}

#review .detailReviewInner dd .beneficial {
    text-align: right
}

#review .detailReviewInner dd .beneficial a i {
    overflow: hidden;
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1%;
    position: relative
}

#review .detailReviewInner dd .beneficial a i img {
    position: absolute;
    height: 32px;
    width: auto;
    left: 0
}

#review .detailReviewInner dd .beneficial a.click {
    color: #999
}

#review .detailReviewInner dd .beneficial a.click:hover {
    color: #ccc
}

#review .detailReviewInner dd .beneficial a.click img.good {
    vertical-align: bottom;
    height: 32px;
    position: absolute;
    right: 0;
    left: inherit
}

#review .detailReviewInner dd .beneficial .speech-bubble {
    position: relative;
    background: #44566e;
    border-radius: .4em;
    padding: 1% 3%;
    color: #fff;
    margin-left: 2.5%
}

#review .detailReviewInner dd .beneficial .speech-bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #44566e;
    border-left: 0;
    border-top: 0;
    margin-top: -.5px;
    margin-left: -8px
}

.tags {
    max-height: 3.5rem;
    overflow: hidden;
    margin: 2% 4%;
    position: relative
}

.tags-inner {
    width: 100%
}

#tag>span,
.tags a>span {
    display: inline-block;
    margin: 0 2% 2% 0;
    padding: 2.5% 3% 2%;
    border-radius: 8px;
    border: 2px solid #eff0e5;
    color: #444;
    background: #fff;
    font-size: .8em;
    line-height: 1
}

#tag>span,
.tags a>span:hover {
    border-color: rgba(2, 135, 211, .5);
    color: #0287d3
}

.tags-closer,
.tags-openner {
    position: absolute;
    right: 0;
    top: .7rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    border: 1px solid gray;
    border-radius: 30px;
    padding: 0;
    line-height: 2rem;
    cursor: pointer;
    display: none;
    background: #fff
}

.tags-open {
    max-height: none !important
}

.tags-open .tags-openner {
    display: none !important
}

.tags-open .tags-closer {
    display: block
}

#detail_history {
    margin-top: 30px;
    background: #fff
}

#detail_history ul {
    margin: 10px 12px
}

#detail_history ul li {
    display: inline-block;
    position: relative;
    height: 56px;
    width: 56px;
    margin: 5px 5px 15px
}

#detail_history ul li img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    max-width: 56px;
    max-height: 56px
}

@keyframes check {

    0%,
    100%,
    40%,
    55% {
        transform: scale(1, 1) translate(0, 0)
    }

    43% {
        transform: scale(.95, 1.2) translate(0, -10%)
    }

    46% {
        transform: scale(1.1, .9) translate(0, 5%)
    }

    49% {
        transform: scale(.95, 1.05) translate(0, -3%)
    }

    52% {
        transform: scale(1.05, .95) translate(0, 3%)
    }
}

@keyframes fluffy1 {

    0%,
    10%,
    100%,
    20%,
    35%,
    5% {
        transform: translate(0, 0)
    }

    15%,
    25% {
        transform: translate(-4px, -8px)
    }
}

.quiz {
    background: url(../../../../img/user/pc/detail/click_quiz_bg.png?1703228340972) right 15% bottom 20px no-repeat #eaebdd;
    background-size: 190% auto;
    width: 94%;
    margin: 0 auto 4%;
    border-radius: 10px;
    padding: 4%;
    position: relative
}

.quiz h4 {
    width: 80%
}

.quiz h5 {
    font-size: 6vw;
    font-weight: 700;
    color: #ff0d51;
    padding: 4% 0 0;
    margin: 0;
    text-align: center;
    line-height: 1.4em
}

.quiz form p.question,
.quiz form p.wrong {
    line-height: 1.3em;
    text-align: center;
    font-weight: 700
}

.quiz h5 b {
    font-size: 8vw;
    padding: 0 1%
}

.quiz form p.question {
    font-size: 5vw;
    padding: 5% 0
}

.quiz form p.answer_box input {
    background: #f8f8f8;
    width: 100%;
    margin: 0 auto;
    border: 2px solid #d9dad2;
    font-size: 4vw;
    padding: 4% 3%;
    box-sizing: border-box;
    display: block;
    border-radius: 6px
}

.quiz form p.button input {
    background: #d93200;
    background-image: -webkit-linear-gradient(top, #ff3d33, #d93200);
    background-image: -moz-linear-gradient(top, #8bc34a, #8bc34a);
    background-image: -ms-linear-gradient(top, #8bc34a, #8bc34a);
    background-image: -o-linear-gradient(top, #8bc34a, #8bc34a);
    background-image: linear-gradient(to bottom, #ff3d33, #d93200);
    border: 1px solid #b70900;
    -webkit-border-radius: 6;
    -moz-border-radius: 6;
    border-radius: 6px;
    box-shadow: 0 3px 0 #b70900;
    letter-spacing: .1em;
    font-weight: 700;
    margin: 3% auto 0;
    height: 4%;
    position: relative;
    width: 60%;
    text-shadow: 0 2px 0 #992300;
    color: #fff;
    font-size: 7vw;
    display: block;
    padding: 3% 0
}

.quiz form p.button input:hover {
    background: #ff4e45
}

.quiz form p.wrong {
    font-size: 4vw;
    color: #000;
    padding: 0 0 4%
}

.quiz form div.correct {
    text-align: center
}

.quiz form div.correct p.correct_answer {
    font-size: 6vw;
    padding: 4% 0
}

.quiz form div.correct p.correct_answer b {
    font-weight: 700
}

.quiz form div.correct p.correct_comment {
    color: #ff0d51;
    font-size: 6vw;
    line-height: 1.2em;
    font-weight: 700
}

.quiz form div.correct p.correct_comment b {
    font-size: 9vw
}

.quiz .korokoro {
    -webkit-animation: korokoro 3s linear 0s 1;
    animation: korokoro 3s linear 0s 1;
    animation-iteration-count: 10;
    position: absolute;
    right: 2%;
    top: 3%;
    width: 18%
}

@-webkit-keyframes korokoro {
    0% {
        -webkit-transform: translate(0, 0)
    }

    45%,
    5% {
        -webkit-transform: translate(10%, 0) rotate(10deg)
    }

    25% {
        -webkit-transform: translate(20%, 0) rotate(20deg)
    }

    30% {
        -webkit-transform: translate(-10%, 0) rotate(-10deg)
    }

    35% {
        -webkit-transform: translate(-15%, 0) rotate(-15deg)
    }

    50% {
        -webkit-transform: translate(15%, 0) rotate(15deg)
    }

    60% {
        -webkit-transform: translate(-5%, 0) rotate(-5deg)
    }

    65% {
        -webkit-transform: translate(-7%, 0) rotate(-7deg)
    }

    100%,
    75% {
        -webkit-transform: translate(0, 0) rotate(0)
    }
}

@keyframes korokoro {
    0% {
        transform: translate(0, 0)
    }

    45%,
    5% {
        transform: translate(10%, 0) rotate(10deg)
    }

    25% {
        transform: translate(20%, 0) rotate(20deg)
    }

    30% {
        transform: translate(-10%, 0) rotate(-10deg)
    }

    35% {
        transform: translate(-15%, 0) rotate(-15deg)
    }

    50% {
        transform: translate(15%, 0) rotate(15deg)
    }

    60% {
        transform: translate(-5%, 0) rotate(-5deg)
    }

    65% {
        transform: translate(-7%, 0) rotate(-7deg)
    }

    100%,
    75% {
        transform: translate(0, 0) rotate(0)
    }
}