@charset "utf-8";
/* CSS Document */

:root {
    --main_color: #9b6e56;
}

#title_sec > figure {width: 20%;margin: 30px auto;}
#title_sec .titleBox {width: 77%;}
#title_sec h2 {font-size: clamp(16px, 1.8vw, 20px); margin-bottom: 10px;}
#title_sec .titleLead {font-weight: bold;}
#titleWrap {position: relative; margin-bottom: 120px;}
.contents_ttl{text-align: center;margin: 30px auto 0;}
.contents_ttl > figure{max-width: 200px;/* text-align: center; */margin: 15px auto;}

@media screen and (max-width: 960px){
}

@media screen and (max-width: 640px){
     #titleWrap {margin-bottom: 60px;}
     #title_sec .titleBox {width: 100%;}
    #title_sec .titleLead {margin-bottom: 50px;}
}



/*--------------------------------------------------
vol102_mainContents
---------------------------------------------------*/
#vol102_mainContents {}
.qa_item + .qa_item {margin-top: 60px;}
.qa_item_Q {margin-bottom: clamp(10px, 3vw, 30px);}
.qa_item_Q_text {
    display: grid;
    grid-template-columns: 12% 85%;
    column-gap: 3%;
    align-items: center;
}
.qa_item_Q_text h3 {
    font-size: clamp(18px, 3vw, 30px);
    color: var(--main_color);
}

.qa_item_A {}
.qa_item_A.frame {
    display: grid;
    grid-template-columns: 37% 60%;
    column-gap: 3%;
}
.qa_item_A_photo img {width: 100%;}
.qa_item_A_title {
    width: 100%;
    display: grid;
    grid-template-columns: 14% 83%;
    column-gap: 3%;
    row-gap: 30px;
    align-items: center;
}
.qa_item_A_title h3 {
   font-size: clamp(18px, 3vw, 26px);
    color: #c86a8e; 
}
.qa_item_A_text {margin-top: 20px;}
.qa_item_A_text p {font-size: clamp(14px, 1.4vw, 16px);}

.qa_item_A_pickup_text {
    display: grid;
    grid-template-columns: 15% 82%;
    column-gap: 3%;
    align-items: center;
    margin-top: 30px;

    background: #eef3f2;
    padding: clamp(10px, 2vw, 20px);
}
.qa_item_A_pickup_text p {
    color: #328978;
    font-weight: bold;
}



@media screen and (max-width: 960px){
}
@media screen and (max-width: 640px){
    .qa_item_Q_text {
        grid-template-columns: 14% 83%;
    }
    .qa_item_A.frame {
        grid-template-columns: 100%;
        row-gap: 20px;
    }
}


/*--------------------------------------------------
checklist_wrap
---------------------------------------------------*/
#checklist {margin-top: 60px;}
.checklist_wrap h3 {font-size: 25px; text-align: center; position: relative;/*color: #fff; font-size: 20px; text-align: center; background-color: #000; padding: 0 20px; margin-left: 20px;
    border-radius: 5px 5px 0 0; width: 20%;*/}
.checklist_wrap h3 span {display: inline-block; position: relative;}
.checklist_wrap h3 span:before {
    content: '';
    background: url("../../img/pages/maintenance/vol102/checkicon.png")no-repeat center center;
    background-size: cover;
    position: absolute;bottom: 0;left: -50px;width: 60px;height: 60px;

    filter: brightness(0) saturate(100%) invert(46%) sepia(51%) saturate(333%) hue-rotate(337deg) brightness(89%) contrast(89%);
}
.checklist_wrap .checklist_box {position: relative; background-color: #f1e5dd; padding: 30px;}
/*.checklist_wrap .checklist_box .checklist_image01 {position: absolute; top: -45px; left: 45%;}
.checklist_wrap .checklist_box .checklist_image02 {position: absolute; top: 7px; right: 7px;}*/

.checklist_wrap .checklist_box .maintenance_item01 {border-bottom: 1px solid #666; padding-bottom: 15px; margin-bottom: 15px;}
.checklist_wrap .checklist_box .maintenance_item01 h4{background: var(--main_color); color: #fff; font-size: 16px; display: inline-block; padding: 0 8px; margin-bottom: 5px;}
.checklist_wrap .checklist_box .maintenance_item01 p {font-size: font-size: clamp(14px, 1.6vw, 18px);; font-weight: bold; padding-left: 25px; line-height: 1.7; position: relative;}
.checklist_wrap .checklist_box .maintenance_item01 p::before{content:"■"; font-size: clamp(16px, 1.6vw, 18px); color: #fff; position: absolute; left: 0;}

.checklist_wrap .checklist_box .maintenance_txt {font-size: clamp(14px, 1.4vw, 16px); font-weight: bold; margin-top: 30px;}

@media screen and (max-width: 960px){
}
@media screen and (max-width: 640px){
    .checklist_wrap h3 {font-size: 20px;}
    .checklist_wrap .checklist_box {padding: 30px 10px 15px;}
    /*.checklist_wrap .checklist_box .checklist_image01 {top: -30px; width: 25%;}
    .checklist_wrap .checklist_box .checklist_image02 {top: 3px; right: 3px;}*/

    .checklist_wrap h3 span:before {
        width:40px;height: 40px;
    }
}


/*--------------------------------------------------
QA_sec
---------------------------------------------------*/

.QA_sec .contents_ttl > figure{max-width: 250px;margin: 15px auto;}
.QA_sec .contents_ttl h3{background: #6dbe87;color: #ffffff;font-size: 30px;border-radius: 10px;}

.QA_sec .inner{padding: 20px 60px;}
.QA_sec .inner .itemQA{}
.QA_sec .inner .itemQA + .itemQA{margin: 10px auto 0;padding: 20px 0 0;border-top: 1px dashed;}
.QA_sec .inner .itemQA .item_left{font-size: 50px;font-weight: bold;color: #6dbe87;width: 10%;}
.QA_sec .inner .itemQA .item_right{width: 85%;}
.QA_sec .inner .itemQA .item_right p{}
.QA_sec .inner .itemQA .item_right h5{font-size: 20px;font-weight: bold;line-height: 1.5;}


.QA_inner{
    align-items: flex-start;
    margin: 40px auto 0;
}

.boxQA{width: 53%;}
.boxReform{width: 43%;padding: 20px;}

.boxReform{}
.boxReform > h3{
    text-align: center;
    font-size: 17px;
    line-height: 1.4;
    padding: 5px 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.boxReform > h3 + h3{
    background: #ffffff;
    padding: 10px;
    margin: 15px auto;
    border-radius: 8px;
}
.boxReform h4{
    text-align: center;
    font-size: 25px;
    line-height: 1.4;
    margin: 0 0 15px;
}
.boxReform h4 + p{}
.boxReform .reform_detail {}
.boxReform .reform_detail h5{
    text-align: center;
    font-size: 20px;
    line-height: 1.4;
}
.boxReform .reform_detail h5 small{
    font-size: 15px;
}
.boxReform .reform_detail .reformTel{
    text-align: center;
    font-size: 42px;
    font-weight: bold;
}
.boxReform .reform_detail{}
.boxReform .reform_detail{
    padding: 20px 0 0;
}


.new_windowIcon{max-width: 14px;vertical-align: middle;margin-left: 5px;}

.houseCleaning{
    margin: 15px auto 0;
    padding: 15px 0 0;
}
.houseCleaning h4{font-size: 24px;text-align: center;line-height: 1.6;}
.houseCleaning h4 small{font-size: 16px;display: block;color: #6dbe87;}
.houseCleaning p{}


@media screen and (max-width: 960px){

}

@media screen and (max-width: 640px){

.QA_sec .inner{padding: 20px ;}
.boxQA,
.boxReform{width:100%;}	
.boxReform{margin: 40px auto 0;}
	
	.QA_sec .inner .itemQA .item_right h5{font-size: 22px;}	
	.boxReform .reform_detail .reformTel{font-size: 32px;}
}


/*--------------------------------------------------
present_sec
---------------------------------------------------*/

.present_sec .present_wrap {border: 2px solid var(--main_color);}
.present_sec .itemHead {position: absolute; top: 10px; left: 30px;}
.present_sec .itemHead img {width: 60px;}
.present_wrap > h3,
.present_sec .present_wrap .box_right .present_item p strong {color: var(--main_color);}

.present_kigen {color: initial; font-weight: bold;}
.present_kigen span {background-color: var(--main_color);}

@media screen and (max-width: 640px){
    .present_sec {margin-top: 50px;}
    .present_sec .itemHead {top: 40px; left: 26px;}
    .present_wrap > h3 {text-align: right;}
}