@charset "UTF-8";

/* 他のページと違ってpaddingしているのでcommonなし */
.h1message {
    font-size: 4rem;
    width: 200px;
    display: block;
    padding: 120px 0 0 4%;
    margin: 0;
}




.toCustomers {
    background: linear-gradient(#fff, #DFD2C9);
    border-radius: 0 0 70px 0;
}

.h2topic_read {
    padding-top: 50px;
}


.h3topic {
    text-align: center;
}

.MainMessage {
    padding-left: 4%;
}



.h2topic__message {
    padding: 80px 0 0 2%;
}


.salonOwner {
    text-align: center;
    font-size: 1.4rem;
}

.messageImg {
    display: none;
}

.messageImgSp {
    text-align: center;
}

.message_img {
    width: 163px;
}

.message {
    margin: 70px 0 70px 2%;
}


.messageH3 {
    margin: 0 auto;
    border-bottom: solid 1px;
    width: 200px;
    margin: 30px auto;
    text-align: center;
    font-size: 1.6rem;
}

.messageTxt {
    padding: 0 4% 15px;
    text-align: justify;
}

.messageTxt2 {
    padding: 0 4% 55px;
    text-align: justify;
}

.featuresImg {
    width: 345px;
    height: 208px;
    border-radius: 10px;
}

.features__img {
    text-align: center;
}

.featuresH4 {
    text-align: center;
    margin: 5px 0 10px;
    font-size: 1.8rem;
}

.featuresTxt {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 45px;
    padding: 0 14%;
}

.featuresTitleImg {
    margin: 80px auto 80px;
    width: 240px;
}

.featuresTitle {
    text-align: center;
    margin: 40px auto 0;
}


.goodsLineImg {
    width: 1000px;
} 

.goodsLine {
    text-align: center;
    margin: 140px 0 45px;
}

.goodsLine:last-of-type {
    margin: 45px 0 140px;
}


/* Q&A */
.h3Img {
    width: 297px;
    margin: 40px auto 80px;
}

.qa {
    text-align: center;
}

/* アコーディオン */
/* 必須 */
.accordion-content {
    display: none;
}

  /* 箱 */
.accordion-header {
    background-color: #DFD2C9;
    width: 300px;
    border-radius: 15px;
    padding: 12px 45px 10px 20px;
    margin: 10px auto 55px;
    transition: background .3s ease;
    cursor: pointer;
    position: relative;
}

.accordion-header::before,
.accordion-header::after{
    position:absolute;
    content:'';
    top:1px;
    right:20px;
    bottom:0;
    /* width:18px; */
    height: 6px;
    margin:auto;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    border-right: 0 solid transparent;
    border-left: 15px solid transparent;
    background:  #072500;
}

.accordion-header::after{
    /* transform:rotate(-90deg); */
    transition:transform 0.3s; 
}

.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
    background-color: #FFF;
    padding: 12px 20px 10px;
    width: 295px;
    margin: 0 auto;
    text-align: justify;
}

  .accordion-header span,
  .accordion-content span{
    padding-left: 25px;
    position: relative;
  }


    .answer::before{
    content:"A";
    margin-right: 20px;
    display: inline-block;
    color: #151E2F;
    font-size: 17px;
}

  /* hover */
.accordion-header:hover {
    background-color: #F2F2F2;
}

.answer {
    margin: 0 auto;
    display: flex;
    text-align: justify;

}

.br_answer {
    display: block;
}

h3 {
    font-size: 3rem;
    color: #072500;
    text-align: center;
    margin: 40px auto;
}

@media screen and (min-width: 769px) {
    h3 {
        font-size: 5rem;
        color: #072500;
        text-align: center;
        margin: 80px auto;
    }

    .toCustomers {
        background: linear-gradient(#fff, #DFD2C9);
        border-radius: 0 0 590px 0;
        padding-bottom: 80px;
    }

    .h1message {
        font-size: 9rem;
        padding-left: 0;
        padding: 80px 0 0 4%;
        text-align: left;
    }
    

    /* message */
    .MainMessage {
        font-size: 3rem;
        margin: 0 auto 25px;
        padding-left: 15%;
    }

    /* きっかけ */
    .message_img {
        width: 352px;
    }

    .messageImgSp {
        display: none;
    }

    .messageImg {
        display: block;
    }

    .message {
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
        padding: 50px 0 50px;
    }

    .messageH3 {
        font-size: 3.2rem;
        border-bottom: solid 1px;
        width: 352px;
        margin-bottom: 30px;
        text-align: center;
    }

    .messageTxt {
        width: 610px;
        line-height: 2em;
    }


    .featuresImg {
        width: 314px;
    }

    .messageTxt2 {
        width: 610px;
        text-align: justify;
    }

    .h3Img {
        width: 400px;
        margin: 40px auto 80px;
    }
    
    .qa {
        text-align: center;
    }

    .br_answer {
        display: block;
    }
}


    /* 特徴PCサイズ3カラム */
    @media screen and (min-width: 1025px) {
    .features1 {
        display: flex;
        margin: 0 auto;
    }

    .features2 {
        display: flex;
        margin: 0 auto;
    }
}