/*-----------------------------------------------------------------------
faq
-----------------------------------------------------------------------*/

.top .faq h2{
   font-size: 50px;
   margin: 0 0 30px;
   position: absolute;
   top: -54px;
   right: 50px;
 }

 .area .faq h2{
   padding: 35px 0 30px;
 }
 .area .faq{
   padding:0 15px 50px 15px;
 }

 section.faq h2 .sub{
   font-size: 16px;
 }

 .faq-inner{
   max-width:800px;
   margin: 0 auto;
 }

 .faq-container dt{
   position:relative;
   cursor: pointer;
   padding-bottom: 10px;
   margin: 18px 0 5px;
   padding-right: 80px;
   padding-left: 50px;
   line-height:1.7em;
   border-bottom: 1px dotted #c7c7c7;
 }
 .faq-container dt:hover{
   color: rgb(139, 139, 139);
 }
 .include-accordion{
   position: relative;
 }
 
 .faq-container::before{
   position: absolute;
   content:"Q";
   top:-9px;
   font-size: 37px;
   color: #ff8e7b;
 }
 .faq-container dt::before,
 .faq-container dt::after{
   content:"";
   position: absolute;
   top: 50%;
   width: 1.5px;
   height: 8px;
   background-color: rgb(105, 105, 105);
   transition: .5s;
 }
 .faq-container dt::before{
   transform: translateY(-50%) rotate(-45deg);
   right: 35px;
 }
 .faq-container dt::after{
   transform: translateY(-50%) rotate(45deg);
   right: 30px;
 }
 .include-accordion.active dt::before{
   transform: translateY(-50%) rotate(-135deg);
   transition:.5s;
 }
 
 .include-accordion.active  dt::after{
   transform: translateY(-50%) rotate(135deg);
   transition:.5s;
 }
 
 .faq-container dd{
   height: 0;
   overflow: hidden;
   transition: .5s;
   margin:0;
   line-height: 2em;
   padding-top: 1em;
 }

/**************************************************************************
599px
****************************************************************************/
@media screen and (max-width: 599px) {
 .area .faq{
   padding:0 15px 10px 15px;
 }
 section.faq h2 {
   font-size: 43px;
}
section.faq h2 {
   top: -47px;
}

section.faq h2 .sub {
   font-size: 14px;
   margin-top: -4px;
}
}