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



.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: 700px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    padding-bottom: 80px;
    background-color: #fff;
    overflow: hidden;
}

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

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

footer a {
    color: #fff;
}

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

@media screen and (max-width:699px){
    p {
        font-size: 17px;
    }
}


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: 20px;
}

.purple{
    color: #7869b9;
}

.pink {
    color: #ff67b2;
}

.red {
    color: #eb0606;
}

.blue {
    color: #046dd9;
}

.gray {
    color: #666;
}

.mark_yellow {
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, #feffc6 40%, #feffc6 100%);
}

.taC {
    display: block;
    margin: 20px auto 0;
    text-align: center;
}

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

.mt20 {
    margin-top: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.m0 {
    margin: 0 !important;
}

.fsL {
    font-size: 22px;
}

.fsLL {
    font-size: 25px;
}

@media screen and (max-width:699px){
    .fsM{
        font-size: 15px;
    }
    .fsL {
        font-size: 20px;
    }
    
    .fsLL {
        font-size: 23px;
    }
}


h2 {
    margin-top: 60px;
    font-size: 24px;
    background-color: #e7e5fa;
    padding: 14px;
    padding-left: 24px;
    border-left: 8px solid #877ac0;
}

@media screen and (max-width:699px){
    h2 {
        font-size: 20px;
    }
}

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

/* Amazon口コミ */
.amazon img,
.amazon video {
    margin: 0;
}

/* 普通の口コミ */
.kuti_box {
    border: 2px solid #5bb8bb;
    margin-top: 20px;
}

.kuti_ttl {
    background-color: #5bb8bb;
    color: #fff;
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 10px;
}

@media screen and (max-width:699px){
    .kuti_ttl {
        font-size: 22px;
    }
}

.kuti_txt {
    padding: 10px;
    margin: 0;
}


.kuti_box img,
.kuti_box video {
    padding: 10px;
    margin: 0;
}

/* CTA */
.cta:hover {
    opacity: 0.8;
}

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

.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: #ed93b7;
}

.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%, #ed93b7)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #ed93b7)) top right/50% 100% no-repeat;
    background: linear-gradient(to top right, transparent 49%, #ed93b7 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ed93b7 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);
    }
}

/* 吹き出し */
.balloon01 {
    margin: 1em 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
}

.chatting01 {
    width: auto;
}

.faceicon01 {
    display: inline-block;
    width: 90px;
    min-width: 90px;
    height: auto;
    position: relative;
}

.faceicon01 img {
    box-sizing: border-box;
    width: 90px;
    max-width: 90px;
    height: 90px !important;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
}

@media screen and (max-width:699px){
    .balloon01 {
        gap: 5px;
    }
    .faceicon01 {
        width: 65px;
        min-width: 65px;
    }
    .faceicon01 img {
        width: 65px;
        max-width: 65px;
        height: 65px !important;
    }
}


.says01 {
    display: block;
    position: relative;
    margin: 0 0 0 20px;
    padding: 14px;
    border-radius: 10pt;
    background-color: #e7e5fa;
}

.says01:before {
    content: "";
    position: absolute;
    top: 12px;
    left: -26px;
    border: 11pt solid transparent;
    border-right: 11pt solid #e7e5fa;
}

.says01 p {
    margin: 0;
    padding: 0;
    letter-spacing: -0.01em;
}