@charset "utf-8";
html {
    font-family: "HiraKakuStdN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}

html,
body,
img {
    width: 100%;
}

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

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

/* header */
.header {
    background-color: #f091a8;
}

/* footer */
.footer {
    margin: 40px 0 30px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.45;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .footer {
        font-size: 2.8125vw;
    }
}

/* block */
.sec01 {
    position: relative;
    z-index: 1;
    background-color: #f091a8;
    &::before {
        --h:2px;
        content: '';
        position: absolute;
        left: 0;
        top: calc(var(--h) / -2);
        width: 100%;
        height: var(--h);
        background-color: #f091a8;
        border-radius: 50%;
        z-index: -1;
    }
    &::after {
        --h:80px;
        content: '';
        position: absolute;
        left: 0;
        bottom: calc(var(--h) / -2);
        width: 100%;
        height: var(--h);
        background-color: #f091a8;
        border-radius: 50%;
        z-index: -1;
    }
}

.sec01__inner,
.sec01__02 {
    width: 87.5%;
    max-width: 560px;
    padding: 2.8333vw 0 0 0;
    margin: auto;
}

.sec01__02 {
    padding: 0;
}

.sec01__02-wrapper {
    padding: 2.8333vw 0 2.8333vw;
    background-color: #f091a8;
}

.sec01__02 {
    background-color: #fff;
    border-radius: 6px;
}

.sec02__wrapper {
    background-color: #fff;
    margin-top: 30px;
    border-radius: 6px;
}

.sec02,
.sec01__02-inner {
    width: 92.8571%;
    max-width: 520px;
    padding: 20px 0 27px;
    margin: auto;
}

.sec02:first-child {
    position: relative;
    margin-bottom: 50px;
        &::after {
            position: absolute;
            left: 50%;
            bottom: -45px;
            transform: translateX(-50%);
            content: '';
            width: 60px;
            height: 30px;
            background-image: url(../img/img_bg01.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
}

.card__box01 {
    display: flex;
    justify-content: space-between;
}

.sec03 {
    margin-top: 80px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .sec02:first-child {
        margin-bottom: 20px;
            &::after {
                bottom: -19px;
                width: 9.375vw;
                height: 4.6875vw;
            }
    }
}


/* heading */
.sec01__heading01 {
    position: relative;
    margin-top: 40px;
    padding: 0.5em 0;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    border-radius: 6px;
    background-color: #000;
    &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #000;
        border-radius: 4px;
    }
}

.sec02__heading01,
.sec02__heading02,
.sec01__heading02,
.sec01__heading03 {
    padding: 0.2em 0;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background-color: #00a83b;
    border-radius: 6px;
}

.sec02__heading02,
.sec01__heading03 {
    background-color: #00a0e9;
}

.sec03__heading01 {
    font-size: 30px;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: #fff100;
    text-underline-offset: -5px;
    text-decoration-skip-ink: none;
}

@media screen and (max-width: 768px) {
    .sec01__heading01,
    .sec02__heading01,
    .sec02__heading02,
    .sec01__heading02,
    .sec01__heading03 {
        font-size: 5.3125vw;
    }

    .sec03__heading01 {
        font-size: 4.6875vw;
    }
}


/* list */
.list__block01 {
    width: 92.8571%;
    max-width: 520px;
    padding: 2em 0;
    margin: auto;
}

.list__ttl01 {
    &:not(:first-child) {
        margin-top: 2em;
    }
}

.list__content02,
.list__content04,
.list__ttl03 {
    margin-top: 1em;
}

.list__item01,
.list__item05 {
    &:not(:first-child) {
        margin-top: 1em;
    }
}

.list__item02,
.list__item03,
.list__item04,
.list__item06,
.list__item10 {
    padding-left: 1em;
    text-indent: -1em;
}

.list__item07 {
    position: relative;
    margin-top: 30px;
    &:not(:last-child) {
        margin-bottom: 90px;
        &::after {
            position: absolute;
            left: 50%;
            bottom: -60px;
            transform: translateX(-50%);
            content: '';
            width: 60px;
            height: 30px;
            background-image: url(../img/img_bg01.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
}

.img__box01 {
    width: 30%;
    max-width: 156px;
}

.text__box01 {
    width: 65.3846%;
    max-width: 340px;
}

@media screen and (max-width: 768px) {
    .list__item07 {
        margin-top: 30px;
        &:not(:last-child) {
            margin-bottom: 60px;
            &::after {
                bottom: -40px;
                width: 9.375vw;
                height: 4.6875vw;
            }
        }
    }
}


/* text */
.list__text01 {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
}

.list__text01._mt02 {
    margin-top: 34px;
}

.list__text02,
.list__text03 {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    padding-left: 1em;
    text-indent: -1em;
}

.list__text03 {
    margin-top: 0;
}

/* グレー時はis-disabled、赤時はis-activeとします */
.text__block01 {
    display: block;
    padding: 1em;
    margin-top: 30px;
    width: 100%;
    border: 2px solid #ccc;
    font-size: 20px;
    font-weight: bold;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}

.text__block01.is-active {
    color: #000;
}

.text__block01.is-disabled {
    color: #666;
}

.text__content01 {
    margin-top: 20px;
    padding-left: 1em;
    text-indent: -1em;
}

.complete__text01 {
    margin-top: 20px;
    text-align: center;
    color: #e60012;
    font-size: 24px;
    font-weight: bold;
}

.complete__text01.is-disabled {
    display: none;
}

.complete__text01.is-active {
    display: block;
}

.text__block04 {
    display: block;
    margin-top: 1.5em;
}

.text__deco01,
.text__deco02 {
    padding: 0.5em 0.8em;
    font-size: 22px;
    color: #fff;
    border-radius: 6px;
}

.text__deco01 {
    margin-right: 0.2em;
    background-color: #00a83b;
}

.text__deco02 {
    margin-left: 0.2em;
    background-color: #00a0e9;
}

.text__deco03 {
    display: block;
    margin-top: 10px;
    font-size: 26px;
    font-weight: 900;
    color: #e60012;
}

.text__area01 {
    margin-top: 30px;
}

.text__inner01 {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.sec03__text {
    margin-top: 30px;
    line-height: 1.67;
    font-size: 24px;
    font-weight: bold;
}

.code__text01 {
    margin-top: 1em;
}

.status__message {
    margin-top: 30px;
    font-size: 30px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .list__text01,
    .text__block01 {
        font-size: 3.125vw;
    }

    .list__text01._mt02 {
        margin-top: 30px;
    }

    .list__text02,
    .list__text03 {
        font-size: 2.8125vw;
    }

    .text__content01,
    .text__inner01 {
        font-size: 2.89vw;
    }

    .text__deco01,
    .text__deco02 {
        font-size: 2.8vw;
    }

    .text__deco03 {
        font-size: 4.0625vw;
    }

    .sec03__text {
        font-size: 3.75vw;
    }

    .status__message {
        font-size: 4.6875vw;
    }
}

@media screen and (max-width: 600px) {
    .text__deco01,
    .text__deco02 {
        font-size: 3.4375vw;
    }
}


/* btn */
/* グレー時はis-disabled、赤時はis-activeとします */
.btn__area01 {
    position: relative;
    width: 92.3076%;
    max-width: 480px;
    margin: 30px auto 0;
    border-radius: 100px;
}

.btn__link01 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em 0;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

.btn__area01.is-disabled {
    background-color: #666666;
}

.btn__area01.is-active {
    background-color: #e60012;
}

.btn__img01 {
    position: absolute;
    width: 33px;
    height: 33px;
    top: 50%;
    right: 2.70833333%;
    transform: translateY(-50%);
}

.copy__btn01,
.btn__area02 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92.3076%;
    max-width: 480px;
    margin: 30px auto 0;
    border-radius: 100px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

.copy__btn01 {
    padding: 0.5em 0;
}

.copy__btn01.is-disabled,
.btn__area02.is-disabled {
    background-color: #666666;
}

.copy__btn01.is-active {
    background-color: #e60012;
}

.btn__area02.is-active {
    background-color: #fff;
    color: #e60012;
    border: 3px solid #e60012;
}

@media screen and (max-width: 768px) {
    .btn__link01,
    .copy__btn01,
    .btn__area02 {
        font-size: 4.6875vw;
    }

    .btn__img01 {
        width: 5.115625vw;
        height: 5.115625vw;
    }

}


/* link */
.list__link01,
.text__link01 {
    color: #0000ee;
    text-decoration: underline;
}

.btn__link02 {
    display: block;
    padding: 0.5em 0;
    width: 100%;
    height: auto;
    text-align: center;
}


/* bnr */
.bnr__area01 {
    width: 87.5%;
    max-width: 560px;
    margin: 30px auto 0;
}

/* accordion */
.accordion__area._mt01 {
    margin-top: 30px;
}

.accordion__btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5em 0;
    font-size: 30px;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 6px;
}

.accordion__img {
    position: absolute;
    top: 50%;
    right: 4.642857142%;
    width: 33px;
    height: 33px;
    transform: translateY(-50%);
}

.accordion__container {
    display: none;
    border-radius: 0 0 6px 6px;
    border: 2px solid #000;
    border-top: none;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .accordion__btn {
        font-size: 4.6875vw;
    }

    .accordion__img {
        width: 5.115625vw;
        height: 5.115625vw;
    }

}