@charset "UTF-8";
/* ===========================
faq.css
============================== */


@media screen and (min-width: 35.5em) {
    /* 568px sm */
}

@media screen and (min-width: 48em) {
    /* 768px md */
}

@media screen and (min-width: 64em) {
    /* 1024px lg */
}

@media screen and (min-width: 80em) {
    /* 1280px xl */
}

#content-wrapper .section {
    margin-bottom: 80px;
}

/*** カテゴリの一覧 ***/
.question_area {
    margin-top: 80px;
}

.question_area .ttl {
    color: #0398c2;
    text-align: center;
    font-weight: 500;
}

.question_area .list {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.question_area .list .item {
    position: relative;
    list-style-type: none;
    border-bottom: 1px solid #bdbdbd;
}

.question_area .list .item::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #0398c2;
    border-right: 2px solid #0398c2;
    position: absolute;
    top: calc(50% - 3px);
    right: 20px;
    transform: rotate(135deg);
}

.question_area .list .item a {
    display: block;
    color: #3a3a3a;
    text-decoration: none;
    padding: 1em calc(1em + 20px) 1em 1em;
}

.question_area .list .item a:hover {
    color: #0078e7;
}

/*** 回答ブロック ***/
.answer_area > .answer_contents {
    margin: -90px auto 15px;
    padding-top: 90px;
    width: 100%;
}

/*アコーディオン設定*/
.answer_area .toggle {
    display: none;
}

.answer_area .answer_title {
    display: block;
    color: #0398c2;
    background-color: rgba(3, 152, 194, 0.2);
    padding: 0.875em calc(1em + 20px) 0.875em 1em;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.4;
}

.answer_area .answer_title:hover {
    cursor: pointer;
    color: #0078e7;
}

.answer_area .answer_title,
.answer_area .toggle_txt {
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}

.answer_area .toggle_txt {
    height: 0;
    margin-bottom: 10px;
    padding: 0 20px;
    overflow: hidden;
}

.answer_area .toggle:checked + .answer_title + .toggle_txt {
    height: auto;
    padding: 20px;
    transition: all .3s;
}

.answer_area .answer_title::before {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    top: calc(50% - 6px);
    right: 20px;
    transform: rotate(135deg);
}

.answer_area .toggle:checked + .answer_title::before {
    transform: rotate(-45deg);
}

/*アコーディオンコンテンツ設定*/
.answer_area .toggle_txt dl {
    margin: 0;
}

.answer_area .toggle_txt dl dt,
.answer_area .toggle_txt dl dd {
    display: flex;
    align-items: baseline;
    margin: 15px 0;
}

.answer_area .toggle_txt dl dt p,
.answer_area .toggle_txt dl dd .answer_txtarea {
    margin: 0;
    padding-left: 15px;
    width: 100%;
    line-height: 1.5;
}

.answer_area .toggle_txt dl dt::before,
.answer_area .toggle_txt dl dd::before {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.answer_area .toggle_txt dl dt::before {
    content: "Q";
    border: 1px solid #0398c2;
    color: #0398c2;
    font-weight: 500;
}

.answer_area .toggle_txt dl dd::before {
    content: "A";
    color: #fff;
    background-color: #0398c2;
    border: 1px solid #0398c2;
    font-weight: 500;
}

.answer_area .toggle_txt dl dt p {
    font-size: 18px;
    color: #0398c2;
    font-weight: 800;
}

.answer_area .toggle_txt dl dd {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #bdbdbd;
    font-weight: normal;
}

.answer_area .toggle_txt dl dd:last-child {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: none;
}

.answer_area .toggle_txt dl dd .small {
    font-size: 13px;
}

.answer_area .toggle_txt dl dd a {
    color: #054798;
}

.answer_area .toggle_txt dl dd a:hover {
    text-decoration: none;
}

.answer_area .toggle_txt .red {
    color: #c33;
}

.answer_area .toggle_txt .s-light {
    color: #1590b6;
    font-weight: 800;
}

.answer_area .toggle_txt .s-advance {
    color: #e64290;
    font-weight: 800;
}

.answer_area .toggle_txt .s-pro {
    color: #caa332;
    font-weight: 800;
}

.answer_area .toggle_txt .small_header {
    display: inline-block;
    padding: 0.5em 0;
}

.answer_area .toggle_txt .sub_desc {
    display: inline-block;
    padding-left: 1.5em;
}

.answer_area .toggle_txt .table-resp01 {
    display: block;
    margin-left: 1.5em;
}

.answer_area .toggle_txt .table-resp01 tbody {
    display: block;
}

.answer_area .toggle_txt .table-resp01 tr {
    display: block;
}

.answer_area .toggle_txt .table-resp01 tr th {
    display: block;
    text-align: left;
}

.answer_area .toggle_txt .table-resp01 tr td {
    display: block;
    padding-left: 1.5em;
}

.answer_area .toggle_txt .mb0 {
    margin-bottom: 0;
}

.answer_area .toggle_txt .pb0_5 {
    padding-bottom: 0.5em;
}

.answer_area .toggle_txt .pt0_5 {
    padding-top: 0.5em;
}

.answer_area .list-plain {
    padding-left: 0;
    list-style: none;
}

.answer_area .list-plain li {
    text-indent: -1.25em;
    padding-left: 1.5em;
}

.answer_area .d-ib {
    display: inline-block;
}

.answer_area .target_adj01 {
    margin-top: -90px;
    padding-top: 90px;
}

.answer_area .toggle_txt dl dt.target_adj01 {
    margin-top: -85px;
    padding-top: 90px;
}

.answer_area .lh-narrow {
    line-height: 18px;
}

.answer_area .string_list {
    display: inline-block;
    text-indent: -1.25em;
    padding-top: 0.5em;
    padding-left: 1.5em;
}

.answer_area strong {
    font-weight: 800;
}

@media screen and (min-width: 48em) {
    /* 768px md */
    /*** カテゴリの一覧 ***/
    .question_area .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;
    }

    .question_area .list .item {
        width: calc(100% / 2 - 30px);
    }

    /*** 回答ブロック ***/
    .answer_area > .answer_contents {
        margin: -90px auto 90px;
    }

    /*アコーディオン設定*/
    .answer_area .answer_title {
        cursor: none;
        pointer-events: none;
    }

    .answer_area .toggle_txt {
        height: auto;
        padding: 20px 0;
    }

    .answer_area .toggle:checked + .answer_title::before {
        transform: rotate(135deg);
    }

    /*アコーディオンコンテンツ設定*/
    .answer_area .toggle_txt dl dt p {
        font-size: 20px;
    }

    .answer_area .toggle_txt dl dd:last-child {
        margin-bottom: -20px;
        padding-bottom: 0;
    }

    .answer_area .toggle_txt .table-resp01 {
        display: table;
        margin-left: 1.5em;
    }

    .answer_area .toggle_txt .table-resp01 tbody {
        display: table-row-group;
    }

    .answer_area .toggle_txt .table-resp01 tr {
        display: table-row;
    }

    .answer_area .toggle_txt .table-resp01 tr th {
        display: table-cell;
        padding-bottom: 0.5em;
        text-align: left;
        vertical-align: text-top;
    }

    .answer_area .toggle_txt .table-resp01 tr td {
        display: table-cell;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        vertical-align: text-top;
    }
}