@charset "utf-8";


/*------------------------------------
共通
------------------------------------*/
img { image-rendering: -webkit-optimize-contrast; }

/*------------------------------------
上部コンテンツ
------------------------------------*/
#faq_menu {
    width: 100%;
    max-width: 740px;
    margin: 0 auto;
    padding: 50px 0 100px;
}
#faq_menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#faq_menu li {
    width: 220px;
}
#faq_menu li a {
    display: block;
    color: #fff;
    background-color: #8a9f63;
    border-radius: 3px;
    text-align: center;
    padding: 0.8em;
    letter-spacing: 0.02em;
    position: relative;
    box-shadow: 2px 2px 0 1px #e6e6e6;
}
#faq_menu li a:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px #e6e6e6;
    background-color: #007E69;
}
#faq_menu li a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9px;
    margin: auto;
    content: "";
    background: url("../img/arrow_wh.png") no-repeat center center;
    background-size: contain;
    width: 10px;
    height: 12px;
    transition: 0.3s;
}
#faq_menu li a:hover::after {
    bottom: -5px;
    transition: 0.3s;
}

@media screen and (max-width: 728px) {
    #faq_menu {
        margin: 0 auto;
        padding: 3vw 20px 5vw;
    }
    #faq_menu ul {
        display: block;
    }
    #faq_menu li {
        width: 100%;
        margin-bottom: 13px;
    }
    #faq_menu li a {
        font-size: 1.4rem;
        padding: 0.3em;
    }
}


/*------------------------------------
アコーディオン
------------------------------------*/
#faq_cont {
    padding:  0 20px 70px;
}
#faq_cont .main_ttl_lv3 {
    font-size: 2.8rem;
}
.faq_area {
    width: 740px;
    max-width: 100%;
    margin: 0 auto 100px;
}
.faq_item {
    margin-bottom: 20px;
}

.hover_cont {
    position: relative;
    padding: 18px 60px 18px 63px;
    border: 1px solid #da4f48;
    cursor: pointer; 
    border-radius: 3px;
    box-shadow: 2px 2px 0 1px #e6e6e6;
}
.hover_cont:hover {
    transition: 0.5s;
    box-shadow: 0 0 0 1px #e6e6e6;
}
.hover_cont::before {
    position: absolute;
    left: 11px;
    top: 13px;
    content: "";
    background: url("../img/ico_q.png") no-repeat center center;
    background-size: contain;
    width: 42px;
    height: 42px;
}
.hover_cont::after {
    position: absolute;
    right: 24px;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    background: url("../img/arrow.png") no-repeat center center;
    background-size: contain;
    width: 25px;
    height: 25px;
    transition: 0.5s;
}
.hover_cont.select::after {
    transform: rotate(180deg);
}
.hover_cont p {
    color: #da4f48;
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.slide_cont {
    margin: 0;
    padding: 25px 0 20px 63px;
    display: none;
}
.slide_cont p {
    line-height: 2.25em;
    letter-spacing: 0.09em;
    position: relative;
}
.slide_cont p::before {
    position: absolute;
    left: -51px;
    top: -3px;
    content: "";
    background: url("../img/ico_a.png") no-repeat center center;
    background-size: contain;
    width: 42px;
    height: 42px;
}
.slide_link {
    margin: 30px auto;
    text-align: center;
    padding-right: 63px;
    letter-spacing: 0.05em;
}

.slide_cont table {
    margin: 0.8em 0 30px;
}
.slide_cont th, .slide_cont td {
    padding: 0.3em 1.2em;
}

@media screen and (max-width: 728px) {
    #faq_cont {
        padding:  0 20px 50px;
    }
    #faq_cont .main_ttl_lv3 {
        font-size: 1.8rem;
    }
    .faq_area {
        margin: 0 auto 15vw;
    }
    .faq_item {
        margin-bottom: 15px;
    }
    .hover_cont {
        padding: 0.5em 2.5em 0.6em 2.5em;
    }
    .hover_cont::before {
        left: 0.5em;
        top: 0.4em;
        width: 1.6em;
        height: 1.6em;
    }
    .hover_cont::after {
        right: 24px;
        width: 1em;
        height: 1em;
    }
    .hover_cont::after {
        right: 0.5em;
        width: 1em;
        height: 1em;
    }
    .hover_cont p {
        font-size: 1.6rem;
        letter-spacing: 0.05em;
    }
    
    .slide_cont {
        padding: 1em 0 0.4em 2.6em;
    }
    .slide_cont p {
        font-size: 1.6rem;
        line-height: 1.7em;
        letter-spacing: 0.05em;
    }
    .slide_cont p::before {
        left: -2em;
        top: 0;
        width: 1.6em;
        height: 1.6em;
    }
    
    .slide_link {
        margin: 1.5em auto;
        text-align: center;
        padding-right: 2.6em;
    }
    .slide_cont table {
        margin: 0.8em 0 1.5em;
    }
    .slide_cont th, .slide_cont td {
        padding: 0.3em 1em;
        line-height: 1.4em;
    }
}