/* よくあるお問い合わせページのcss設定 */



#contents_area > section > p > a,

#contents_area > section > p > a:hover,

#contents_area > section > p > a:active {

    color: #404040;

    background-color: transparent;

}





#contents_area .triangle_up:after,

#contents_area .triangle_down:after {

    border-top-color: #808080;

}



#contents_area span.faq_q,

#contents_area span.faq_a {

    font-size: 1.125rem;

    font-weight: 900;

    color: #cf204a;

    margin-right: 10px;

}



#contents_area span.faq_a {

    color: #4082de;

}



#contents_area > section.detail > p {

    margin-left: 1rem;

}







/* FAQ本文  */

#contents_area details {

    color: #404040;

}

#contents_area details:not(:last-child) {

    margin-bottom: 1rem;

}



/* 開く動き */

#contents_area details[open] {

    max-height:47vh;

    transition: all 0.4s;

}



/* 閉じる動き */

#contents_area details {

    max-height: 4rem;

    overflow: hidden;

    transition: all 0.4s;

}



/* divの高さ指定 */

#contents_area details .faq_a_area {

    height:auto;

    max-height:40vh;

    overflow-y: auto;

}



/**

 * list-style: none; ←デフォルト三角削除（Chrome非対応）

 * cursor: pointer; ←カーソルをポインターに

**/

#contents_area details summary {

    list-style: none;

    cursor: pointer;

    padding-left: 2rem;

}

/* Chrome用のデフォルト三角削除 */

#contents_area details summary::-webkit-details-marker {

    display: none;

}

/* 行末に下向き三角 */

#contents_area details summary::after {

    content: '';

    display: inline-block;

    width: 0;

    height: 0;

    margin-left: 5px;

    margin-right: 0px;

    border-top: 6px solid #808080;

    border-right: 6px solid transparent;

    border-left: 6px solid transparent;

}

/**

 * アコーディオンがオープン時は上向き三角に変更

**/

#contents_area details[open] summary::after {

    content: '';

    display: inline-block;

    width: 0;

    height: 0;

    margin-left: 5px;

    margin-right: 0px;

    border-bottom: 6px solid #808080;

    border-top: 6px solid transparent;

    border-right: 6px solid transparent;

    border-left: 6px solid transparent;

}





/* 回答エリアの設定 */

#contents_area details > .faq_a_area {

    margin: 10px 3rem;

    padding: 1rem;



    /* 1px × 1pxのドットで間隔が3pxの点線を上下左右に表示 */

    background-image: linear-gradient(to right, #808080, #808080 1px, transparent 1px, transparent 2px),

                      linear-gradient(to bottom, #808080, #808080 1px, transparent 1px, transparent 2px),

                      linear-gradient(to right, #808080, #808080 1px, transparent 1px, transparent 2px),

                      linear-gradient(to bottom, #808080, #808080 1px, transparent 1px, transparent 2px);

    background-size: 3px 1px,

                     1px 3px,

                     3px 1px,

                     1px 3px;

    background-position: top, right, bottom, left;

    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;



    

    color: #808080;



    padding-left: 2.5rem;

    text-indent: -1.3rem;

}



:focus {

    outline: -webkit-focus-ring-color auto 0px;

}





/* 767以下*/



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



#contents_area details summary {

    padding-left: 0.5rem;

}



#contents_area details > .faq_a_area {

    margin: 10px 0 10px 1rem;

}





}