@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Asap+Condensed:600');

/*additional reset
---------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

body.safari #content, body.safari #footer {/*サファリでリンク先から戻った時文字が拡大する対応*/
    -webkit-text-size-adjust: 100%;
}
body {
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    margin: 0;
    font-size: 17px;
}
p{
    line-height: 1.8;
}
/** link **/
a:link {
    color: rgb(49, 120, 249);
	text-decoration: underline;
}

a:visited {
    color: rgb(49, 120, 249);
}

a:hover,
a:active {
	text-decoration: none;
}

/*初期設定
----------------------------------------------------*/
#wrapper{
    width: 620px;
    padding: 0 0 0 0;
    overflow: hidden;
    margin: auto;
    position: relative;
}
.content{
    display: block;
    margin: 0 auto;
    width: 95%;
}
@media screen and (min-width:640px) {
    .pc{
        display: block;
    }
    .sp{
        display: none;
    }
}

@media screen and (max-width:640px) {
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    #wrapper{
        width: 100%;
    }
}
/*layout
----------------------------------------------------*/

img{
    width: 100%;
    margin: 0 0 0;
    padding: 0;
}
.tac{
    text-align: center;
}
.tar{
    text-align: right;
}
.mt0{
    margin-top: 0;
}
.mb0{
    margin-bottom: 0;
}
.mb10{
    margin-bottom: 10px;
}
.mb20{
    margin-bottom: 20px;
}
.mt20{
    margin-top: 20px;
}
.mb30{
    margin-bottom: 30px;
}
.mt30{
    margin-top: 30px;
}
.mb40{
    margin-bottom: 40px;
}
.mt40{
    margin-top: 40px;
}
.pink{
    color: rgb(245, 44, 210);
}
.red{
    color: rgb(255, 0, 0);
}
.gray{
    color: rgb(130, 130, 130);
}
.orange{
    color: rgb(255, 153, 0);
}
.blue{
    color: rgb(0, 102, 204);
}
.marker{
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 30%,#ffee57 0%) repeat scroll 0 0;
}
.marker02{
    border-bottom-style: dotted;
    border-bottom-color: #dcdcdc;
    border-bottom-width: 3px;
    padding-bottom: 3px;
}
.fsLL{
    font-size: 23px;
}
.fsL{
    font-size: 20px;
}
.fsM{
    font-size: 19px;
}
.fsSM{
    font-size: 15px;
}
.fsS{
    font-size: 10px;
}

footer{
    padding: 30px 20px;
    text-align: center;
    background: #ECECEC;
    margin-top: 50px;
    font-size: 13px;
}

h2{
        text-align: left;
        border-bottom: solid 1px #fc47a8;
        color: #000;
        font-size: 1.1em;
        border-left: solid 5px #fc47a8;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background: #ffe5f1;
}
video{
    width: 100%;
}
.balloon{
    position: relative;
    padding: 15px;
    background-color: #fcfad9;
    border-radius: 10px;
    margin: 10px 10px 40px;
}
.balloon::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: -10px;
    left: 15px;
    border-bottom: 12px solid #fcfad9;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
}
.cp_arrows {
    position: relative;
    height: 50px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.cp_arrows .cp_arrowfirst {
    animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
    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%;
    opacity: 0;
}

@keyframes arrow-move08 {
    0% {
        top: 40%;
        opacity: 0;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.cp_arrows .cp_arrow:before {
    transform: rotate(30deg) translateX(-39%);
    transform-origin: top left;
}

.cp_arrows .cp_arrow:after {
    transform: rotate(-30deg) translateX(39%);
    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;
}
.speech-bubble{
    background: #e2f3ff;
    border: 1px solid #a7a7a7;
    border-radius: 4px;
    box-shadow: 4px 4px 0 0 #ccc;
    padding: 15px;
    line-height: 1.6;
    margin: 10px 10px 10px 45px;
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: auto;
}
.speech-bubble-arrow{
    border-left: 21px solid transparent;
    border-top: 20px solid #ccc;
    left: -22px;
    position: absolute;
    top: 29px;
}
.speech-bubble-arrow::before{
    border-left: 23px solid transparent;
    border-top: 23px solid #a7a7a7;
    left: -22px;
    content: "";
    position: absolute;
    top: -30px;
}
.speech-bubble-arrow::after{
    border-left: 21px solid transparent;
    border-top: 21px solid #e2f3ff;
    left: -20px;
    content: "";
    position: absolute;
    top: -29px;
}
.balloon2{
    position: relative;
    padding: 15px;
    background-color: #fdd;
    border-radius: 10px;
    margin: 10px 10px 10px;
    box-sizing: border-box;
}
.balloon2::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -10px;
    top: 15px;
    border-right: 12px solid #fdd;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
.balloon3{
    position: relative;
    padding: 15px;
    background-color: #fdd;
    border-radius: 10px;
    margin: 10px 10px 10px;
    box-sizing: border-box;
}
.balloon3::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: -10px;
    top: 15px;
    border-left: 12px solid #fdd;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}
h6{
    position: relative;
    border-bottom: 2px solid #ff8181;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 35px;
    padding-bottom: 8px;
    line-height: 1.4;
}
.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;
    }
}
.gradientBorder__area{
    width: 90%;
    max-width: 500px;
    height: auto;
    margin: 0 auto 20px;
    position: relative;
}
.gradientBorder__inner{
    padding: 10px;
    z-index: 1;
    position: relative;
    border-radius: 3px;
    background: #fff;
}
.gradientBorder__area:after{
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    height: calc(100% + (3px * 2));
    width: calc(100% + (3px * 2));
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: 6px;
    z-index: 0;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

@keyframes animatedgradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
.purupuru {
    /*アニメーション名、動きの速さ0.8s（=0.8秒）、動き具合、開始時間5s(=5秒後)、動く回数infinite(=無限 3=3回など)   */
    animation: purupuru 2s linear 0s infinite;
}

@keyframes purupuru {

    /*アニメーションの最初の動き*/
    0% {
        /*skew = 傾斜変形する、1番目の値はX軸、2番目に値がある場合はY軸に傾斜変形する
        9deg = 9度*/
        transform: skew(9deg);
    }

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

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

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

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

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

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

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

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

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

    /*アニメーションの最後の動き*/
    100% {
        transform: skew(0deg);
    }
}
.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;
}

.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;
}
.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% {
        -webkit-transform: translate(0, 0);
    }

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

    100% {
        -webkit-transform: translate(0, 0);
    }
}
@-moz-keyframes btnAnime02 {
    0% {
        -moz-transform: translate(0, 0);
    }

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

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