:root {
    --white: #fff;
    --black: #000;
    --primary: #FF5B1A;
    --primary-60: rgba(255, 91, 26, 0.60);
    --primary-light: #FFE5DB;
    --yellow: #ff0
}

.kv {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 641px;
    background-image: url(../../img/top/bg_kv.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

@media screen and (max-width:842px) {
    .kv {
        height: auto;
        padding-bottom: 28px;
        background-image: url(../../img/top/bg_kv_sp.jpg)
    }
}

.kv_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0 85px;
    width: 100%;
    max-width: 1058px;
    margin: 0 auto
}

@media screen and (max-width:1024px) {
    .kv_inner {
        gap: 0 25px
    }
}

@media screen and (max-width:842px) {
    .kv_inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden
    }
}

.kv_text {
    width: 440px;
    margin-top: 92px
}

@media screen and (max-width:842px) {
    .kv_text {
        width: 100%;
        margin-top: 0
    }
}

@media screen and (max-width:842px) {
    .kv_text .first_text {
        width: calc(100% - 34px);
        max-width: 330px;
        margin: 28px auto 0
    }
}

@media screen and (max-width:842px) {
    .kv_text h1 {
        width: calc(100% - 33px);
        max-width: 342px;
        margin: -12px auto 0
    }
}

.kv_text .text {
    margin-top: 20px;
    color: var(--white);
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1.96px
}

@media screen and (max-width:842px) {
    .kv_text .text {
        margin-top: 14px;
        text-align: center;
        font-size: 21px;
        letter-spacing: 1.47px
    }
}

.kv_text hr {
    width: 90%;
    height: 4px;
    border: none;
    background-image: url(../../img/common/line_border.png);
    background-size: auto 4px;
    background-repeat: repeat;
    margin: 21px 0 0
}

@media screen and (max-width:842px) {
    .kv_text hr {
        width: calc(100% - 32px);
        max-width: 375px;
        margin: 9px auto 0
    }
}

.kv_img {
    width: 424px;
    margin-top: 24px
}

@media screen and (max-width:842px) {
    .kv_img {
        position: relative;
        left: 50%;
        width: 338px;
        margin-top: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.kv .cta {
    position: absolute;
    top: calc(100% - 39px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (max-width:842px) {
    .kv .cta {
        top: calc(100% + 20px)
    }
}

#spot-function.function {
    margin-top: 206px;
    padding: 134px 0 131px
}

@media screen and (max-width:842px) {
    #spot-function.function {
        margin-top: 312px;
        padding: 150px 0 102px
    }
}

.function_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.function_inner .functionlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 55px 20px;
    margin-top: 63px
}

@media screen and (max-width:842px) {
    .function_inner .functionlist {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 50px
    }
}

.function_inner .functionlist .listitem {
    position: relative;
    width: calc((100% - 40px)/ 3);
    max-width: 343px;
    padding: 41px 26px 27px;
    border-radius: 20px;
    background: #f2ebe2
}

@media screen and (max-width:842px) {
    .function_inner .functionlist .listitem {
        width: 100%;
        max-width: 560px;
        padding: 37px 20px 30px;
        border-radius: 10px
    }
}

.function_inner .functionlist .listitem .number {
    position: absolute;
    top: 0;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 66px;
    height: 67px;
    background-image: url(../../img/top/bg_function_num.svg);
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.function_inner .functionlist .listitem .number span {
    color: var(--black)
}

.function_inner .functionlist .listitem .number span.text {
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: .7px
}

.function_inner .functionlist .listitem .number span.num {
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 1.4px
}

.function_inner .functionlist .listitem .image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 25px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    border-radius: 20px;
    background: var(--white)
}

@media screen and (max-width:842px) {
    .function_inner .functionlist .listitem .image {
        border-radius: 10px
    }
}

.function_inner .functionlist .listitem>.text {
    margin-top: 20px
}

.function_inner .functionlist .listitem>.text h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    min-height: 53px;
    text-align: center;
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1px
}

@media screen and (max-width:842px) {
    .function_inner .functionlist .listitem>.text h3 {
        height: auto;
        font-size: 20px
    }
}

.function_inner .functionlist .listitem>.text p {
    margin-top: 20px;
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px
}

@media screen and (max-width:842px) {
    .function_inner .functionlist .listitem>.text p {
        margin-top: 10px;
        font-size: 14px;
        letter-spacing: .56px
    }
}

.function_inner .comment {
    width: 100%;
    max-width: 765px;
    margin: 10px auto 0;
    color: var(--black);
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px
}

@media screen and (max-width:842px) {
    .function_inner .comment {
        text-align: left;
        font-size: 14px;
        letter-spacing: .56px
    }
}

.sample {
    padding: 56px 0 100px;
    border-radius: 20px;
    background-color: var(--primary-light)
}

.sample_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.sample_content .before_and_after {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px 44px;
    margin-top: 30px
}

@media screen and (max-width:842px) {
    .sample_content .before_and_after {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        max-width: 450px;
        margin: 20px auto 0
    }
}

.sample_content .before_and_after .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 19px 0;
    width: calc((100% - 44px)/ 2)
}

@media screen and (max-width:842px) {
    .sample_content .before_and_after .box {
        width: 100%
    }
}

@media screen and (max-width:640px) {
    .sample_content .before_and_after .box.left>figure img {
        width: calc(100% - 12px)
    }
}

@media screen and (max-width:640px) {
    .sample_content .before_and_after .box.left .after>figure img {
        width: calc(100% - 42px)
    }
}

@media screen and (max-width:640px) {
    .sample_content .before_and_after .box.right>figure img {
        width: calc(100% - 12px)
    }
}

@media screen and (max-width:640px) {
    .sample_content .before_and_after .box.right .after>figure img {
        width: calc(100% - 179px)
    }
}

@media screen and (max-width:842px) {
    .sample_content .before_and_after .box .arrow {
        width: 40px;
        height: 42px
    }
}

.sample_content .before_and_after figure {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    z-index: 15
}

@media screen and (max-width:1024px) {
    .sample_content .before_and_after figure {
        width: calc(100% - 40px);
        margin: 0 auto
    }
}

.sample_content .before_and_after figure figcaption {
    color: var(--black, #000);
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%
}

.sample_content .before_and_after .after {
    position: relative;
    width: 100%;
    margin-top: auto
}

.sample_content .before_and_after .after::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    border-radius: 20px;
    background-color: var(--white);
    z-index: 5
}

@media screen and (max-width:842px) {
    .sample_content .before_and_after .after::before {
        border-radius: 14px
    }
}

.sample_content .before_and_after .after .text {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(100% - 86px);
    height: 54px;
    margin: 18px auto 27px;
    color: var(--black);
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px;
    z-index: 15
}

.sample_content .recommend {
    width: 100%;
    margin-top: 70px;
    padding: 30px 89px;
    border-radius: 20px;
    border: 1px solid var(--primary);
    background-color: var(--white)
}

@media screen and (max-width:842px) {
    .sample_content .recommend {
        padding: 30px 19px
    }
}

.sample_content .recommend h3 {
    color: var(--primary);
    text-align: center;
    font-family: "M PLUS Rounded 1c";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%
}

@media screen and (max-width:842px) {
    .sample_content .recommend h3 {
        font-size: 22px
    }
}

.sample_content .recommend .recommendlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 20px 50px;
    margin-top: 33px
}

@media screen and (max-width:842px) {
    .sample_content .recommend .recommendlist {
        gap: 20px 30px
    }
}

@media screen and (max-width:640px) {
    .sample_content .recommend .recommendlist {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.sample_content .recommend .recommendlist .listitem {
    width: calc((100% - 100px)/ 3)
}

@media screen and (max-width:640px) {
    .sample_content .recommend .recommendlist .listitem {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0 20px;
        width: 100%
    }
}

.sample_content .recommend .recommendlist .listitem .icon {
    width: 162px;
    height: 184px;
    margin: 0 auto
}

@media screen and (max-width:842px) {
    .sample_content .recommend .recommendlist .listitem .icon {
        width: 124px;
        height: auto
    }
}

.sample_content .recommend .recommendlist .listitem .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 81px;
    margin-top: 30px;
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px
}

@media screen and (max-width:842px) {
    .sample_content .recommend .recommendlist .listitem .text {
        height: auto
    }
}

@media screen and (max-width:640px) {
    .sample_content .recommend .recommendlist .listitem .text {
        width: calc(100% - 144px);
        margin-top: 0
    }
}

.achieve {
    padding: 187px 0 131px
}

@media screen and (max-width:842px) {
    .achieve {
        padding: 157px 0 102px;
        overflow: hidden
    }
}

.achieve_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.achieve_inner .datas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 90px 50px;
    margin-top: 110px
}

@media screen and (max-width:842px) {
    .achieve_inner .datas {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 100px
    }
}

.achieve_inner .datas .box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc((100% - 50px)/ 2);
    max-width: 388px;
    height: 355px;
    background-image: url(../../img/top/img_user_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

@media screen and (max-width:842px) {
    .achieve_inner .datas .box {
        width: 100%;
        min-width: 342px;
        height: 312px
    }
}

.achieve_inner .datas .box .image {
    position: absolute;
    top: 0;
    left: 50%;
    width: 231px;
    height: 110px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5
}

@media screen and (max-width:842px) {
    .achieve_inner .datas .box .image {
        height: auto
    }
}

.achieve_inner .datas .box .text {
    -webkit-transform: translate(10px, 12px);
    transform: translate(10px, 12px)
}

.achieve_inner .datas .box .text .txtimg {
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--black)
}

.achieve_inner .datas .box .text p {
    color: var(--black);
    text-align: center;
    font-family: "M PLUS Rounded 1c"
}

.achieve_inner .datas .box .text p.first {
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: .7px
}

@media screen and (max-width:640px) {
    .achieve_inner .datas .box .text p.first {
        font-size: 12.322px;
        letter-spacing: .616px
    }
}

.achieve_inner .datas .box .text p.second {
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 1px
}

@media screen and (max-width:842px) {
    .achieve_inner .datas .box .text p.second {
        font-size: 17.603px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: .88px
    }
}

.achieve_inner .cta {
    margin-top: 50px
}

@media screen and (max-width:842px) {
    .achieve_inner .cta {
        width: 100%
    }
}

.voice {
    padding: 56px 0 87px;
    border-radius: 20px;
    background-color: var(--primary-light)
}

@media screen and (max-width:842px) {
    .voice {
        padding-bottom: 36px
    }
}

.voice_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.voice_content .uservoice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 38px
}

@media screen and (max-width:640px) {
    .voice_content .uservoice {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.voice_content .uservoice:not(:first-child) {
    margin-top: 30px
}

.voice_content .uservoice .image {
    position: relative
}

.voice_content .uservoice .image img {
    width: 200px;
    height: 200px
}

.voice_content .uservoice .image figcaption {
    margin-top: 10px;
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: .6px
}

.voice_content .uservoice .message {
    position: relative;
    display: inline-block;
    width: calc(100% - 238px);
    padding: 34px 30px;
    color: #555;
    font-size: 16px;
    background: #fff;
    border: 1px solid var(--primary);
    border-radius: 20px;
    background-color: var(--white);
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

@media screen and (max-width:842px) {
    .voice_content .uservoice .message {
        padding: 20px 22px 20px
    }
}

@media screen and (max-width:640px) {
    .voice_content .uservoice .message {
        width: 100%;
        margin-top: 30px;
        padding: 18px 18px 12px
    }
}

.voice_content .uservoice .message::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -41px;
    margin-top: -13px;
    border: 13px solid transparent;
    border-right: 28px solid #fff;
    z-index: 10
}

@media screen and (max-width:640px) {
    .voice_content .uservoice .message::before {
        top: inherit;
        bottom: calc(100% - 1px);
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border-top-width: 24px;
        border-bottom-width: 24px;
        border-left-width: 13px;
        border-right-width: 13px;
        border-right-color: transparent;
        border-bottom-color: var(--white)
    }
}

.voice_content .uservoice .message::after {
    position: absolute;
    content: "";
    top: 50%;
    left: -44px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 30px solid var(--primary);
    z-index: 5
}

@media screen and (max-width:640px) {
    .voice_content .uservoice .message::after {
        top: inherit;
        bottom: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border-top-width: 25px;
        border-bottom-width: 25px;
        border-left-width: 14px;
        border-right-width: 14px;
        border-right-color: transparent;
        border-bottom-color: var(--primary)
    }
}

.voice_content .uservoice .message .text {
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px
}

@media screen and (max-width:640px) {
    .voice_content .uservoice .message .text {
        font-size: 14px;
        letter-spacing: .56px
    }
}

.step {
    padding: 187px 0 131px
}

@media screen and (max-width:842px) {
    .step {
        padding: 157px 0 102px
    }
}

.step_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.step_content .flowblock {
    margin-top: 50px
}

.step_content .flowblock .flowlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 22px 0
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist {
        gap: 13px 0
    }
}

.step_content .flowblock .flowlist>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0 39px;
    width: 100%
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div {
        gap: 0 13px
    }
}

.step_content .flowblock .flowlist>div.first dt {
    width: 178px;
    height: 113px
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div.first dt {
        width: 145px;
        height: 91px
    }
}

@media screen and (max-width:640px) {
    .step_content .flowblock .flowlist>div.first dt {
        width: 54px;
        height: 100%
    }
}

.step_content .flowblock .flowlist>div.first dd .listinfo .listitem {
    border: 1px solid var(--primary-60)
}

.step_content .flowblock .flowlist>div.first dd .listinfo .listitem::after {
    border-top: 14px solid var(--primary-60);
    border-right: 10px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 10px solid transparent
}

.step_content .flowblock .flowlist>div.second dt {
    width: 178px;
    height: 179px
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div.second dt {
        width: 145px;
        height: 143px
    }
}

@media screen and (max-width:640px) {
    .step_content .flowblock .flowlist>div.second dt {
        width: 54px;
        height: 100%
    }
}

.step_content .flowblock .flowlist>div.second dd .listinfo .listitem {
    border: 1px solid var(--primary)
}

.step_content .flowblock .flowlist>div.second dd .listinfo .listitem::after {
    border-top: 14px solid var(--primary);
    border-right: 10px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 10px solid transparent
}

.step_content .flowblock .flowlist>div dt {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.step_content .flowblock .flowlist>div dt .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.step_content .flowblock .flowlist>div dt .bg img {
    width: 100%;
    height: 100%
}

.step_content .flowblock .flowlist>div dt .text {
    color: var(--white);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 1px;
    -webkit-transform: translateX(-12px);
    transform: translateX(-12px)
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div dt .text {
        text-align: center;
        font-size: 16px;
        line-height: 120%;
        letter-spacing: .8px;
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        text-orientation: upright
    }
}

.step_content .flowblock .flowlist>div dd {
    width: calc(100% - 217px)
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div dd {
        width: calc(100% - 158px)
    }
}

@media screen and (max-width:640px) {
    .step_content .flowblock .flowlist>div dd {
        width: calc(100% - 67px)
    }
}

.step_content .flowblock .flowlist>div dd .listinfo .listitem {
    position: relative;
    width: 100%;
    border-radius: 30px;
    background: var(--white)
}

.step_content .flowblock .flowlist>div dd .listinfo .listitem:not(.last)::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.step_content .flowblock .flowlist>div dd .listinfo .listitem:not(:first-child) {
    margin-top: 22px
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div dd .listinfo .listitem:not(:first-child) {
        margin-top: 13px
    }
}

.step_content .flowblock .flowlist>div dd .listinfo .listitem .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 9px 31px 9px 31px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    -ms-flex-item-align: stretch;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    color: var(--black);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: .9px
}

@media screen and (max-width:842px) {
    .step_content .flowblock .flowlist>div dd .listinfo .listitem .text {
        padding: 8px 16px;
        font-size: 14px;
        letter-spacing: .7px
    }
}

.faq {
    padding: 56px 0 112px;
    border-radius: 20px 20px 0 0;
    background-color: var(--primary-light)
}

@media screen and (max-width:842px) {
    .faq {
        padding: 55px 0 60px
    }
}

.faq_inner {
    width: calc(100% - 32px);
    max-width: 1000px;
    margin: 0 auto
}

.faq_content .faqlist {
    margin-top: 50px
}

@media screen and (max-width:842px) {
    .faq_content .faqlist {
        margin-top: 40px
    }
}

.faq_content .faqlist .faqitem>div:not(:first-child) {
    margin-top: 40px
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div:not(:first-child) {
        margin-top: 16px
    }
}

.faq_content .faqlist .faqitem>div dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 24px;
    padding: 12px;
    border-radius: 8px;
    background-color: var(--white)
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div dt {
        padding: 12px 10px;
        border-radius: 5px
    }
}

.faq_content .faqlist .faqitem>div dt .text {
    color: var(--black);
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.26px
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div dt .text {
        font-size: 16px;
        letter-spacing: 1.12px
    }
}

.faq_content .faqlist .faqitem>div dd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 24px;
    margin-top: 12px;
    padding: 12px
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div dd {
        margin-top: 8px;
        padding: 12px 10px
    }
}

.faq_content .faqlist .faqitem>div dd .text {
    color: var(--black);
    font-family: "M PLUS Rounded 1c";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: .64px
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div dd .text {
        font-size: 14px;
        letter-spacing: .56px
    }
}

.faq_content .faqlist .faqitem>div .icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 56px;
    height: 56px;
    padding: 10px 18px 11px 19px;
    border-radius: 4px;
    background: var(--primary)
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div .icon {
        width: 40px;
        height: 40px;
        padding: 7px 12px
    }
}

.faq_content .faqlist .faqitem>div .icon .num {
    color: var(--white);
    font-family: Barlow;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%
}

@media screen and (max-width:842px) {
    .faq_content .faqlist .faqitem>div .icon .num {
        font-size: 22px;
        font-weight: 400;
        line-height: 110%
    }
}

.ctablock {
    background-color: var(--primary-light);
    padding-bottom: 39px
}

@media screen and (max-width:842px) {
    .ctablock {
        padding-bottom: 30px
    }
}

.ctablock .cta {
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0
}

.ctablock .cta_inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 97px 0
}

@media screen and (max-width:842px) {
    .ctablock .cta_inner {
        padding: 30px 0
    }
}

@media screen and (max-width:842px) {
    .ctablock .cta .comment {
        width: calc(100% - 32px);
        margin: 15px auto 0
    }
}