@charset "utf-8";
/* CSS Document */

/*==============================*/
/* ページ内リンク用 */
/*==============================*/
.anchor_h {
    padding-top: 100px !important;
    margin-top: -100px !important;
    display: block;
}
@media screen and (max-width: 600px) {
    .anchor_h {
        padding-top: 60px !important;
        margin-top: -60px !important;
    }
}

/*==============================*/
/* FAQ */
/*==============================*/
.faq_list dt {
    margin-bottom: 1em;
    color: #333333;
    font-weight: 600;
    display: flex;
    gap: 10px;
}
.faq_list dt::before,
.faq_list dd::before {
    margin-right: .4em;
}
.faq_list dt::before {
    content: "Q";
    color: #fff;
    background-color: #0747A6;
    min-width: 2em;
    width: 2em;
    min-height: 2em;
    height: 2em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.faq_list dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #fff;
    color: #333333;
    border-radius: 5px;
    display: flex;
    gap: 10px;
}
.faq_list.faq_list_white dd {
    background-color: #f5f4f4;
}
.faq_list dd::before {
    content: "A";
    font-weight: bold;
    color: #fff;
    background-color: #cf0c13;
    min-width: 2em;
    width: 2em;
    min-height: 2em;
    height: 2em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*==============================*/
/* 使い方（HOWTO） */
/*==============================*/
.howto_list > li {
    display: flex;
    align-items: center;
    gap: 40px;
}
.howto_list > li:not(:last-child) {
    margin-bottom: 40px;
}
.howto_list_img {
    min-width: 400px;
    max-width: 400px;
}
.howto_list_img img {
    box-shadow: 2px 5px 10px 0px rgb(0 0 0 / 30%);
    width: 100%;
    height: auto;
}
.howto_list .howto_list_ttl {
    font-weight: bold;
    font-size: 1.2857142857143rem;
    margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
    .howto_list > li {
        flex-direction: column;
        gap: 20px;
    }
    .howto_list_img {
        order: 2;
        min-width: initial;
    }
}