@charset 'utf-8';

/* ==========================================================================

	よくあるご質問

   ========================================================================== */


/*--------------------------------
	基本レイアウト
--------------------------------*/

.container p {
    line-height: 1.6;
}

.faq_box {
    width: 100%;
    max-width: calc(900px + 6%);
    margin: 8em auto 0;
}

.toggle {
    margin: 50px 0 0;
    padding: 10px 55px 10px 10px;
    background-color: transparent;
}

.toggle span {
    display: inline-block;
    position: relative;
    line-height: 1.4;
    font-weight: 700;
    transition: all .6s cubic-bezier(0.87, 0, 0.13, 1);
    -webkit-transition-delay: 0;
    transition-delay: 0;
    font-size: 2rem;
}

.toggle span::before {
  content: "Q. ";
}

.toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    display: block;
    width: 100%;
    height: 4px;
    background: #74AE74;
}

.toggle + div {
    padding: 30px;
    background-color: transparent;
    line-height: 1.8;
}

.toggle + div::before {
  content: "A. ";
}

@media only screen and (min-width: 813px) {
    .toggle:hover {
        color: #74AE74;
        background-color: transparent;
    }

    .toggle:hover svg {
        fill:#74AE74;
    }
}


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

    .faq_box {
        margin: 4em auto 0;
    }

    .toggle {
        margin: 30px 0 0;
        padding: 10px 40px 10px 0;
    }

    .toggle span {
        font-size: 1.6rem;
    }

    .toggle span:after {
        bottom: -6px;
        height: 2px;
    }

    .toggle + div {
        padding: 10px 3%;
    }

    .toggle svg {
        right: 5px;
    }

}


/*--------------------------------
    XXXX
--------------------------------*/

/* XX */




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

    /* XX */



}