/* outline
------------------------------*/
.l-page * {
    box-sizing: border-box;
    font-family: "Noto Sans JP" , sans-serif;
    color: #333;
}

#path,
.h1_section {
    display: none;
}

#contents {
    width: 100%;
    padding-bottom: 0;
}
:root {
    --blue: #416DB4;
    --purple: #B50081;
}

/*---------------------------------------------------------
main
---------------------------------------------------------*/

.main-container {
    width: 100%;
    background: #fff;
    padding-bottom: 80px;
    overflow: hidden;
}
.page-contents {
    width: 950px;
    margin: auto;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.mv {
    background: url("../images/bg_mv.png") no-repeat center / cover;
    margin: 0 0 80px;
    padding: 93px 0 0;
    height: 350px;
    text-align: center;
}
    .mv-headline {
        margin: 0 0 10px;
        font-size  : 50px;
        font-weight: 500;
        color      : #fff;
    }
    .mv-sub-headline {
        background-color: var(--purple);
        padding: 6px 130px;
        font-size: 30px;
        color    : #fff;
        width: fit-content;
        margin: auto;
    }
.page-discription {
    margin: -4px 0 35px;
    font-size  : 20px;
    line-height: 1.9;
    text-align: center;
    font-weight: 500;
}

/*-------------------------------------------------------------------------
TABLE
-------------------------------------------------------------------------*/

.flow {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 78px;
    position: relative;
    z-index : 0;
}
.flow:before,
.flow:after {
    content: "";
    width: 110px;
    height: calc(100% - 141px);
    position: absolute;
    top: 50px;
    z-index : -1;
}
.flow:before { background-color: #D9E2F0; left: 85px; height: 1070px;}
.flow:after  { background-color: #F7E4F1; right: 85px; height: 1070px;}

    .flow thead th {
        width: 280px;
        height: 50px;
        border-radius: 15px;
        font-size  : 24px;
        font-weight: 400;
        color      : #fff;
        letter-spacing: .1em;
    }
    .flow thead th:nth-child(1){ background-color: var(--blue);}
    .flow thead th:nth-child(3){ background-color: var(--purple);}

    .flow thead tr:nth-child(2) > td {
        height: 13px;
    }
    .flow tbody {
        position: relative;
    }
    .flow tbody:before,
    .flow tbody:after {
        content: "";
        width: 170px;
        height: 69px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        position: absolute;
        top: calc(100% - 26px);
    }
    .flow tbody:before {
        background-color: #D9E2F0;
        left: 57px;
    }
    .flow tbody:after {
        background-color: #F7E4F1;
        right: 50px;
    }
        .flow tbody td:nth-child(1),
        .flow tbody td:nth-child(3){
            font-size  : 20px;
            font-weight: 500;
            text-align: center;
            line-height: 1.27;
            letter-spacing: .1em;
        }
        .flow tbody td:nth-child(2){
            padding: 7.5px 0;
        }
            .flow tbody td:nth-child(1){ color: var(--blue);}
            .flow tbody td:nth-child(3){ color: var(--purple);}

/* #
--------------------------- */
.flow-bold {
    font-size  : 20px;
    font-weight: 700;
    color      : inherit;
}
.flow-down {
    height: 119px;
    background: url("../images/img_table_arw_down.png") no-repeat center;
    padding: 20px 0 0;
    font-size: 22px;
    color      : inherit;
    line-height: 1.27;
    font-weight: 600;
}
.flow-bold-fill {
    width: 192px;
    background-color: var(--blue);
    margin: 4px auto 0;
    padding: 6px 0 10px 9px;
    font-size  : 20px;
    font-weight: 700;
    color      : #fff;
    line-height: 1;
    white-space: nowrap;
}
.flow-fill {
    width: fit-content;
    background-color: var(--purple);
    margin: auto;
    padding: 5px 0 4px 15px;
    font-size  : inherit;
    font-weight: 500;
    color      : #fff;
}
.flow-fs22 {
    font-size: 22px;
    color    : inherit;
}
.flow-dot {
    width: 180px;
    background-color: #fff;
    margin: auto;
    padding: 5px 0;
    font-size  : 20px;
    font-weight: 600;
    color      : inherit;

}
.flow tbody td:nth-child(1) .flow-dot { border: 1px dashed var(--blue);}
.flow tbody td:nth-child(3) .flow-dot { border: 1px dashed var(--purple);}

.flow-note {
    height: 120px;
    background-repeat  : no-repeat;
    background-position: right 12px center;
    border: 2px solid #333;
    border-radius: 15px;
    display    : flex;
    align-items: center;
    margin: 0 5px;
    padding: 0 0 0 29px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .025em;
}
.flow tbody tr:nth-child(1) .flow-note { background-image: url("../images/img_flow1.png");}
.flow tbody tr:nth-child(2) .flow-note { background-image: url("../images/img_flow2.png");}
.flow tbody tr:nth-child(3) .flow-note { background-image: url("../images/img_flow3.png");}
.flow tbody tr:nth-child(4) .flow-note { background-image: url("../images/img_flow4.png");}
.flow tbody tr:nth-child(5) .flow-note { background-image: url("../images/img_flow5.png");}
.flow tbody tr:nth-child(6) .flow-note { background-image: url("../images/img_flow6.png");}
.flow tbody tr:nth-child(7) .flow-note { background-image: url("../images/img_flow7.png");}
.flow tbody tr:nth-child(8) .flow-note { background-image: url("../images/img_flow8.png");}

.flow-foot {
    margin: 52px 0 0;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 15px 0 13px;
    font-size  : 20px;
    font-weight: 500;
    text-align: center;
}

.page-contents .flow .flow-sm_td {
    font-size: 18px;
    font-weight: 500;
}

.page-contents .flow  .flow-buy_td {
    font-size: 20px;
    font-weight: 600;
}

/*-------------------------------------------------------------------------
メリット
-------------------------------------------------------------------------*/

.merit {
    margin: 0 0 80px;
}
    .merit-ttl {
        margin: 0 0 20px;
        padding: 6px 0 6px 13px;
        border-left: 7px solid var(--purple);
        font-size  : 28px;
        font-weight: 500;
    }
    .merit-body {
        display        : flex;
        gap            : 20px;
        justify-content: space-between;
    }
        .merit-list {
            flex: 1;
            border-radius: 0 0 20px 20px;
        }
        .merit-list.is-merit   { border: 3px solid var(--blue);}
        .merit-list.is-demerit { border: 3px solid var(--purple);}

            .merit-sub-ttl {
                padding: 10px 0 10px;
                font-size  : 24px;
                font-weight: 500;
                color      : #fff;
                text-align: center;
            }
            .merit-list.is-merit .merit-sub-ttl   { background-color: var(--blue);}
            .merit-list.is-demerit .merit-sub-ttl { background-color: var(--purple);}

            .merit-contents {
                padding: 18px 20px;padding: 16px 20px;
            }
                .merit-inner > * + * {
                    margin: 11px 0 0;
                }
                    .merit-text {
                        margin-left: 1em;
                        position: relative;
                        font-size: 16px;
                        line-height: 1.56;
                        text-indent: -1em;
                    }
                    .merit-text:first-letter {
                        margin: 0 5px 0 0;
                        font-size  : 12px;
                        font-weight: 500;
                        vertical-align: 2px;
                    }
                    .merit-list.is-merit .merit-text:first-letter   { color: var(--blue);}
                    .merit-list.is-demerit .merit-text:first-letter { color: var(--purple);}

/*-------------------------------------------------------------------------
お問い合わせ
-------------------------------------------------------------------------*/

.contactus-ttl {
    margin: 0 0 3px;
    font-family: 'Noto Serif JP', serif;
    font-size  : 32px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
}
.contactus-body {
    border: 8px solid #EFCCE4;
    padding: 23px 33px 32px;
}
    .contactus-logo {
        margin: 0 0 20px;
        text-align: center;
    }
    .contactus-list {
        display        : flex;
        gap            : 14px;
        justify-content: space-between;
    }
        .contactus-items {
            flex: 1;
        }
            .contactus-btn {
                height: 70px;
                background: var(--purple) url("../images/img_arw.png") no-repeat right 19px center;
                border-radius: 4px;
                display        : flex;
                gap            : 10px;
                align-items    : center;
                justify-content: center;
                font-size: 22px;
                color    : #fff;
            }
            .contactus-btn:hover {
                opacity: .8;
                color: #fff;
                text-decoration: none;
            }
            .contactus-mail:before { content: url("../images/icn_mail.png");}
            .contactus-calc:before { content: url("../images/icn_calc.png");}