@charset "UTF-8";

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

body {
    font: 15px/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: #cccc;
    text-align: center;
    margin-top: 10px;
    color:#fff;
  }

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;
}

img,
video {
    width: 100%;
    object-fit: contain;
    display: block;
    vertical-align: bottom;
    margin-top: 25px;
}
h3 {
    position: relative;
    line-height: 1.3;
    padding: 20px 8px 17px 8px;
    background: #1fb3e2;
    color: #FFFFFF;
    font-size: 21px;
    margin: 40px 0 30px;
    text-align: left;
}
.red {
    color: #e60000;
}

.blue {
    color: #0000ff;
}
.pink {
    color: #ff0057;
}
.gray{
    color: #9d9d9d;
}

.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;
}
.fsSS {
    font-size: 10px;
}
.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;
}


/* --------------------揺れ-------------------- */
.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;
    }
}



/* --------------------動く矢印-------------------- */
.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;
}


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


/* --------------------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);
    }
}

.box01{
    background: #fffdc5;
    border: solid 2px #bebebe;
    margin: 20px 0;
    padding: 20px;
}
.box01 p{
    margin:0;
}

.box02 {
    background: #e1f5fe;
    border: solid 2px #b3e5fc;
    border-radius: 5px;
    margin: 25px 0 25px 0;
    position: relative;
    padding: 30px 30px 0;
    max-width: 100%;
}
 .box02 .ttl {
    color: #03a9f4;
    font-weight: bold;
    text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px, #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px, #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px, #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px, #fff 2.88051px -0.838246px 0px;
    background: linear-gradient(0deg, #e1f5fe 0%, #e1f5fe 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    display: inline-block;
    top: -0.8em;
    left: 20px;
    padding: 0 10px;
    line-height: 1.5;
    margin: 0;
    z-index: 1;
    box-sizing: border-box;
}
.box02 .ttl:after {
    position: absolute;
    display: inline-block;
    top: calc(0.8em - 11px);
    left: 0;
    background: #ffffff;
    content: "";
    width: 100%;
    height: 11px;
    z-index: -1;
}
 .box02 .box02_cont {
    padding: 0 0 20px;
    z-index: -2;
}
.box02 .box02_list {
    padding: 0;
    margin: 0;
    padding-left: 0;
    margin-left: 0;
    list-style-type: none;
    box-sizing: border-box;
}
.box02 .box02_list li {
    padding: 0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin: 0;
    position: relative;
    margin: 0;
    font-size: 16px;
    line-height: 22.5px;
    color: #333;
    font-weight: bold;
    text-align: left;
}
.article-body .sb-bg-gum-marker-animated.animated {
    background-position: bottom 0 right 100% !important;
}
.box02 .ttl:after {
    position: absolute;
    display: inline-block;
    top: calc(0.8em - 11px);
    left: 0;
    background: #ffffff;
    content: "";
    width: 100%;
    height: 11px;
    z-index: -1;
}

.cute-heading {
    display: flex;
    align-items: center;
}
.cute-heading img{
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
h2 {
    padding: 15px 5px 15px 20px;
    background-color: #c1f0ff;
    font-size: clamp(18px, 2vw, 22px);
    margin: 40px 0 0 0;
    border-top: 3px dotted #3dc7de;
}

/*比較表*/
.comparison-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:20px 0;
    width: 100%;
    height: auto;
    border: 5px solid #baedff;
    box-sizing: border-box;
    margin-top: 10px;
}

.comparison-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.comparison-table th,
.comparison-table td{
    border:2px dotted #cfcfcf;
    padding:12px 5px;
    text-align:center;
    vertical-align:middle;
    font-size:12px;
    line-height:1.6;
}
.comparison-table td{
    width: 16%;
}
.comparison-table tbody th,
.comparison-table thead th:first-child{
    background:#27afe4;
    color:#fff;
    font-weight:bold;
    width:80px;
    min-width:80px;
    border: solid 2px;
}

.recommend{
    background:#fffde9;
    font-weight: bold;
}

.product-name{
    font-weight:bold;
    margin-bottom:12px;
}

.comparison-table thead a{
    color:#1f6db5;
    text-decoration:underline;
}

.comparison-table img{
    display:block;
    width:90px;
    height:auto;
    margin:10px auto 0;
}

.stars{
    color:#d8b14a;
    letter-spacing:1px;
}
.yws_star01 {
    position: relative;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
    padding: 0;
}
.yws_star01::before {
    content: "★★★★★";
    position: absolute;
    color: #d4b45f;
    overflow: hidden;
    white-space: nowrap;
    width: calc(4.5em - 0 * (4.5em - .5em));
}
.yws_star02 {
    position: relative;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
    padding: 0;
}
.yws_star02:before {
    content: "★★★★★";
    position: absolute;
    color: #d4b45f;
    overflow: hidden;
    white-space: nowrap;
    width: calc(3.5em - 0 * (3.5em - .5em));
}

.mark{
    display:block;
    font-size:42px;
    line-height:1;
    margin-bottom:8px;
    font-weight:bold;
}

.excellent{
    color:#ff6b6b;
}

.good{
    color:#7ad0e7;
}

.caution{
    color:#f5a623;
}

.bad{
    color:#000;
}

.site-btn{
    display:block;
    background:#f7a000;
    color:#fff !important;
    text-decoration:none !important;
    border-radius:10px;
    padding:14px 8px;
    font-weight:bold;
    box-shadow:0 4px 0 #c17b00;
    transition:.2s;
}

.site-btn:hover{
    transform:translateY(1px);
    box-shadow:0 3px 0 #c17b00;
}
.btn_dr{
    padding: 5% 0;
}

.comparison-note{
    text-align:right;
    font-size:12px;
    margin-top:10px;
    color:#666;
}

@media screen and (max-width:768px){
    .comparison-table th,
    .comparison-table td{
        font-size:13px;
        padding:10px 6px;
    }
    .mark{
        font-size:36px;
    }
}

/*吹き出し*/
.balloon01, .balloon02 {
    margin: 1em 0;
    overflow: hidden;
    display: flex;
}
.scroll-fade-side{
    opacity:0;
    transform:translateX(-50px);
    transition:800ms;
}

.scroll-fade-side.show{
    opacity:1;
    transform:translateX(0);
}
.faceicon01 {
    display: inline-block;
    width: 55px;
    min-width: 55px;
    height: auto;
    position: relative;
}
.faceicon01 img {
    border: solid 3px #F4E0C4;
    box-sizing: border-box;
    width: 55px;
    max-width: 55px;
    height: 55px !important;
    object-fit: cover;
    border-radius: 50%;
    margin-top: 0px;
}
.chatting01 {
    width: auto;
}
.says01 {
    display: block;
    position: relative;
    margin: 0 0 0 20px;
    padding: 12px;
    border-radius: 10pt;
    background-color: #F4E0C4;
}
.says01 p{
    margin-top: 0px;
}
.says01:before {
    content: "";
    position: absolute;
    top: 12px;
    left: -26px;
    border: 11pt solid transparent;
    border-right: 11pt solid #F4E0C4;
}

.faceicon02 {
    flex-basis: 55px;
    flex-shrink: 0;
}
.faceicon02 img {
    width: 55px;
    max-width: 55px;
    height: 55px !important;
    object-fit: cover;
    border-radius: 50%;
    margin-top: 0px;
}
.chatting02 {
    background: #ffc0cb;
    margin: 0 14px auto;
    min-height: 27px;
    padding: 5px 13px;
    border-radius: 22px;
    box-shadow: 2px 2px 3px 0px #cccccc;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}
.chatting02:before {
    border-right: 12px solid #ffc0cb;
    border-right-color: #ffc0cb;
    left: -15px;
    border-top-right-radius: 100%;
    transform: rotate(285deg);
    width: 24px;
    height: 18px;
    top: 10px;
    content: '';
    position: absolute;
    box-sizing: border-box;
}
.says02 p {
    margin: 0;
    padding: 0;
    letter-spacing: -0.01em;
}

.flash{
    animation: flash 1.5s linear infinite;
}
@keyframes flash{
    0% {
    opacity: 1;
    }
    16.6667% {
        opacity: 0;
    }
    33.3333% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    66.6667% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.follow {
    position: fixed;
    display: block;
    z-index: 10;
    max-width: 600px;
}
.follow {
    display: none;
    bottom: -7%;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-width:768px){
    .follow {
        display: none;
        bottom: -7%;
        left: 0%;
        transform: translateX(0%);
    }
}