@charset "utf-8";

.f_inquiry_area{background: #2aa545 url(../../img/elements/line_01.png); }
.f_copy{background: #208935;}
.page_title{height: 290px; background: linear-gradient(to right, #d4efe6 0%,#d5f7f8 100%);}
#details_title{}
#details_title .mini_title{display: inline; background: #fff; color: #1d9547; font-size: 14px; font-weight: 500; padding: 4px 12px; border-radius: 13px;}
#details_title h1{margin: 10px 0 20px;}
#details_title p{font-weight: 500;}

.details_inquiry.f_inquiry_area{background: #2aa545 url(../../img/elements/line_01.png); padding: 30px 0 35px;}
.details_inquiry h2 span{color: #fff; font-size: 25px; position: relative; padding: 0 15px;}
.details_inquiry h2 span::before,
.details_inquiry h2 span::after{content: ""; display: block; width: 2px; height: 25px; background: #fff; position: absolute; bottom: 0;}
.details_inquiry h2 span::before{transform: rotate(-30deg); left: 0;}
.details_inquiry h2 span::after{transform: rotate(30deg); right: 0;}
.details_inquiry .f_inquiry_text{font-size: 16px; font-weight: 700;}

@media screen and (max-width: 640px){
    .page_title{height: 180px;}
    #details_title h1{margin: 10px 0;}
    #details_title p{font-size: 12px;}

    .details_inquiry h2 span{font-size: 20px;}
    .details_inquiry .f_inquiry_text{font-size: 14px;}
}

/* pickup_area ==========*/
#pickup_area{padding: 70px 0 100px;}

.pickup_wrap{position: relative; padding: 40px 0;}
.pickup_wrap::before{content: ""; background: #def6ea;
    position: absolute; top: 0; width: calc(100% + 50px); height: 100%;}
.pickup_wrap:nth-child(odd)::before{left: 0;}
.pickup_wrap:nth-child(odd)::before{border-top-right-radius: 30px; border-bottom-right-radius: 30px; transform: translateX(-50vw) translateX(595px);}
.pickup_wrap:nth-child(even)::before{right: 0;}
.pickup_wrap:nth-child(even)::before{border-top-left-radius: 30px; border-bottom-left-radius: 30px; transform: translateX(50vw) translateX(-595px);}
.pickup_wrap + .pickup_wrap{margin-top: 40px;}
.pickup_box{justify-content: space-between; align-items: center; position: relative; z-index: 2;}
.pickup_wrap:nth-child(even) .pickup_box{flex-direction: row-reverse;}
.pickup_text{width: 46%;}
.pickup_img{width: 48%;}
.pickup_text h4{font-size: 25px; margin-bottom: 10px;}
.pickup_text h4 span{display: block; color: #1d9547; font-family: 'Anton', sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 1px;}
.pickup_text h4 span b{font-size: 24px; font-weight: 400; margin-left: 3px;}
.pickup_text p{line-height: 2;}
.pickup_img .shadow{overflow: hidden; border-radius: 10px; box-shadow: 10px 10px 0 #e1e5e3;}


@media screen and (max-width: 1230px){
    .pickup_wrap::before{width: 90%;}
    .pickup_wrap:nth-child(odd)::before{transform: translateX(-15px);}
    .pickup_wrap:nth-child(even)::before{transform: translateX(15px);}
}
@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
    #pickup_area{padding: 40px 0 50px;}
    .pickup_text{width: 100%; margin-bottom: 20px;}
    .pickup_img{width: 100%;}
    .pickup_text h4{font-size: 20px;}
    .pickup_img .shadow{box-shadow: 5px 5px 0 #e1e5e3;}
}

/* 動作 */
.pickup_wrap::before{width: 0; transition: 0.3s ease 0.5s;}
.pickup_box{opacity: 0; transform: translateY(40px); transition: 0.3s ease 0.8s;}
.pickup_wrap.show::before{width: 100%;}
.pickup_wrap.show .pickup_box{opacity: 1; transform: translateY(0);}


/* case_area ==========*/
#case_area{background: #f9f9f9; padding: 80px 0 70px;}
.case_wrap{max-width: 1000px; width: 100%; margin: 0 auto; padding-top: 15px;}
.case_box{background: #fff; border-radius: 10px; padding: 30px;}
.case_box + .case_box{margin-top: 20px;}
.case_box h4{font-size: 18px; position: relative; margin-bottom: 15px; padding-left: 30px;}
.case_box h4::before{content: ""; display: block; width: 22px; height: 22px; border-radius: 50%; background: #1d9547; position: absolute; top: 2px; left: 0;}
.case_box h4::after{content: ""; display: block; width: 6px; height: 10px;
    border-bottom: 3px solid #fff; border-right: 3px solid #fff;
    position: absolute; top: 5px; left: 7px; transform: rotate(45deg);}
.case_box p{line-height: 2;}


@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
    #case_area{padding: 40px 0 30px;}
    .case_box{padding: 15px;}
    .case_box h4{font-size: 16px;}
    .case_box h4::before{width: 19px; height: 19px; top: 4px;}
    .case_box h4::after{width: 4px; height: 8px; top: 7px;}
}


/* faq ==========*/
#faq{background: #d4efe7 url(../../img/page/details/faq_bk.png) no-repeat right top; background-size: 100%; padding: 80px 0 100px;}

.faq_list{max-width: 1000px; width: 100%; margin: 0 auto; padding-top: 15px;}
.faq_box{border-radius: 10px; overflow: hidden;}
.faq_box + .faq_box{margin-top: 30px;}
.box_Q{background: #1d9547; padding: 20px 20px 20px 70px; position: relative;}
.box_Q h4{color: #fff; font-size: 20px; padding-right: 15px;}
.box_Q.accordion_btn:hover{opacity: 0.7; cursor: pointer;}
.box_A{background: #fff; padding: 27px 20px 27px 70px; position: relative;}
.box_A p{font-weight: 500; line-height: 2;}
.box_A p a{text-decoration: underline; color: #337ebb;}
.box_A.accordion_wrap{display: none;}

.box_Q::before{content: "Q"; font-family: 'Anton', sans-serif; font-size: 25px; line-height: 1;
    background: #fff; color: #1d9547; text-align: center; padding-top: 6px; box-sizing: border-box;
    width: 35px; height: 35px; border-radius: 50%; display: block;
    position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}
.box_Q::after{content: ""; border-top: 6px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent;
    position: absolute; top: 50%; right: 20px; transition: 0.3s ease;}
.box_Q.open::after{transform: rotate(180deg);}   
.box_A::before{content: "A"; font-family: 'Anton', sans-serif; font-size: 25px; line-height: 1;
    background: #1d9547; color: #fff; text-align: center; padding-top: 6px; box-sizing: border-box;
    width: 35px; height: 35px; border-radius: 50%; display: block;
    position: absolute; top: 50%; left: 20px; transform: translateY(-50%);}

.faq_category_wrap{max-width: 1000px; width: 100%; margin: 0 auto;
    padding: 15px; background: #fff; border-radius: 10px;}
.faq_category{max-width: 930px; margin: 0 auto; justify-content: center;}
.faq_category > div{width: calc(100% / 3); padding: 0 15px; margin: 10px 0; position: relative;}
.faq_category > div::before{content: ""; width: 16px; height: 16px; border-radius: 50%; display: block; border: 1px solid #999; position: absolute; top: 13px; left: 20px;}
.faq_category > div.on::before{background: #1d9547;}
.faq_category > div > span{display: block; color: #1d9547; font-size: 16px; font-weight: 500; padding: 10px 5px 10px 30px; border-bottom: 1px solid #1d9547; position: relative;}
.faq_category > div > span:hover{opacity: 0.7; cursor: pointer;}
.faq_category > div.on > span::before{content: ""; width: 8px; height: 8px; background: #fff; border-radius: 50%; display: block; position: absolute; top: 18px; left: 10px;}


@media screen and (max-width: 960px){}
@media screen and (max-width: 640px){
    #faq{padding: 40px 0 50px;}
    .faq_box + .faq_box{margin-top: 15px;}
    .box_Q{padding: 12px 10px 12px 50px;}
    .box_Q::before{font-size: 20px; width: 28px; height: 28px; padding-top: 4px; left: 10px;}
    .box_Q::after{right: 10px;}
    .box_Q h4{font-size: 14px;}
    .box_A{padding: 15px 10px 15px 50px;}
    .box_A::before{font-size: 20px; width: 28px; height: 28px; padding-top: 4px; left: 10px;}
    
    .faq_category{margin-left: -10px; margin-right: -10px;}
    .faq_category > div{width: calc(100% / 2); padding: 0 5px;}
    .faq_category > div > span{font-size: 13px; padding: 6px 0 6px 20px;}
    .faq_category > div::before{width: 14px; height: 14px; top: 7px; left: 5px;}
    .faq_category > div.on > span::before{top: 12px; left: 5px; width: 6px; height: 6px;}
}