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

.main {background: url("/common/images/faq/mainBg.png") center bottom no-repeat; height: 250px;}
.faq .container {max-width: 95%;}
.faqNav {border-bottom: 1px solid #ffe3d7; margin-top: 5%;}
.faqNav ul {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content:  flex-start; justify-content: flex-start;}
.faqNav li {background: #ffe3d7; color: #fff;padding: 1em 2em; line-height: 1; margin-right: 1px; letter-spacing: 0.02em; font-weight: 400; border-radius: 15px 15px 0 0; cursor: pointer;}
.faqNav li:not(.bg_red):hover {background: #ff9365;}
.faq dl {margin: 1px 0;}
.faq dt {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content:space-between; font-size: 18px;background: #f9f8f5; padding: 1em; cursor: pointer;}
.faq dt p,.faq dd p {width: 100%;}
.faq dt:before {content: "Q"; background: #d82432; border-radius: 5px; color: #fff; width: 28px; height: 28px; display: inline-block; text-align: center; margin-right: .7em;}
.faq dt:after {content: "▼"; color: #d82432; transition: all .4s;}
.faq dt.on:after {transform: rotate(180deg); color: #0e3a58;}
div.aboutApply,div.aboutWork,div.afterApply,.faq dd {display: none;}
div.on {display: block;}
.faq dd {display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: flex-start; justify-content: flex-start; margin: 0; padding: 1em 2em 1em 1.15em; box-sizing: border-box;}
.faq dd:before {content: "A"; background:#6c9f2f; border-radius: 5px; color: #fff; width: 28px; height: 28px; display: inline-block; text-align: center; margin-right: .7em;}

.contact {width: 70%; margin: 7% auto; text-align: center;}
.contact .call {margin: 7% auto;}
.contact .call a {font-size: 44px; background: url("/common/images/call.png") left center no-repeat; padding-left: 1.1em; display: inline-block; line-height: 1.2; text-align: left; margin-top: 1%; transition: all .2s;}
.contact .call a:hover {color:#6c9f2f;}
.contact .call a span {display: block; font-size: 18px;}
.contact .banner {margin: 0 auto 2%;}
.contact .banner a {width: 60%; margin: 0 auto; transition: all .2s;}
.contact .banner a:hover {background-color: #d82432 !important;}
.contact .banner p {text-align: center;}

@media screen and (max-width: 896px) {
    .contact {width: 100%;}
    .main .right {position: absolute; right: 0; bottom: 0;}
}
@media screen and (max-width: 600px) {.main .right {right: -8%;}.contact .banner a{width: 80%;}}
@media screen and (max-width: 480px) {
    .main .right {right: -15%; height: 90%;}
    .faqNav,.notice br {display: none;}
    .faq dt,.contact .banner p {font-size: 1em;}
    .faq dd{padding: 1em;}
    .faq dt:before,.faq dd:before {font-size: .9em; line-height: 1.5; width: 1.6em; height: 1.5em;}
    .faqNav ul {flex-wrap: wrap;}
    .faqNav li {width: 100%; box-sizing: border-box; text-align: center; padding: 1em 0; border-radius: 5px; margin: 1px;}
    div.aboutApply,div.aboutWork,div.afterApply,.msp {display: block;}
    .msp {padding: 1em 1.2em; line-height: 1; margin-top: 8%; border-radius: 5px;}
    .msp p:before {content: "・"}
    .contact .banner a {width: 100%;}
    .notice {text-align: left; font-weight: 400}
    .contact .call {margin: 13% auto;}
    .contact .call a {font-size: 10vw; box-sizing: border-box; text-align: center; padding-left: 13vw; line-height: 1.1}
    .contact .call a span {font-size: 4vw;}
}