@charset "utf-8";

@media screen and (max-width:768px){
/*root*/
:root{
    /*font-size*/
    /*base:390px*/
    --fontsize-8:8px;
    --fontsize-10:10px;
    --fontsize-11:11px;
    --fontsize-12:12px;
    --fontsize-13:13px;
    --fontsize-14:14px;
    --fontsize-16:16px;
    --fontsize-18:16px;
    --fontsize-20:18px;
    --fontsize-24:18px;
    --fontsize-30:24px;
    --fontsize-32:24px;
    --fontsize-36:30px;
    --fontsize-40:40px;
    --fontsize-45:40px;
    --fontsize-48:40px;
    --fontsize-56:40px;
    --fontsize-62:56px;
    --fontsize-64:56px;
    --fontsize-80:64px;
    --fontsize-96:64px;
}

body{
font-size:16px;
}

.sp{
    display: block !important;
}

.pc{
    display:none !important;
}

h2{
    text-align:center;
    font-size:18px;
    font-weight:500;
    padding:24px 0;
}

.section__wrap{
    margin:0 24px;
}

/*header*/

.h-wrap{
    align-items: center;
}

.h-logo img{
    width:60px;
}

.header-inquiry a {
    padding:14px 12px;
    /* padding: 12px;
    justify-content: center; */
}

/*mv*/
.mv-wrap{
    margin:0 24px;
}

.mv-back{
    background: none;
}

.mv-text--area{
    display: block;
}

.mv-title--area{
    display: block;
}

h1{
    margin-bottom:24px;
}

.main-title{
    text-align:center;
}

.mv-inquiry--bubble{
    padding:0 6px 0 16px;
    margin-bottom:16px;
}

.mv-inquiry--bubble::before, 
.mv-inquiry--bubble::after{
    height:16px;
}
    
.mv-inquiry--list{
    flex-direction: column;
}

.mv-inquiry--item{
    width:100%;
}

/*trouble*/

.trouble-outer{
    padding-top:32px;
}

.trouble-outer--list{
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap:40px;
}

.trouble-outer--item{
    width:100%;
}

.trouble-num{
    width:56px;
    height:56px;
    top:-28px;
}

.trouble-blue{
    padding:16px;
}

.trouble-ttl{
    padding-top:32px;
}

.solution-img{
    display: none;
}

.solution-area .balloon{
    margin-bottom:24px;
}

.solution-txt{
    width:100%;
}

.solution-txt .deco::before{
    width:6px;
    height:6px;
}

.solution-txt b,
.solution-txt .backdeco{
    font-size:20px;
}

/*message*/

.message-outer{
    flex-direction: column;
}

.back-img img{
    display: none;
}

.message-area{
    padding-bottom:80px;
}

.merit{
    top:-64px;
}

.merit p{
    padding:16px;
}

.merit-img{
    padding-top:135px
}

/*feature*/

#feature h2{
    position:relative;
}

.feature-inner{
    flex-direction: column;
}

.feature1 .feature-left, .feature2 .feature-left{
    margin-right:0;
}

.feature-img--area img{
    width:80%;
    margin:0 auto;
}

.feature3 .feature-img--area img{
    width:80%;
}

.feature2 .feature-inner{
    flex-direction: column-reverse;
}

.feature-deco img{
    display: none;
}

.feature-item{
    padding:16px;
}

.feature-ttl--area{
    flex-direction: column;
    margin-bottom:16px;
}

.feature-ttl{
    text-align: center;
}

.feature-ttl--sub{
    font-size:14px;
}

.feature-exp{
    font-size:14px;
}

.appeal-point--ttl::before{
    top: 16px;
    left: -10px;
}

.appeal-point--ttl::before, .appeal-point--ttl::after{
    width:36px;
}

.appeal-point--ttl p::before{
    left: 16px;
    top: 0px;
}

.appeal-point--ttl p::after {
    right: 16px;
    bottom: 4px;
}

.appeal-point--ttl::after {
    bottom: 19px;
    right: -10px;
}

.appeal-point--txt{
    padding: 16px;
}

/*appeal-message*/
.appeal-message--list{
    flex-direction: column;
}

.appeal-message--item{
    width:100%;
}

.appeal-message--left{
    padding-top:32px;
}

.appeal-message--right{
    padding-bottom:32px;
}

.price-exp p{
    padding:0 6px 0 16px;
    margin-bottom:16px;
}

.price-exp p::before,
.price-exp p::after{
    height:16px;
}

.price-list{
    flex-direction: column;
    gap:24px;
}

.price-item{
    width:100%;
    padding-top:48px;
}

/*service-detail*/

.service-detail--list{
    flex-direction: column;
    align-items: center;
}

.service-detail--item a{
    width:150px;
    height:150px;
}

.service-detail--deco{
    width:150px;
    height:150px;
}

/*inuquiry*/

.inquiry-btn--outer{
    flex-direction: column;
}

.inquiry-txt{
    margin-bottom:16px;
}

.inquiry-bubble{
    padding:0 6px 0 16px;
    margin-bottom:16px;
}

.inquiry-bubble::before, 
.inquiry-bubble::after{
    height:16px;
}

/*company*/

.company__outline{
    padding:40px 24px;
}

.company__outline--logo{
    text-align: center;
    margin-right:0;
}

.company__outline--logo img{
    width:40%;
}

.company__outline--address{
    width:60%;
}

.address{
    font-size:8px;
}

.company__link a{
    font-size:8px;
}

/*bnr*/

.bnr-txt{
    font-size:12px;
}

.bnr-btn--item a{
    font-size:13px;
}





































}