@charset "utf-8";
#pageTitle{background-image:url(../img/qa/page_title.jpg)}
#pageTitle h2:after{content:"Q&A"}
#qaList{counter-reset:number1 number2}
#qaList dl dt{font-weight:900;color:#209fd6; background:#e4f4fa; position:relative; cursor:pointer; border:1px solid #209fd6; z-index:1}
#qaList dl dt:hover{ color:#209fd6}
#qaList dl dt:before{counter-increment:number1;content:"Q"counter(number1);color:#fff; background:#209fd6; display:inline-block; position:absolute; border:1px solid #209fd6}
#qaList dl dd{font-weight:500; background:#fff; border-top:none; position:relative; height:0 !important; transition:.3s;  z-index:0; opacity:0}
#qaList dl dd.active{height:100% !important; border:1px solid #209fd6; border-top:none; top:0; opacity:1}
#qaList dl dd:before{counter-increment:number2;content:"A"counter(number2); font-weight:900; color:#209fd6; background:#fff; position:absolute; border:1px solid #209fd6}
#qaList dl dd.active:before{ display:inline-block}
#qaList dl dt span{margin:0; transition: .2s; z-index:2; top:50%; background:rgba(255,255,255,0;)}
#qaList dl dt span:before,#qaList dl dt span:after{content:""; top:0; left:0; transition:.3s; background:#209fd6}
#qaList dl dt span,#qaList dl dt span:before,#qaList dl dt span:after{position:absolute; display:block}
#qaList dl dt span:before{top:0px; transform:rotate(90deg); -webkit-transform:rotate(90deg)}
#qaList dl dt span:after{top:0}
#qaList dl dt.active span:before{transform:rotate(0deg); -webkit-transform:rotate(0deg); top:0px}
#qaList dl dt.active span:after{transform:rotate(-180deg); -webkit-transform:rotate(-180deg); top:0px}
#qaList dl dd a{color:#209fd6}
#qaList dl dd strong{background:#f0f0f0;  display:inline-block}
#qaList dl+p a{text-decoration:underline}
#qaList dl dd p{display:none}
#qaList dl dd.active p{display:block}
@media screen and (min-width:961px){
#qaList{width:1080px;margin:0 auto 60px}
#qaList dl{font-size:1.25rem}
#qaList dl dt{padding:28px 90px 28px 110px;margin:20px auto 0}
#qaList dl dt:before{ border-radius:5px;padding:6px 14px 8px; top:20px; left:20px}
#qaList dl dd.active{padding:30px 50px 30px 105px}
#qaList dl dd{padding:0 50px 0 110px;top:-90px}
#qaList dl dd:before{border-radius:5px; padding:6px 14px 8px; top:30px; left:20px}
#qaList dl dd p{font-size:0.937rem;line-height:1.8em}
#qaList dl dt span{right:30px; margin:-2px 0 0 -16px}
#qaList dl dt:nth-of-type(9) ~ dt{padding:28px 90px 28px 130px}
#qaList dl dd:nth-of-type(9) ~ dd.active{padding:30px 50px 30px 130px}
#qaList dl dt span,#qaList dl dt span:before,#qaList dl dt span:after{width:30px; height:4px}
#qaList dl dd strong{border-radius:5px; padding:8px 15px}
#qaList dl+p{font-size:0.937rem;line-height:1.8em;margin:0 0 1.8em;padding:1.8em 0 0}
#qaList dl+p a:hover{text-decoration:none}
}

/* IE11    */ _:lang(x)::-ms-backdrop, #qaList dl dt:before,#qaList dl dd:before{padding:10px 14px 4px}

/*

    SP 

**********************************************************/

@media screen and (max-width: 960px) {
#qaList h2{margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#qaList dl{margin-bottom:4vw;}
#qaList dl dt,
#qaList dl dd{line-height:5.733vw;}
#qaList dl dt{font-size:1.25em; padding:2.666vw 30px 2.666vw 60px; margin:10px 0 0;}
#qaList dl dt:before{font-size:3.467vw; padding:3px 7px 4px; top:6px; left:6px; border-radius:3px;}
#qaList dl dt span{right:10px; margin:-2px 0 0 -8px}
#qaList dl dt span,#qaList dl dt span:before,#qaList dl dt span:after{width:15px; height:2px;}
#qaList dl dd:before{font-size:3.467vw; padding:3px 7px 4px; top:6px; left:6px; border-radius:3px;}
#qaList dl dd{padding:0 10px 0 50px;top:-30px;font-size:1em;}
#qaList dl dd.active{font-size:3.2vw; padding:2.666vw 10px 2.666vw 60px;}
#qaList dl dd strong{border-radius:3px; padding:4px 8px;}
#qaList dl dd p{line-height:1.6em}
#qaList dl:nth-of-type(9) ~ dt{padding:2.666vw 35px 2.666vw 70px;}
#qaList dl:nth-of-type(9) ~ dd.active{padding:2.666vw 10px 2.666vw 70px;}
#qaList dl + p{padding:10px 0 0;font-size:1em; line-height:2em}
#qaList dl + p a{margin:10px 0;padding:10px 7px 10px;font-size:3.467vw}
#qaList dl + p a:before{width:16px; height:16px; top:4px;}

@media screen and (max-width: 320px) {
}
}