@charset 'utf-8';
/*
 * name:qa.css
 * author:sovanda nulo
*/

/* qa
------------------------------------------------ */

.qa-head { display: block; padding: 30px 25px 55px; position: relative; z-index: 2; }
.qa-head:before { content: ''; position: absolute; right: 0; bottom: -48px; width: 211px; height: 136px; background: url(../../img/top/qa-sofar.png) no-repeat; background-size: 100% 100%; z-index: -1; }
.qa-head--title { font-size: 20px; font-size: 2rem; line-height: 1.2; font-weight: 600; }
.qa-head--title span { font-size: 14px; font-size: 1.4rem; display: block; color: #31BF67; margin-bottom: .25em; }
.qa-head--desc { font-size: 12px; font-size: 1.2rem; max-width: 270px; margin-top: 10px; }
.qa--block { display: block; position: relative; width: calc( 100% - 20px ); padding: 43px 20px 20px; margin: 0 10px; border-radius: 5px; box-shadow: 0 5px 6px rgba(0, 0, 0, .3); background: #fff; box-sizing: border-box; }
.qa-tlt { font-size: 20px; font-size: 2rem; line-height: 1.2; font-weight: 600; margin-bottom: .75em; }
.qa__lists { display: block; position: relative; }
.qa__list { display: block; position: relative; overflow: hidden; border: 1px solid #C4C4C4; border-radius: 5px; margin-bottom: -1px; }
.qa__list dt { font-size: 12px; font-size: 1.2rem; line-height: 1.5; padding: 5px 20px 5px 45px; min-height: 42px; background: url(../../img/top/qa-arrow.svg) no-repeat right 3px center; background-size: 15px; cursor: pointer; display: flex; align-items: center; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
.qa__list dt:before { content: 'Q'; font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1; display: block; position: absolute; left: 9px; top: 9px; width: 25px; height: 25px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; color: #31BF67; border-radius: 50%; background: #E1FFEC; }
.qa__list dd { font-size: 10px; font-size: 1rem; line-height: 1.5; padding: 12px 15px 10px 45px; position: relative; color: #5B5B5B; background: #F1FFF6; display: none; }
.qa__list dd:before { content: 'A'; font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1; display: block; position: absolute; left: 9px; top: 9px; width: 25px; height: 25px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #31BF67; color: #E1FFEC; border-radius: 50%; }
.qa__list dd a { color: #009426; }

    .qa__list.on dt { background: url(../../img/top/qa-arrowG.svg) no-repeat right 3px center; background-size: 15px; }

.qa-more { margin-top: 35px; padding: 17px 5px 10px; display: block; position: relative; background: #DDFFFB; border-radius: 5px; }
.qa-more:before { content: ''; position: absolute; left: 13px; top: 8px; width: 33px; height: 33px; background: url(../../img/top/qa-headphone.png) no-repeat; background-size: 100% 100%; }
.qa-more--tlt { font-size: 12px; font-size: 1.2rem; text-align: center; padding-left: 50px; }
.qa-more--btn { display: block; max-width: 150px; margin: 10px auto 0; text-align: center; }
.qa-more--btn a { font-size: 10px; display: block; color: #00B8CD; padding: 5px 0; background: #fff; border-radius: 10em; border: 1px solid #00B8CD; }
.qa-more--btn a:hover { background: #00B8CD; color: #fff; }