@charset "utf-8";

/* コーポレートカラー #a2c7c9
文字 #6b584b
アクセントカラー #07575b 
薄い緑 #dae9e9
ピンク　#c9a3b4
補色　#c9a5a3*/


.line{
    text-align: center;
    margin-bottom: 10px;
}

.contact-area dl .faq{
    border:1px solid #6b584b;
    border-radius: 13px;
    margin-bottom: 10px;
}

.contact-area dl{
    margin-bottom: 20px;
}

.contact-area dl .faq .q-box{
    background-color: #dae9e9;
    border-radius: 13px;
    padding: 10px;
    position: relative;
    cursor: pointer;
}

.contact-area dl .faq .q-box p{
 width: 80%;
}
  
.contact-area dl .faq .q-box::after {
    content: "";
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transition: all 0.2s;
    display: block;
    width: 15px;
    height: 15px;
    border-top: solid 2px #6b584b;
    border-right: solid 2px #6b584b;
    transform: rotate(135deg);
}

.contact-area dl .faq .q-box span{
    font-weight: bold;
    display: block;
    padding-right: 10px ;
}


.contact-area dl .faq .a-box {
    display: none;
}

 /* ボックス開いたとき */
 .contact-area dl .faq .q-box.open{
    border-radius: 13px 13px 0 0 ;
}

  .contact-area dl .faq .q-box.open::after {
    transform: rotate(-45deg);
    top: 45%;
}


.contact-area dl .faq .a-box span{
    font-weight: bold;
    display: block;
    padding-right: 10px ;
}

.contact-area dl .faq .a-box{
    padding: 10px;
}

/* -----------------------------------------
  ここから380px以下の画面に向けた記述
----------------------------------------- */
@media screen and (max-width:380px){
.line{
    text-align: left;
}

}