/*-----------------------------------------------
【I003】『よくあるご質問』画面CSS
-----------------------------------------------*/

html {
    scroll-behavior: smooth;
}

/* コンテナー */

.faq_container {
    padding-top: 50px;
    padding-bottom: 50px;
    max-width: 1140px;
}

/* インナー */

.faq {
    margin: 0px auto;
    max-width: 1140px;
    display: flex;
}

/* タイトル領域 */

.faq .head_title_area {
    margin-top: 5px;
    margin-bottom: 40px;
}

/* カテゴリ名 */

.faq .category_title {
    margin-bottom: 5px;
    font-size: 16px;
}

/* 質問 */

summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    color: rgb(150, 150, 150);
}

summary::-webkit-details-marker {
    display: none;
}

/* 質問の点 */

summary::before {
    border-radius: 50%;
    /*丸くする*/
    width: 6px;
    /*点の幅*/
    height: 6px;
    /*点の高さ*/
    display: block;
    position: absolute;
    /*絶対配置*/
    left: 0;
    /*点の位置*/
    top: 14px;
    /*点の位置*/
    content: "";
    background: rgb(150, 150, 150);
}

/* オープン時のスタイル */

details[open] summary {
    color: rgb(210, 116, 0);
    font-weight: 500;
}

details[open] summary::before {
    background: rgb(255, 155, 0);
}

/* アニメーション */

details[open] .details-content {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* 質問回答の一覧 */

.faq .topic>ul {
    margin-bottom: 40px;
}

/* 質問 */

.faq .question {
    margin-bottom: 5px;
    padding-left: 10px;
    font-size: 16px;
}

/* 回答 */

.faq .answer {
    line-height: 1.5;
    padding-left: 10px;
    font-size: 14px;
    margin-bottom: 40px;
}

/* 外部サイトへのリンク */
.faq .a-exlink {
    color: #007bff;
}
.faq .a-exlink:hover {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}

/* 自動顔隠しスタンプ 回答 */

.faq .answer ol {
    list-style: decimal;
    padding-left: 15px;
}

.faq .answer ol ul {
    list-style: disc;
    padding-left: 15px;
}


/* 通常の箇条書き */

.style_disc_ul {
    list-style: disc;
    padding-left: 20px;
    line-height: 1.5;
}

/* 仕切り線 */

.faq_topic_area hr {
    size: 0.5px;
    width: 100%;
}

/* メニュー領域 */

.faq .topic_menu_area {
    width: 165px;
    /* 子要素と同じ幅 */
    position: absolute;
    right: 0px;
}

.faq .topic_menu_nav {
    position: fixed;
    width: 165px;
}

.faq .anchors {
    background: white;
    border-radius: 5px;
    box-shadow: 1px 1px 4px 4px rgb(0 0 0 / 15%);
    text-align: left;
    padding: 12px 12px;
}

.faq .anchors ul {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style: none;
}

@media (max-width: 1000px) {
    .faq .left_innner_area {
        max-width: 100%;
        flex: 0 0 100%;
        padding-left: 0px;
        padding-right: 0px;
    }
    .faq .right_inner_area {
        display: none;
        padding: 0px;
    }
}