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

#navi {
    background: #EE6284;
}

#navi_text p {
    font-size: 3rem;

}


.cta_inner{
    text-align: center;
}

.btn01{
    margin: 2rem auto;
}

.btn01_inner{
    text-align: center;
    padding: 2rem;
}

#voice{
    background: #f4f3ef;
}

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

img {
    width: 100%;
}

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

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

.footer_inner ul li {
    list-style: none;
    margin-right: 2rem;
    text-align: center;
}
.footer_text {
    padding-top: -1rem;
}
.sns-icon {
    display: flex;
    justify-content: center;
}

.sns-icon a {
    color: #fff;
}

/* btn_area */

.btn_area {
    background-color: #FFABAB;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn_form {
    width: 36%;
    text-align: center;
    margin: 0 auto;
}

.btn_line img {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
}

.btn_line_2layout {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.btnarea_text {
    background: #EE6284;
    color: #FFF;
    width: 28%;
    text-align: center;
    margin: 0 auto;
    font-family: 'Tsukushi A Round Gothic';
    margin-bottom: 1rem;
}

.btn_line_text {
    color: #FFF;
    text-decoration: none;
    font-family: 'Tsukushi A Round Gothic';
}

.btn_line {
    width: 13%;
    background: #4ECB71;
    border-radius: 22.8461px;
    margin-left: 2rem;
}

/* work */
#work {
    padding-top: 5rem;
    width: 80%;
    text-align: center;
    margin: 0 auto;
}
#work02 {
    background: url(../image/work02_bk_pc.png);
    padding: 5rem;
    color: #454545;
    font-weight: 700;
    line-height: 180%;
    font-size: 31.9336px;
    letter-spacing: 4.11288px;
    margin-top: 5rem;
}

#work02 p {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: -1px -1px 4px #FFF, -1px 0 4px #FFF, -1px 1px 4px #FFF,
                  0 -1px 4px #FFF,                    0 1px 4px #FFF,
                1px -1px 4px #FFF,  1px 0 4px #FFF,  1px 1px 4px #FFF;
    font-family: 'Tsukushi A Round Gothic',sans-serif;
    font-style: normal;
}

/* about */

#about {
    padding-top: 5rem;
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

#about04 img {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5rem;
}

#about02 {
    background: url(../image/about02_bk_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 5rem;
    padding: 5rem;
}


#about03 img {
    width: 50%;
    padding-top: 5rem;

}

/* charm */

#charm {
    width: 80%;
    text-align: center;
    margin: 0 auto;
    padding-top: 5rem;
}

#situation {
    background: #ABBDFF;
    margin-top: 5rem;   
}

#situation img {
    width: 80%;
    padding: 5rem;
}

/* feature */

#feature img {
    margin-top: 5rem;

}

/* voice */

#voice {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

#voice01 {
    padding-bottom: 2rem;
    width: 80%;
    margin: 0 auto;

}

/* step */

#step {
    margin-top: 5rem;
    background: url(../image/step_bk.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem;
}
#step img {
    width: 80%;
    margin: 0 auto;
    text-align: center;
    
}

/* experience */

#experience {
    margin-top: 5rem;
    background: #ABBDFF;
    padding: 5rem;
}

#experience img {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

/* faq */

#faq {
    margin-top: 5rem;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

/* from */

#from {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 5rem;
    margin-top: 5rem;
}

/* 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,
   #about 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%;
    }

    #faq img {
        margin-top: 5rem;
        width:100%;
        margin: 0 auto;
        text-align: center;
    }
    #work {
        padding-top: 2rem;
        width: 95%;
        text-align: center;
        margin: 0 auto;
    }
    #work02 {
        background: url(../image/work02_bk_pc.png);
        padding: 2rem;
        color: #454545;
        font-family: 'Tsukushi A Round Gothic',sans-serif;
        font-weight: 700;
        line-height: 180%;
        font-size: 20.9336px;
        letter-spacing: -1.88712px;
        margin-top: 5rem;
    }
    #about {
        padding-top: 1rem;
        width: 80%;
        text-align: center;
        margin: 0 auto;
    }
    #about02 {
        background: url(../image/about02_bk_pc.png);
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 2rem;
        padding: 2rem;
    }
    #about03 img {
        width: 100%;
        padding-top: 2rem;
        margin: 0 auto;
    }
    #charm {
        width: 80%;
        text-align: center;
        margin: 0 auto;
        padding-top: 2rem;
    }
    #situation img {
        width: 80%;
        padding: 2rem;
    }
    #step img {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    #step {
        margin-top: 2rem;
        background: url(../image/step_bk.png);
        background-repeat: no-repeat;
        background-size: cover;
        padding: 2rem;
    }
    #experience {
        margin-top: 2rem;
        background: #ABBDFF;
        padding: 1rem;
    }
    #from {
        width: 50%;
        margin: 0 auto;
        margin-bottom: 2rem;
        margin-top: 3rem;
    }

    .btnarea_text {
        background: #EE6284;
        color: #FFF;
        width: 90%;
        text-align: center;
        margin: 0 auto;
        font-family: 'Tsukushi A Round Gothic';
        margin-bottom: 1rem;
    }
    .btn_form {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .btn_line {
        width: 38%;
        background: #4ECB71;
        border-radius: 22.8461px;
        margin-left: 1rem;
    }
    .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;
    }
    
}