/* オリジナルの設定*/
/* common
---------------------------------*/
html{
    font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
}
.warp{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.navi_inner_img{
    position: relative;
}

.navi_inner_btn{
    position: absolute;
    top: 0;
    right: 0;
}
.cta_inner{
    text-align: center;
}

.btn01{
    margin: 2rem auto;
}

.btn01_inner{
    text-align: center;
}

#voice{
    background: #f4f3ef;
}

#contact-form{
    font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
  z-index: 1;
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../image/voice_child_01.png);
}

.slider-item02 {
    background:url(../image/voice_child_02.png);
}

.slider-item03 {
    background:url(../image/voice_child_03.png);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: contain;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
    text-align:center;
  margin:-50px 0 0 0;
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:18px;/*ドットボタンのサイズ*/
    height:18px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#CBCBCB;/*ドットボタンの色*/
    border: none;
}

.slick-dots .slick-active button{
    background:#4e4e4e;/*ドットボタンの現在地表示の色*/
}

.voice_ab img{
    width: 90%;
    margin: 0 auto;
}


footer{
    margin-top: 2rem;
    overflow: hidden;
    color: #fff;
    background: #52b67e;
}

.footer_inner {
    font-size: 12px;
    text-align: center;
    padding: 0;
    line-height: 1.2rem;
}

/* pc
---------------------------------*/
@media screen and (min-width: 641px){
    .pcOnly{
        display: block;
        margin: 0 auto;
    }
    .spOnly{
        display: none;
    }
    .disblock{
        display: flex;
    }
    .navi_inner_btn{
        top: 15px;
        right: -180px;
    }

    .navi_inner_btn img{
        width: 35%;
    }
    #fv img,
   #prevention img,
   #nayami img,
   #kaiketsu img,
   #cando img,
   #faq img,
   #price img,
   #qa img,
   #consultation img,
   #ranking img,
   #flow img,
   #voice .voice_title img{
       width: 100%;
   } 
   
   #from img{
       width: 100%;
   }
    .btn02{
        background: url(../image/btn_02_pc.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .btn02_inner{
        padding: 33rem 10rem 11rem;
        text-align: center;
    }
    
    .btn02_inner img{
        width: 100%;
    }

    .btn03{
        background: url(../image/btn_03_pc.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .btn03_inner{
        padding: 20rem 10rem 6rem;
        text-align: center;
    }
    .btn03 a img{
        width: 98%;
    }
    .btn03 .disblock:last-child{
        margin-top: 1rem;
    }

    .btn04{
        background: url(../image/btn_04_pc.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .btn04_inner{
        padding: 11rem 10rem 6rem;
        text-align: center;
    }
    .btn04 a img{
        width: 95%;
    }
    .btn04 .disblock:last-child{
        margin-top: 1rem;
    }
    
}

/* sp
---------------------------------*/
@media screen and (max-width: 640px){
    img { 
        max-width: 100%; 
        width: 100%;
    }
    .pcOnly{
        display: none;
    }
    .spOnly{
        display: block;
    }
    .disblock{
        display: block;
    }
    .navi_inner_btn{
        top: 21px;
        right: 4px;
        text-align: right;
    }

    .navi_inner_btn img{
        width: 30%;
    }

    .cta_btn img{
        width: 45%;
    }

    #cando .spOnly{
        background: #53b77f;
    }

    .slider{
        height: 35vh;
    }
    .slider-item{
        height: 30vh;
        background-size: contain!important;
        background-repeat: no-repeat!important;
    }
    .slick-dots{
        margin: 18px 0 0 0;
        width: 65%;
    }

    .slick-dots button {
        width: 18px;
        height: 30px;
    }
    
    .slider-item01 {
        background:url(../image/voice_child_01_sp.png);
    }
    
    .slider-item02 {
        background:url(../image/voice_child_02_sp.png);
    }
    
    .slider-item03 {
        background:url(../image/voice_child_03_sp.png);
    }

    .btn01 img{
        width: 45%;
    }

    .btn02{
        background: url(../image/btn_02_sp.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .btn02_inner{
        padding: 14.5rem 0 5.5rem;
        text-align: center;
    }
    .btn02 img{
        width: 77%;
        margin: 0 auto;
    }
    .btn02 img:nth-child(2){
        margin-top: 0.5rem;
    }

    .btn03{
        background: url(../image/btn_03_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .btn03_inner{
        padding: 10rem 0 2rem;
        text-align: center;
    }

    .btn03 img{
        width: 77%;
        margin: 0 auto;
    }
    .btn03 img:nth-child(2){
        margin-top: 0.5rem;
    }

    .btn04{
        background: url(../image/btn_04_sp.png);
        background-size: cover;
        background-size: contain;
    }
    .btn04_inner{
        padding: 3rem 0 2rem;
        text-align: center;
    }
    .btn04 img{
        width: 77%;
        margin: 0 auto;
    }
    .btn04 img:nth-child(2){
        margin-top: 0.5rem;
    }
}