@charset "UTF-8";
/*------------------------------------------
  Base Layout
------------------------------------------*/
.lp-main {
    position: relative;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: 3.73333vw;
    color: #716d6d;
    background: #ffeff7;
    line-height: 1.5384;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
}
.lp-main.is--active {
    opacity: 1;
    transition: .8s;
}
.lp-main__left {
    display: none;
}
.lp-main__contents {
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: url(../images/bg.webp) repeat-y center;
    background-size: 100%;
}
.lp-main section {
    position: relative;
}
.lp-main img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.lp-main a {
    color: #716d6d;
}
.lp-main a:hover {
    text-decoration: none;
}

@media only screen and (min-width: 768px) {
    .lp-main {
        font-size: 15px;
    }
    .lp-main__in {
        display: flex;
    }
    .lp-main__contents {
        width: 400px;
        margin-left: auto;
    }
}

footer .block-page-top {
    display: none !important;
}

#footer_top {
    margin-top: 0;
}

@media only screen and (min-width: 751px) {
    .pane-footer {
        z-index: 1000;
    }
}

/*------------------------------------------
  layout
------------------------------------------*/
.l-inner {
    padding: 0 4.26667vw;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 768px) {
    .l-inner {
        padding: 0 17px;
    }
}

.lp-pagetop {
    display: none;
    position: fixed;
    bottom: 70px;
    right: 2.66667vw;
    width: 10.66667vw;
    transition: opacity .3s;
    z-index: 9;
}
.lp-pagetop a {
    display: block;
}

@media only screen and (min-width: 768px) {
    .lp-pagetop {
        right: 10px;
        width: 43px;
        bottom: 40px;
    }
}

.lp-checkbtn {
    position: fixed;
    bottom: 70px;
    left: 2.66667vw;
    transition: opacity .3s;
    z-index: 9;
}
.lp-checkbtn a {
    display: block;
    position: relative;
    width: 23.46667vw;
    height: 23.73333vw;
}
.lp-checkbtn span {
    position: absolute;
}
.lp-checkbtn .btn {
    bottom: 0;
    left: 0;
    width: 13.6vw;
    -webkit-animation: yurayura01 .6s steps(2) 0s alternate infinite;
            animation: yurayura01 .6s steps(2) 0s alternate infinite;
}
.lp-checkbtn .btn-label {
    top: 0;
    right: 0;
    width: 23.2vw;
}

@media only screen and (min-width: 768px) {
    .lp-checkbtn {
        bottom: 40px;
        left: auto;
        right: 696px;
    }
    .lp-checkbtn a {
        width: 94px;
        height: 95px;
    }
    .lp-checkbtn .btn {
        width: 54px;
    }
    .lp-checkbtn .btn-label {
        width: 93px;
    }
}

.pc-left {
    display: none;
}

@media only screen and (min-width: 768px) {
    /*
.pc-left {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: calc(100% - 800px);
    min-width: 464px;
    height: 100vh;
    &__inner {
        width: 100%;
        height: 100%;
        display: flex;
        -webkit-align-items: flex-end;
                align-items: flex-end;
        -webkit-justify-content: center;
                justify-content: center;
    }
}
*/
    .pc-left {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0 20px;
        width: calc(100% - 800px);
        min-width: 464px;
        height: 100vh;
        background: url(../images/pc-left-bg.webp) no-repeat center bottom;
        background-size: 100%;
    }
    .pc-left:before, .pc-left:after {
        content: "";
        width: 187px;
        height: 475px;
        position: absolute;
        top: 168px;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .pc-left:before {
        left: 0;
        background-image: url(../images/pc-left-illust01.webp);
    }
    .pc-left:after {
        right: 0;
        background-image: url(../images/pc-left-illust02.webp);
    }
    .pc-left__inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pc-left .pc-img {
        padding-left: 10px;
        position: relative;
        z-index: 1;
    }
    .pc-left .pc-img img {
        max-width: 502px;
    }
}

.pc-right {
    display: none;
}

@media only screen and (min-width: 768px) {
    .pc-right {
        display: block;
        position: relative;
        height: 100vh;
        width: 400px;
    }
    .pc-right .pc-nav {
        width: 343px;
        position: fixed;
        left: 889px;
        top: 220px;
    }
    .pc-right .pc-nav li {
        padding-left: 17px;
    }
    .pc-right .pc-nav a:after {
        content: none;
    }
    .pc-right .pc-nav .label {
        left: -17px;
    }
}

@media only screen and (min-width: 1279px) {
    .pc-right .pc-nav {
        left: auto;
        right: 35px;
    }
}

/*------------------------------------------
  contents
------------------------------------------*/
/* ========== mv ========== */
.mv-img {
    margin: 0;
}
.mv-img img {
    width: 100%;
}

.sec {
    position: relative;
}
.sec-inner {
    position: relative;
}

/* ========== lead ========== */
.sec--lead {
    padding: 12.53333vw 0 10.66667vw;
}
.sec--lead .lead-visual {
    margin-top: 10.66667vw;
}

@media only screen and (min-width: 768px) {
    .sec--lead {
        padding: 50px 0 43px;
    }
    .sec--lead .lead-visual {
        margin-top: 43px;
    }
}

/* ========== step ========== */
.sec--step {
    margin-bottom: 42.66667vw;
}
.sec--step .step-head {
    position: relative;
    padding: 0 0 2.66667vw;
}
.sec--step .step-head:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 135.46667vw;
    height: 100%;
    background: #fffef8;
    border-radius: 67.73333vw 67.73333vw 0 0/67.73333vw 67.73333vw 0 0;
}
.sec--step .step-head:after {
    content: "";
    width: 100%;
    height: 29.33333vw;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: -1px;
    background: url(../images/step-head-bg-bottom.webp) no-repeat center top;
    background-size: 100%;
}
.sec--step .step-head__inner {
    position: relative;
}
.sec--step .step-head .head-ttl {
    text-align: center;
    position: relative;
    margin: 0;
    padding-top: 10.13333vw;
}
.sec--step .step-head .head-ttl:before {
    content: "";
    width: 100%;
    height: 52.8vw;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/step-head-bg-top.webp) no-repeat center top;
    background-size: 100%;
}
.sec--step .step-head .head-ttl__lead {
    display: block;
    position: relative;
}
.sec--step .step-head .head-ttl__lead img {
    width: 42.93333vw;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
}
.sec--step .step-head .head-ttl__lead:before {
    content: "";
    width: 11.46667vw;
    height: 8.53333vw;
    position: absolute;
    top: 5.86667vw;
    left: 50%;
    margin-left: 21.6vw;
    background: url(../images/star02.webp) no-repeat center center;
    background-size: 100%;
    opacity: 0;
}
.sec--step .step-head .head-ttl__ttl {
    display: block;
    position: relative;
    line-height: 1.1;
    font-size: 17.6vw;
    letter-spacing: .05em;
    color: #65b8f7;
    font-family: "Marcellus", sans-serif;
    font-weight: 400;
    transform: translateY(-.3em);
}
.sec--step .step-head .head-ttl__ttl .num {
    font-size: 29.33333vw;
    color: #1594f5;
    margin-right: .1em;
}
.sec--step .step-head .head-ttl__ttl span {
    display: inline-block;
    opacity: 0;
    transform: rotateY(180deg);
    transform-origin: center;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__lead img {
    transition: .6s;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__lead:before {
    opacity: 1;
    transition: .6s .6s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl span {
    opacity: 1;
    transform: rotateY(0);
    transition: opacity .6s, transform .3s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt2 {
    transition-delay: .1s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt3 {
    transition-delay: .2s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt4 {
    transition-delay: .3s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt5 {
    transition-delay: .4s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt6 {
    transition-delay: .5s;
}
.sec--step .step-head .head-ttl.js-scr-active .head-ttl__ttl .txt7 {
    transition-delay: .6s;
}
.sec--step .step-head .head-message {
    margin-top: 14.66667vw;
}
.sec--step .step-list {
    position: relative;
    padding: 37.33333vw 0 48vw;
}
.sec--step .step-list__inner {
    position: relative;
}
.sec--step .step-list .list-item {
    margin-bottom: 16vw;
    position: relative;
}
.sec--step .step-list .list-item:last-child {
    margin-bottom: 0;
}
.sec--step .step-list .list-item__ttl {
    margin-bottom: 8vw;
}
.sec--step .step-list .list-item__lead {
    margin-bottom: 2.66667vw;
    text-align: left;
}
.sec--step .step-list .list-item__lead .ttl {
    color: #f4b8d3;
    font-size: 170%;
    font-weight: 700;
    text-align: center;
}
.sec--step .step-list .list-item__products .products-ttl {
    margin-bottom: 2.66667vw;
}
.sec--step .step-list .list-item__products .products {
    display: block;
    background: #fff;
    padding: 5.33333vw 4vw;
    margin-bottom: 5.33333vw;
    border-radius: 20px;
    text-decoration: none;
}
.sec--step .step-list .list-item__products .products:last-child {
    margin-bottom: 0;
}
.sec--step .step-list .list-item__products .products-head {
    display: flex;
}
.sec--step .step-list .list-item__products .products-head.center {
    align-items: center;
}
.sec--step .step-list .list-item__products .products-head__img {
    width: 43%;
}
.sec--step .step-list .list-item__products .products-head__txt {
    width: 57%;
    margin-left: auto;
    position: relative;
}
.sec--step .step-list .list-item__products .products-head__txt.bottom .price {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
}
.sec--step .step-list .list-item__products .products-head .name {
    color: #1594f5;
}
.sec--step .step-list .list-item__products .products-head .price {
    line-height: 1.466;
    margin-bottom: .3em;
}
.sec--step .step-list .list-item__products .products-head .price .yen {
    font-size: 4.8vw;
}
.sec--step .step-list .list-item__products .products-head .price .num {
    font-size: 6.4vw;
}
.sec--step .step-list .list-item__products .products-foot {
    margin-top: 5.33333vw;
    padding-top: 5.33333vw;
    background: url(../images/dott.webp) repeat-x center top;
    background-size: 4.26667vw;
}
.sec--step .step-list .list-item__products .products-foot__txt {
    font-weight: 500;
    font-size: 3.46667vw;
    line-height: 1.7;
}
.sec--step .step-list .list-item__products .products-foot__txt p {
    margin-bottom: 1.5em;
}
.sec--step .step-list .list-item__products .products-foot__txt p:last-child {
    margin-bottom: 0;
}
.sec--step .step-list .list-item__products .products-foot__txt ul {
    margin-bottom: 1.5em;
}
.sec--step .step-list .list-item__products .products-foot__txt ul:last-child {
    margin-bottom: 0;
}
.sec--step .step-list .list-item__products .products-foot__txt ul li {
    font-weight: 700;
    margin-bottom: .3em;
}
.sec--step .step-list .list-item__products .products-foot__txt ul li:last-child {
    margin-bottom: 0;
}
.sec--step .step-list .list-item__products .products-foot__txt .sub {
    font-size: 80%;
}
.sec--step .step-list .list-item__products .products-foot__btn {
    text-align: right;
    margin-top: .5em;
}
.sec--step .step-list .list-item__products .products-foot__btn a, .sec--step .step-list .list-item__products .products-foot__btn span {
    cursor: pointer;
    display: inline-block;
}
.sec--step .step-list .list-item__products .products-foot__btn img {
    width: 26.93333vw;
    -webkit-animation: 2s ease-in-out 0s infinite normal none running flash;
            animation: 2s ease-in-out 0s infinite normal none running flash;
}
.sec--step .step-list .list-item__more {
    margin-top: 8vw;
    padding: 0 5.33333vw;
}
.sec--step .step-list .list-item__more a {
    display: block;
}
.sec--step .step-list .list-item__more img {
    width: 100%;
}
.sec--step .step-foot {
    background: #f2e0ff;
    position: relative;
}
.sec--step .step-foot:before, .sec--step .step-foot:after {
    content: "";
    width: 100%;
    height: 29.33333vw;
    position: absolute;
    left: 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
.sec--step .step-foot:before {
    bottom: 100%;
    margin-bottom: -1px;
    background-image: url(../images/step-foot-bg-top.webp);
    background-position: center bottom;
}
.sec--step .step-foot:after {
    top: 100%;
    margin-top: -1px;
    background-image: url(../images/step-foot-bg-bottom.webp);
    background-position: center top;
}
.sec--step .step-foot__inner {
    position: relative;
}
.sec--step .step-foot .foot-lead {
    margin-bottom: 6.66667vw;
}
.sec--step .step-foot .foot-lead__ttl {
    width: 88%;
    height: 13.33333vw;
    background: #ff8d09;
    color: #ffff29;
    letter-spacing: .06em;
    font-size: 6.4vw;
    border-radius: 20px 20px 0 0 / 20px 20px 0 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec--step .step-foot .foot-lead__ttl .star {
    position: relative;
    width: 3.73333vw;
    height: 100%;
    background: url(../images/star01.webp) no-repeat center;
    background-size: 100%;
}
.sec--step .step-foot .foot-lead__ttl .star:first-child {
    margin-right: .4em;
}
.sec--step .step-foot .foot-lead__ttl .star:last-child {
    margin-left: .4em;
}
.sec--step .step-foot .foot-lead__txt {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #ff8d09;
    padding: 8vw 5.33333vw;
    line-height: 2.14;
    font-size: 3.46667vw;
}
.sec--step .step-foot .foot-lead__txt .name {
    text-align: center;
}
.sec--step .step-foot .foot-more {
    margin-bottom: 17.06667vw;
}
.sec--step .step-foot .foot-more__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f255c8;
    font-size: 5.06667vw;
    letter-spacing: 0;
    padding-bottom: 9.6vw;
    margin-bottom: 4vw;
    background: url(../images/balloon.webp) no-repeat center bottom;
    background-size: 100%;
}
.sec--step .step-foot .foot-more__sub {
    font-size: 3.2vw;
    padding: 0 5.33333vw;
    margin-top: .8em;
}
.sec--step .step-foot .foot-more__btn {
    padding: 0 5.33333vw;
}
.sec--step .step-foot .foot-profile {
    color: #716d6d;
    margin-bottom: 10.66667vw;
}
.sec--step .step-foot .foot-profile__head {
    display: flex;
    align-items: center;
    margin-bottom: 5.33333vw;
}
.sec--step .step-foot .foot-profile__head .head-img {
    width: 34%;
}
.sec--step .step-foot .foot-profile__head .head-img img {
    border-radius: 50%;
}
.sec--step .step-foot .foot-profile__head .head-txt {
    width: 60%;
    margin-left: auto;
    text-align: left;
    line-height: 1.4;
}
.sec--step .step-foot .foot-profile__head .head-txt .lead {
    color: #2b98b1;
    margin-bottom: .5em;
}
.sec--step .step-foot .foot-profile__head .head-txt .name span {
    font-size: 5.33333vw;
}
.sec--step .step-foot .foot-profile__txt {
    text-align: left;
    font-size: 3.46667vw;
    line-height: 1.69;
}
.sec--step .step-foot .foot-interview {
    height: 54.4vw;
    padding-top: 11.73333vw;
    position: relative;
    text-align: center;
    background: url(../images/interview-bg.webp) no-repeat center;
    background-size: 100%;
}
.sec--step .step-foot .foot-interview__txt {
    font-size: 4.8vw;
    line-height: 1.55;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
}
.sec--step .step-foot .foot-interview__txt span {
    color: #fd7ddb;
}
.sec--step .step-foot .foot-interview__btn {
    position: relative;
    z-index: 1;
}
.sec--step .step-foot .foot-interview__btn a {
    display: inline-block;
    width: 31.73333vw;
}
.sec--step .step-foot .foot-interview .illust {
    position: absolute;
}
.sec--step .step-foot .foot-interview .illust01 {
    width: 8.53333vw;
    left: 11.2vw;
    bottom: 9.6vw;
    -webkit-animation: yurayura01 .6s steps(2) 0s alternate infinite;
            animation: yurayura01 .6s steps(2) 0s alternate infinite;
}
.sec--step .step-foot .foot-interview .illust02 {
    width: 13.6vw;
    right: 12.8vw;
    bottom: 11.46667vw;
    -webkit-animation: yurayura02 .6s steps(2) 0s alternate infinite;
            animation: yurayura02 .6s steps(2) 0s alternate infinite;
}

@media only screen and (min-width: 768px) {
    .sec--step {
        margin-bottom: 170px;
    }
    .sec--step .step-head {
        padding: 0 0 11px;
    }
    .sec--step .step-head:before {
        width: 542px;
        border-radius: 270px 270px 0 0 / 270px 270px 0 0;
    }
    .sec--step .step-head:after {
        height: 117px;
    }
    .sec--step .step-head .head-ttl {
        padding-top: 40px;
    }
    .sec--step .step-head .head-ttl:before {
        height: 211px;
    }
    .sec--step .step-head .head-ttl__lead img {
        width: 172px;
    }
    .sec--step .step-head .head-ttl__lead:before {
        width: 46px;
        height: 34px;
        top: 24px;
        margin-left: 86px;
    }
    .sec--step .step-head .head-ttl__ttl {
        font-size: 70px;
    }
    .sec--step .step-head .head-ttl__ttl .num {
        font-size: 117px;
    }
    .sec--step .step-head .head-message {
        margin-top: 60px;
    }
    .sec--step .step-list {
        padding: 150px 0 192px;
    }
    .sec--step .step-list .list-item {
        margin-bottom: 65px;
    }
    .sec--step .step-list .list-item__ttl {
        margin-bottom: 32px;
    }
    .sec--step .step-list .list-item__lead {
        margin-bottom: 11px;
    }
    .sec--step .step-list .list-item__thumb {
        margin-bottom: 21px;
    }
    .sec--step .step-list .list-item__thumb p {
        font-size: 21px;
    }
    .sec--step .step-list .list-item__products .products-ttl {
        margin-bottom: 11px;
    }
    .sec--step .step-list .list-item__products .products {
        padding: 21px 16px;
        margin-bottom: 21px;
    }
    .sec--step .step-list .list-item__products .products-head .price .yen {
        font-size: 19px;
    }
    .sec--step .step-list .list-item__products .products-head .price .num {
        font-size: 26px;
    }
    .sec--step .step-list .list-item__products .products-foot {
        margin-top: 21px;
        padding-top: 21px;
        background-size: 17px;
    }
    .sec--step .step-list .list-item__products .products-foot__txt {
        font-size: 14px;
    }
    .sec--step .step-list .list-item__products .products-foot__btn img {
        width: 108px;
    }
    .sec--step .step-list .list-item__more {
        margin-top: 32px;
        padding: 0 22px;
    }
    .sec--step .step-list .list-item__more a {
        transition: opacity .3s;
    }
    .sec--step .step-list .list-item__more a:hover {
        opacity: .7;
    }
    .sec--step .step-foot:before, .sec--step .step-foot:after {
        height: 117px;
    }
    .sec--step .step-foot .foot-lead {
        margin-bottom: 27px;
    }
    .sec--step .step-foot .foot-lead__ttl {
        height: 53px;
        font-size: 26px;
    }
    .sec--step .step-foot .foot-lead__ttl .star {
        width: 15px;
    }
    .sec--step .step-foot .foot-lead__txt {
        padding: 32px 21px;
        font-size: 14px;
    }
    .sec--step .step-foot .foot-more {
        margin-bottom: 68px;
    }
    .sec--step .step-foot .foot-more__lead {
        font-size: 20px;
        padding-bottom: 38px;
        margin-bottom: 16px;
    }
    .sec--step .step-foot .foot-more__sub {
        font-size: 13px;
        padding: 0 20px;
    }
    .sec--step .step-foot .foot-more__btn {
        padding: 0 20px;
    }
    .sec--step .step-foot .foot-more__btn a {
        transition: opacity .3s;
    }
    .sec--step .step-foot .foot-more__btn a:hover {
        opacity: .7;
    }
    .sec--step .step-foot .foot-profile {
        margin-bottom: 43px;
    }
    .sec--step .step-foot .foot-profile__head {
        margin-bottom: 21px;
    }
    .sec--step .step-foot .foot-profile__head .head-txt .name span {
        font-size: 21px;
    }
    .sec--step .step-foot .foot-profile__txt {
        font-size: 14px;
    }
    .sec--step .step-foot .foot-interview {
        height: 217px;
        padding-top: 46px;
    }
    .sec--step .step-foot .foot-interview__txt {
        font-size: 19px;
    }
    .sec--step .step-foot .foot-interview__btn a {
        width: 127px;
        transition: opacity .3s;
    }
    .sec--step .step-foot .foot-interview__btn a:hover {
        opacity: .7;
    }
    .sec--step .step-foot .foot-interview .illust01 {
        width: 34px;
        left: 46px;
        bottom: 40px;
    }
    .sec--step .step-foot .foot-interview .illust02 {
        width: 54px;
        right: 52px;
        bottom: 46px;
    }
}

/* ========== bnr ========== */
.sec--bnr {
    padding-bottom: 41.06667vw;
}
.sec--bnr .bnr-ttl {
    margin-bottom: 5.33333vw;
}
.sec--bnr .bnr-list {
    position: relative;
    z-index: 1;
}
.sec--bnr .bnr-list li {
    margin-bottom: 5.33333vw;
    position: relative;
}
.sec--bnr .bnr-list li:last-child {
    margin-bottom: 0;
}
.sec--bnr .bnr-list .end:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(96, 96, 96, .6);
}
.sec--bnr .bnr-list .end:after {
    content: "終了しました";
    position: absolute;
    top: 50%;
    left: 50%;
    color: #e9f745;
    font-size: 6.4vw;
    transform: translate(-50%, -50%) rotate(-15deg);
    transform-origin: center;
    background: #7fa5f2;
    padding: .5em 1.5em;
    white-space: nowrap;
}
.sec--bnr .bnr-list .end a {
    pointer-events: none;
}
.sec--bnr .bnr-more {
    margin-top: 2.66667vw;
    text-align: center;
}
.sec--bnr .bnr-more a {
    display: inline-block;
    width: 31.73333vw;
}
.sec--bnr .illust {
    position: absolute;
    bottom: 0;
}
.sec--bnr .illust01 {
    left: 4.26667vw;
    width: 36.26667vw;
}
.sec--bnr .illust02 {
    right: -2.66667vw;
    width: 40.53333vw;
    -webkit-animation: yurayura01 .6s steps(2) 0s alternate infinite;
            animation: yurayura01 .6s steps(2) 0s alternate infinite;
}

@media only screen and (min-width: 768px) {
    .sec--bnr {
        padding-bottom: 164px;
    }
    .sec--bnr .bnr-ttl {
        margin-bottom: 22px;
    }
    .sec--bnr .bnr-list li {
        margin-bottom: 21px;
    }
    .sec--bnr .bnr-list .end:after {
        font-size: 26px;
    }
    .sec--bnr .bnr-list a {
        transition: opacity .3s;
    }
    .sec--bnr .bnr-list a:hover {
        opacity: .7;
    }
    .sec--bnr .bnr-more {
        margin-top: 12px;
    }
    .sec--bnr .bnr-more a {
        width: 124px;
    }
    .sec--bnr .illust01 {
        left: 17px;
        width: 145px;
    }
    .sec--bnr .illust02 {
        right: -11px;
        width: 162px;
    }
}

/*------------------------------------------
  component
------------------------------------------*/
.c-nav li {
    margin-bottom: 6.4vw;
}
.c-nav li:last-child {
    margin-bottom: 0;
}

.c-nav a {
    font-size: 4.53333vw;
    color: #1594f5;
    position: relative;
    display: flex;
    height: 18.66667vw;
    border-radius: 9.33333vw;
    align-items: center;
    justify-content: center;
    background: url(../images/step-nav-bg.webp) no-repeat center;
    background-size: cover;
}
.c-nav a:after {
    content: "";
    width: 8vw;
    height: 8vw;
    position: absolute;
    top: 50%;
    right: 2.66667vw;
    transform: translateY(-50%);
    background: url(../images/arrow-b01.webp) no-repeat center;
    background-size: 100%;
}

.c-nav .label {
    position: absolute;
    top: -5.33333vw;
    left: 0;
    width: 15.73333vw;
    height: 15.73333vw;
    background: url(../images/step-num-bg01.webp) no-repeat center;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Marcellus", sans-serif;
    font-weight: 400;
    color: #fd7ddb;
    font-size: 4.26667vw;
    letter-spacing: .01em;
}

@media only screen and (min-width: 768px) {
    .c-nav li {
        margin-bottom: 26px;
    }
    .c-nav a {
        font-size: 18px;
        height: 70px;
        border-radius: 35px;
        transition: opacity .3s;
        text-decoration: none !important;
    }
    .c-nav a:after {
        width: 32px;
        height: 32px;
        right: 11px;
    }
    .c-nav a:hover {
        opacity: .7;
    }
    .c-nav .label {
        top: -20px;
        width: 58px;
        height: 58px;
        font-size: 16px;
    }
}

.c-box01 {
    background: #fff;
    padding: 10.66667vw 5.33333vw 8vw;
    border-radius: 20px;
    position: relative;
    line-height: 2.14;
    text-align: center;
    font-size: 3.46667vw;
}
.c-box01:before {
    content: "";
    width: 100%;
    height: 13.33333vw;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -2px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.c-box01--pk {
    border: 1px solid #e35b7e;
}
.c-box01--pk:before {
    background-image: url(../images/ribbon-pk.webp);
}
.c-box01--og {
    border: 1px solid #ff8d09;
}
.c-box01--og:before {
    background-image: url(../images/ribbon-og.webp);
}
.c-box01--bl {
    border: 1px solid #2b98b1;
}
.c-box01--bl:before {
    background-image: url(../images/ribbon-bl.webp);
}

@media only screen and (min-width: 768px) {
    .c-box01 {
        padding: 43px 21px 32px;
        font-size: 14px;
    }
    .c-box01:before {
        height: 53px;
    }
}

.fadeIn {
    opacity: 0;
}
.fadeIn.js-scr-active {
    opacity: 1;
    transition: opacity 1s;
}

.fadeInOrderTxt span {
    opacity: 0;
    transform: translateY(50%);
}

.fadeInOrderTxt.js-scr-active span {
    opacity: 1;
    transform: translateY(0);
    transition: .4s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(2) {
    transition-delay: .1s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(3) {
    transition-delay: .2s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(4) {
    transition-delay: .3s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(5) {
    transition-delay: .4s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(6) {
    transition-delay: .5s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(7) {
    transition-delay: .6s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(8) {
    transition-delay: .7s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(9) {
    transition-delay: .8s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(10) {
    transition-delay: .9s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(11) {
    transition-delay: 1s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(12) {
    transition-delay: 1.1s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(13) {
    transition-delay: 1.2s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(14) {
    transition-delay: 1.3s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(15) {
    transition-delay: 1.4s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(16) {
    transition-delay: 1.5s;
}
.fadeInOrderTxt.js-scr-active span:nth-child(17) {
    transition-delay: 1.6s;
}

@-webkit-keyframes yurayura01 {
    0% {
        transform: rotate(-10deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    80% {
        transform: rotate(8deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

@keyframes yurayura01 {
    0% {
        transform: rotate(-10deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    80% {
        transform: rotate(8deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

@-webkit-keyframes yurayura02 {
    0% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(8deg);
    }
    80% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}

@keyframes yurayura02 {
    0% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(8deg);
    }
    80% {
        transform: rotate(-8deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}

@-webkit-keyframes flash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes flash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}