@charset "utf-8";
html {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #000;
    line-height: 1.6;
}

html,
body {
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    max-width: 640px;
    margin: auto;
}

/* General purpose */
._red {
    color: #cc0033;
}

:root {
    --design-width: 375;
}

@counter-style katakana-ja {
    system: alphabetic;
    symbols: ア イ ウ エ オ カ キ ク ケ コ;
}

/* header */
.header__img01 {
    width: 100%;
    height: auto;
}

/* footer */
.footer {
    margin: 40px auto 150px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: -0.5px;
    text-align: center;
}

.footer__txt01 {
    color: #093475;
    margin-bottom: 5px;
}

.footer__link02 {
    position: relative;
}

.footer__link02:not(:last-child) {
    padding-right: 10px;
}

.footer__link02:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 0;
    width: 1px;
    height: 24px;
    background: #093475;
}

.footer__txt02 {
    font-size: 12px;
    margin: 30px auto 0;
}

@media screen and (max-width: 768px) {
    .footer {
        margin: calc(40 / var(--design-width) * 100vw) auto calc(150 / var(--design-width) * 100vw);
        font-size: calc(14 / var(--design-width) * 100vw);
        letter-spacing: calc(-0.5 / var(--design-width) * 100vw);
    }

    .footer__txt01 {
        margin-bottom: calc(5 / var(--design-width) * 100vw);
    }

    .footer__link02:not(:last-child) {
        padding-right: calc(10 / var(--design-width) * 100vw);
    }

    .footer__link02:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(3 / var(--design-width) * 100vw);
        top: 0;
        height: calc(24 / var(--design-width) * 100vw);
        background: #093475;
    }

    .footer__txt02 {
        font-size: calc(12 / var(--design-width) * 100vw);
        margin: calc(30 / var(--design-width) * 100vw) auto 0;
    }
}

/* block */
.sec02__bg {
    background-color: #f2f3f4;
    padding: 0 16px 32px;
}

@media screen and (max-width: 768px) {
    .sec02__bg {
        padding: 0 calc(16 / var(--design-width) * 100vw) calc(32 / var(--design-width) * 100vw);
    }
}


/* heading */
.sec02__heading01 {
    padding: 20px 0;
    font-size: 32px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .sec02__heading01 {
        padding: calc(20 / var(--design-width) * 100vw) 0;
        font-size: calc(24 / var(--design-width) * 100vw);
    }
}


/* list */
.sec02__list01 {
    background-color: #fff;
    padding: 24px 16px;
    border-radius: 16px;
    box-shadow: 0 0 3px #e6e7e7;
}

.sec02__ttl01 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

.sec02__dtl01 {
    position: relative;
    font-size: 18px;
}

.sec02__dtl01:not(:last-of-type) {
    margin-bottom: 86px;
}

.sec02__dtl01:not(:last-of-type)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -48px;
    width: 100%;
    height: 1px;
    background: #d1d2d8;
}

.sec02__list02 {
    counter-reset: num;
}

.sec02__list-item02 {
    margin-bottom: 28px;
    counter-increment: num;
    position: relative;
    padding-left: 40px;
}

.sec02__list-item02::before {
    content: counter(num) ".";
    position: absolute;
    left: 0;
}

.sec02__list03:not(:last-of-type) {
    margin-bottom: 28px;
}

.sec02__list-item03 {
    position: relative;
    padding-left: 16px;
}

.sec02__list-item03::before {
    content: "※";
    position: absolute;
    left: 0;
}

.sec02__list-item04 {
    margin-bottom: 28px;
    position: relative;
    padding-left: 16px;
}

.sec02__list-item04::before {
    content: "・";
    position: absolute;
    left: 0;
}

.sec02__list05 {
    counter-reset: item;
}

.sec02__list-item05 {
    margin-bottom: 28px;
    counter-increment: item;
    position: relative;
    padding-left: 38px;
}

.sec02__list-item05::before {
    content: "(" counter(item, katakana-ja) ")";
    position: absolute;
    left: 0;
}

@media screen and (max-width: 768px) {
    .sec02__list01 {
        padding: calc(24 / var(--design-width) * 100vw) calc(16 / var(--design-width) * 100vw);
        border-radius: calc(16 / var(--design-width) * 100vw);
    }

    .sec02__ttl01 {
        font-size: calc(20 / var(--design-width) * 100vw);
        margin-bottom: calc(16 / var(--design-width) * 100vw);
    }

    .sec02__dtl01 {
        font-size: calc(14 / var(--design-width) * 100vw);
    }
    
    .sec02__dtl01:not(:last-of-type) {
        margin-bottom: calc(86 / var(--design-width) * 100vw);
    }

    .sec02__dtl01:not(:last-of-type)::after {
        bottom: calc(-48 / var(--design-width) * 100vw);
    }
    
    .sec02__list-item02 {
        margin-bottom: calc(28 / var(--design-width) * 100vw);
        padding-left: calc(28 / var(--design-width) * 100vw);
    }

    .sec02__list03:not(:last-of-type) {
        margin-bottom: calc(28 / var(--design-width) * 100vw);
    }

    .sec02__list-item03 {
        padding-left: calc(16 / var(--design-width) * 100vw);
    }

    .sec02__list-item04 {
        margin-bottom: calc(28 / var(--design-width) * 100vw);
        padding-left: calc(16 / var(--design-width) * 100vw);
    }

    .sec02__list-item05 {
        margin-bottom: calc(28 / var(--design-width) * 100vw);
        padding-left: calc(28 / var(--design-width) * 100vw);
    }
}


/* txt */
.sec02__txt01 {
    margin-bottom: 28px;
}

.txt__deco01 {
    letter-spacing: -0.5px;
}

@media screen and (max-width: 768px) {
    .sec02__txt01 {
        margin-bottom: calc(28 / var(--design-width) * 100vw);
    }

    .txt__deco01 {
        letter-spacing: calc(-0.5 / var(--design-width) * 100vw);
    }
}

/* btn */
.sec02__btn01 {
    position: relative;
    width: 69.4444%;
    max-width: 400px;
    margin: 28px auto 0;
    background-color: #cc0033;
    border-radius: 9999px;
}

.sec02__btn-link01 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.7em 0;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.sec02__btn-img01 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    right: 8%;
}

@media screen and (max-width: 768px) {
    .sec02__btn01 {
        width: 90.0321%;
        margin: calc(28 / var(--design-width) * 100vw) auto 0;
    }

    .sec02__btn-link01 {
        font-size: calc(13 / var(--design-width) * 100vw);
    }

    .sec02__btn-img01 {
        width: calc(24 / var(--design-width) * 100vw);
        height: calc(24 / var(--design-width) * 100vw);
    }
}

/* flow */
.sec02__flow-img01 {
    width: 100%;
    height: auto;
}


/* link */
.sec02__link02 {
    position: relative;
    display: inline-block;
    color: #093475;
}

.sec02__link02::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #093475;
}

@media screen and (max-width: 768px) {
    .sec02__link02::after {
        bottom: calc(-4 / var(--design-width) * 100vw);
    }
}

/* float */
.float {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    height: 120px;
    background: rgba(48, 49, 49, 0.7);
    z-index: 100;
}

.float__btn01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62.5%;
    max-width: 400px;
    background-color: #cc0033;
    border-radius: 9999px;
}

.float__btn-link01 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.7em 0;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.float__btn-img01 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    right: 8%;
}

@media screen and (max-width: 768px) {
    .float {
        height: calc(120 / var(--design-width) * 100vw);
    }

    .float__btn01 {
        width: 74.6666%;
    }

    .float__btn-link01 {
        font-size: calc(13 / var(--design-width) * 100vw);
    }

    .float__btn-img01 {
        width: calc(24 / var(--design-width) * 100vw);
        height: calc(24 / var(--design-width) * 100vw);
    }
}