.welcome {
    --sblue: #35bde8;
    --dblue: #1886e8;
    --orange: #f28a18;
    --welcome-inner-width: 1000px;
    --welcome-inner-wide-width: 1200px;
    --txt-color: #68767c;
    color: var(--txt-color);
    background: linear-gradient(110deg, #fff, #dff8fa 58%, #cdf8f2)
}

.welcome img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

.welcome-hero {
    width: 920px;
    margin: 0 auto -1.25em;
}

.welcome-main {
    width: 100%;
    margin: auto
}

.welcome-inner {
    width: min(var(--welcome-inner-width), calc(100% - 30px));
    margin-right: auto;
    margin-left: auto
}

.welcome-inner--wide {
    width: min(var(--welcome-inner-wide-width), calc(100% - 30px))
}

.welcome-hero__title {
    display: block;
    padding-top: 2.5em;
    margin-bottom: 1em;
}

@media(max-width:767px) {

    .welcome-hero__title {
        width: 75%;
        margin: 0 auto .5em;
    }

    .welcome-hero__title {
        padding-top: 20px
    }
}

.welcome-hero__img {
    max-width: 820px;
    margin: 0 auto;
}

@media(max-width:767px) {

    .welcome-hero,
    .welcome-main {
        width: 100%
    }

    .welcome-hero__title {
        padding-top: 20px
    }
}

.welcome-inner.service-comparison__inner {
    display: flex;
    overflow: hidden;
    border: 4px solid var(--sblue);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
}

@media screen and (max-width:767px) {
    .welcome-inner.service-comparison__inner {
        flex-wrap: wrap;
    }
}

.welcome-inner.service-comparison__inner .service-card {
    position: relative;
    width: 50%;
    padding: 30px 55px 34px;
    text-align: center
}

@media screen and (max-width:767px) {
    .welcome-inner.service-comparison__inner .service-card {
        width: 100%;
        padding: 1em;
    }
}

.service-card+.service-card:before {
    position: absolute;
    inset: 35px auto 35px 0;
    width: 1px;
    background: var(--sblue);
    content: ""
}

.service-card__title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(1.3em, 5vw);
    font-weight: 600;
}

.service-card__title i {
    display: block;
    width: 2em;
    margin-right: .5em;
}

.service-card__title .txt-color {
    color: var(--txt-color);
}

.service-visual {
    width: 310px;
    margin: 20px auto 7px
}

.service-card__description {
    font-size: min(.92em, 3.2vw);
    line-height: 1.8;
    text-align: left
}

@media(max-width:767px) {
    .service-comparison__inner {
        display: block;
    }

    .service-card {
        width: 100%;
        padding: 24px
    }

    .service-card+.service-card:before {
        inset: 0 24px auto;
        width: auto;
        height: 1px
    }
}

.button {
    position: relative;
    display: inline-block;
    margin-top: 1em;
    padding: .5em 2em;
    border-radius: 999px;
    background: var(--blue-gradient);
    color: #fff;
    font-size: min(.8em, 3.2vw);
    font-weight: 700;
    text-align: center
}

.button:after {
    position: absolute;
    top: 50%;
    right: .75em;
    width: .5em;
    height: .5em;
    border-top: 1px solid;
    border-right: 1px solid;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.button:hover {
    opacity: .75
}

.guide-panel {
    margin-top: min(3em, 6vw);
    padding: min(3em, 6vw);
    border: 1px solid #cbd9dd;
    border-radius: 8px;
    background: rgba(255, 255, 255, .8)
}

@media(max-width:767px) {
    .guide-panel {
        margin-top: 35px;
        padding: 35px 18px
    }
}

.heading {
    margin-bottom: 2em;
    color: var(--sblue);
    text-align: center
}

.heading .heading-icon {
    display: block;
    width: 3em;
    height: 3em;
    border: 2px solid;
    border-radius: 100%;
    margin: 1em auto;
}

.heading__title {
    color: var(--txt-color);
    font-size: min(1.5em, 4.5vw);
    font-weight: 600;
}

.heading__lead {
    margin-top: .5em;
    font-size: min(1.1em, 3.5vw);
    font-weight: 600;
}

.heading__lead strong {
    font-size: 1.5em;
    font-weight: 600;
    display: inline-block;
    padding: 0 .2em;
}

.heading__lead:before {
    margin-right: 1em;
    content: "＼"
}

.heading__lead:after {
    margin-left: 1em;
    content: "／"
}

@media(max-width:767px) {
    .heading__title {
        font-size: 17px
    }

    .heading__lead {
        font-size: 13px;
        line-height: 1.6
    }

    .heading__lead:before {
        margin-right: 5px
    }

    .heading__lead:after {
        margin-left: 5px
    }
}

.step-section,
.point-section,
.help-section {
    position: relative
}

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

.step-list__item {
    position: relative;
    width: 30.8%;
    padding: 1.2em;
    border: 2px solid #c7edf7;
    background: #fff;
    text-align: center;
    border-radius: .5em;
}

.step-list__item:not(:last-child):after {
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    right: -1.5em;
    color: var(--sblue);
    content: "";
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
}

.step-head {
    display: flex;
    align-items: center;
    text-align: left
}

.step-head__number {
    color: var(--sblue);
    font-size: 2.2em;
    line-height: 1;
    font-weight: 400;
    border-right: 1px solid;
    text-align: center;
    padding-right: .5em;
}

.step-head__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
}

.step-head__title {
    margin-left: 18px;
    color: var(--sblue);
    font-size: min(1em, 4vw);
    font-weight: 700;
    line-height: 1.5
}

.step-list__item>img {
    width: 185px;
    margin-top: 10px
}

.step-list__description {
    font-size: min(.85em, 3.2vw);
    line-height: 1.6;
    margin: 1.5em auto .5em;
}

.step-miraion {
    position: absolute;
    right: -62px;
    bottom: 112px;
    width: 70px
}

@media(max-width:767px) {
    .step-list {
        display: block
    }

    .step-list__item {
        width: 100%;
        margin-bottom: 20px
    }

    .step-list__item:not(:last-child):after {
        top: auto;
        right: 0;
        bottom: -31px;
        left: 0;
        transform: rotate(90deg)
    }

    .step-miraion {
        display: none
    }
}

.point-section {
    margin-top: 68px
}

.point-list {
    display: flex;
    border: 1px solid #cbd9dd;
    background: #fff
}

.point-card {
    position: relative;
    width: 33.333%;
    min-height: 420px;
    padding: 25px 28px 22px;
    text-align: center
}

.point-card+.point-card:before {
    position: absolute;
    inset: 25px auto 25px 0;
    width: 1px;
    background: #cbd9dd;
    content: ""
}

.point-card__label {
    display: block;
    width: fit-content;
    margin: 0 auto 1.5em;
    color: var(--sblue);
    font-size: 1.1em;
    font-weight: 600;
    position: relative;
}

.point-card__label span {
    display: inline-block;
    font-size: 1.8em;
}

.point-card__label::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid;
    margin-top: .2em;
}

.point-card__label::before {
    content: '';
    display: block;
    width: .7em;
    height: .7em;
    background-color: #fff;
    border-right: 1px solid;
    position: absolute;
    bottom: -.2em;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, 2px) rotate(45deg);

}

.point-card__title {
    margin: .5em 0 .75em;
    color: var(--sblue);
    font-size: min(1.15em, 3.5vw);
    font-weight: 600;
    line-height: 1.6;
}

.point-card__description {
    font-size: min(.9em, 3.2vw);
    line-height: 1.8;
    margin-bottom: 1em;
}

.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5em;
    margin-top: 6px
}

.feature-grid .feature-grid-box {
    padding: .5em 0 0;
    border: 2px solid var(--dblue);
    border-radius: 5px;
    color: var(--dblue);
    font-size: min(.8em, 3vw);
    font-weight: 700
}

.feature-grid .feature-grid-box:nth-child(2) {
    border-color: var(--orange);
    color: var(--orange)
}

.feature-grid .feature-grid-box:nth-child(3) {
    border-color: var(--sblue);
    color: var(--sblue)
}

.feature-grid .feature-grid-box:nth-child(4) {
    border-color: #45c924;
    color: #45c924
}

.feature-grid .feature-grid-box-title {
    display: block;
    margin-bottom: 2px
}

.feature-grid img {
    width: 80px
}

.button--wide {
    width: 100%;
}

.device-link {
    display: flex;
    align-items: center;
    margin: 1em auto;
    padding: .75em;
    border: 2px solid var(--sblue);
    border-radius: 4px;
    color: #45555d;
    font-size: min(.8em, 3vw);
    text-align: left;
    position: relative;
}

.device-link img {
    width: 180px;
    margin-right: 10px
}

.device-link .arrow {
    display: block;
    width: 1.7em;
    height: 1.7em;
    background: var(--blue-gradient);
    border-radius: 100%;
    position: absolute;
    bottom: .7em;
    right: .7em;
}

.device-link .arrow::after {
    content: '';
    width: .5em;
    height: .5em;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-66%, -50%) rotate(45deg);
}

.point-list__app-image {
    width: 196px;
    margin: 1px auto 4px
}

.point-miraion {
    display: block;
    position: absolute;
    left: 120px;
    top: 22px;
    width: 100px;
}

@media(max-width:767px) {
    .point-list {
        display: block;
        border: 0;
        background: transparent
    }

    .point-card {
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #cbd9dd;
        background: #fff
    }

    .point-card+.point-card:before {
        display: none
    }

    .point-miraion {
        display: none
    }
}

.help-section {
    margin-top: 75px
}

.help-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
}

.help-list .help-banner {
    overflow: hidden;
    display: grid;
    grid-template-columns: 45% 55%;
    border: 1px solid #cbd9dd;
    border-radius: .5em;
    background: #fff;
}

.help-list .txt-box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.help-list .help-banner-title {
    color: #52636b;
    font-size: min(.9em, 3.2vw);
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.help-list .arrow {
    display: block;
    width: .7em;
    height: .7em;
    color: var(--dblue);
    border-top: 1px solid;
    border-right: 1px solid;
    position: absolute;
    top: 50%;
    right: .5em;
    transform: translateY(-50%) rotate(45deg);
}

.solution-miraion {
    position: absolute;
    right: 10px;
    bottom: calc(100% - 20px);
    width: 80px;
    z-index: 1
}

@media(max-width:767px) {
    .help-list {
        display: block
    }

    .help-banner {
        width: 100%;
        margin-bottom: 20px
    }

    .solution-miraion {
        display: none
    }
}

.popular-section {
    margin-top: 5em;
    padding: 5em 0;
    background-color: rgba(255, 255, 255, .7);
}

.heading--simple {
    margin-bottom: 30px
}

.heading--simple .heading__title {
    color: var(--dblue)
}

.heading--simple .heading__title:before {
    content: "＼ "
}

.heading--simple .heading__title:after {
    content: " ／"
}

.popular-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.popular-list .popular-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid #cbd9dd;
    border-radius: 4px;
    background-color: #fff;
}

@media screen and (max-width:767px) {
    .popular-list .popular-banner {
        grid-template-columns: 42% 58%;
    }

    .popular-list .popular-banner figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.popular-list .txt-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    color: #53646c;
    font-size: min(.95em, 3vw);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.popular-list .button {
    width: 100%;
    max-width: 180px;
}

.popular-list .button--orange {
    background: var(--orange)
}

.popular-list .button--dblue {
    background: #0784ca
}

.popular-list .button--sblue {
    background: #0784ca
}

.popular-list .button--green {
    background: #42c915
}

@media(max-width:767px) {
    .popular-list {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .popular-list .txt-box {
        padding: 12px;
        font-size: 12px
    }

}

.award-area {
    padding: 65px 0 80px;
    background: rgba(255, 255, 255, .3)
}

.award-card {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 28px 38px;
    overflow: hidden;
    border: 2px solid #62ca50;
    border-radius: 4px;
    background: #fff
}

.marker {
    background: linear-gradient(transparent 60%, #f2fc5a 60%, #f2fc5a 96%, transparent 96%);
}

.award-card>img {
    width: 50%
}

.award-copy {
    width: 50%;
    padding-left: 28px;
    color: var(--txt-color);
}

.award-copy__lead {
    font-size: min(1em, 3.2vw);
}

.award-copy__title {
    margin: .2em 0 .5em;
    font-size: min(2em, 4vw);
    font-weight: 700
}

.award-copy__description {
    font-size: min(.9em, 3.2vw);
    line-height: 1.9
}

.home {
    text-align: center
}

.home__link {
    position: relative;
    display: inline-block;
    min-width: 320px;
    padding: 18px 50px;
    border: 1px solid #cbd9dd;
    border-radius: 4px;
    background: #fff;
    color: var(--dblue);
    font-size: 18px;
    font-weight: 800
}

.home__label {
    display: block;
    color: #66757b;
    font-size: 11px
}

.home__arrow {
    display: block;
    width: .7em;
    height: .7em;
    color: var(--txt-color);
    border-top: 1px solid;
    border-right: 1px solid;
    position: absolute;
    top: 50%;
    left: .75em;
    transform: translateY(-50%) rotate(-135deg);
}

.home-logo {
    display: block;
    width: 155px;
    height: auto;
    margin: 0 auto 5px
}

@media(max-width:767px) {
    .award-area {
        padding: 2em 1em;
    }

    .award-area .welcome-inner {
        width: 96%;
    }

    .award-card {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        padding: 22px
    }

    .award-card>img,
    .award-copy {
        width: 100%
    }

    .award-copy {
        padding: 20px 0 0
    }

    .award-copy__title {
        font-size: 19px
    }

    .home__link {
        min-width: 280px
    }

    .home-logo {
        width: 145px
    }
}

/* signup welcome*/
.registration_welcome .illust {
    mix-blend-mode: unset;
}

@media screen and (max-width:767px) {
    .signup .registration_welcome .inner {
        padding: 0;
        display: contents;
    }

    .point-card__description,
    .heading__lead,
    .step-list__description {
        text-align: center !important;
    }
}

.signup .popular-section .welcome-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
}

.signup .guide-panel {
    width: 100%;
}

.signup .popular-section .welcome-inner.welcome-inner--wide .button.button--orange {
    background-color: #f28a18;
}