@charset "utf-8";
/* mv */
.mv {
    position: relative;
    color: var(--color-white);
    background-color: var(--color-green);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}
.mv_logo {
    background-color: var(--color-white);
    position: absolute;
    top: 0;
    left: 0;
}
.mv_lead {
    text-shadow: var(--text-shadow);
    letter-spacing: -0.05em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.mv_lead_sub {
    letter-spacing: 0.02em;
    text-shadow: none;
}
.mv_limited,
.mv_limited_inner {
    display: flex;
    justify-content: center;
    align-items: center;
}
.mv_limited_item {
    text-shadow: var(--text-shadow);
    background: url(../img/top/limited_ttl_bg.svg) no-repeat center/ 100%;
}
.mv_price_wrap,
.mv_price {
    display: flex;
    justify-content: center;
}
.mv_price_inner {
    display: flex;
    align-items: end;
}
.mv_price_inner > dt {
    color: var(--color-green);
    background-color: var(--color-white);
    border-radius: 30rem;
}
.mv_join_btn {
    border: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 260rem;
}
/* モーダル内 */
.info_content {
    background-color: var(--color-green);
}
.info_modal_ttl {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.info_modal_ttl::before,
.info_modal_ttl::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.info_modal_ttl::after {
    transform: translateY(-50%) scale(-1, 1);
}
.info_content_area {
    color: var(--color-body);
}
.info_content_ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.info_content_ttl_icon {
    transform: rotate(90deg);
}
.info_content_figure {
    display: flex;
    flex-direction: column-reverse;
}
.info_content_figure + .info_content_figure {
    border-top: solid 1px var(--color-gray);
}
.info_content_figcaption {
    text-align: left;
}
.info_content_figcaption::before {
    content: '※';
}
.info_tab_label:hover,
#info_tab1:checked ~ .tab_area .info_tab1_label,
#info_tab2:checked ~ .tab_area .info_tab2_label,
#info_tab3:checked ~ .tab_area .info_tab3_label,
#info_tab4:checked ~ .tab_area .info_tab4_label,
#info_tab5:checked ~ .tab_area .info_tab5_label,
#info_tab6:checked ~ .tab_area .info_tab6_label {
    background-color: var(--color-coral);
}
#info_tab1:focus-visible ~ .tab_area .info_tab1_label,
#info_tab2:focus-visible ~ .tab_area .info_tab2_label,
#info_tab3:focus-visible ~ .tab_area .info_tab3_label,
#info_tab4:focus-visible ~ .tab_area .info_tab4_label,
#info_tab5:focus-visible ~ .tab_area .info_tab5_label,
#info_tab6:focus-visible ~ .tab_area .info_tab6_label {
    outline: auto;
}
#info_tab1:checked ~ .content_area .info_content1,
#info_tab2:checked ~ .content_area .info_content2,
#info_tab3:checked ~ .content_area .info_content3,
#info_tab4:checked ~ .content_area .info_content4,
#info_tab5:checked ~ .content_area .info_content5,
#info_tab6:checked ~ .content_area .info_content6 {
    display: block;
}
/* fany_illust */
.info_content .fany_illust_yellow {
    position: absolute;
}
@media (min-width: 768px) {
    .mv {
        padding-block: 40rem 230rem;
        background-image: url(../img/top/mv_curtain_l.svg), url(../img/top/mv_curtain_r.svg), url(../img/top/mv_yellow_bg.webp), url(../img/top/mv_stage.webp);
        background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
        background-position:
            left top,
            right top,
            top left,
            top 330rem center;
        background-size:
            auto 552rem,
            auto 552rem,
            auto 566rem,
            100% 315rem;
    }
    .mv_logo {
        padding: 25rem 33rem;
        border-bottom-right-radius: 40rem;
    }
    .mv_logo_svg {
        width: 144rem;
    }
    .mv_lead {
        font-size: 66rem;
    }
    .mv_lead_inner {
        font-size: 120rem;
    }
    .mv_lead_sub_wrap {
        display: flex;
        align-items: center;
        column-gap: 10rem;
    }
    .mv_lead_sub {
        font-size: 23rem;
        background: url(../img/top/mv_fukidashi.svg) no-repeat center/ 100%;
        padding: 44rem 17rem 42rem 26rem;
    }
    .mv_lead_sub_inner {
        display: block;
        transform: rotate(-6deg);
    }
    .mv_limited {
        column-gap: 24rem;
    }
    .mv_limited_inner {
        column-gap: 21rem;
    }
    .mv_limited_inner .mv_limited_item:first-of-type {
        line-height: 1.1;
    }
    .mv_limited_inner .mv_limited_item:last-of-type {
        line-height: 1.4;
    }
    .mv_limited_item {
        padding: 27rem 20rem 33rem;
    }
    .mv_limited_item_m {
        font-size: 20rem;
    }
    .mv_limited_item_l {
        font-size: 28rem;
    }
    .mv_limited_other {
        font-size: 32rem;
        margin-top: 31rem;
    }
    .mv_limited_other_inner {
        font-size: 40rem;
        letter-spacing: 0.08em;
    }
    .mv_price_wrap {
        column-gap: 24rem;
    }
    .mv_price {
        column-gap: 24rem;
    }
    .mv_price_inner {
        column-gap: 10rem;
    }
    .mv_price_inner > dt {
        font-size: 24rem;
        padding: 4rem 9rem 5rem;
    }
    .mv_price_inner > dd {
        font-size: 28rem;
    }
    .mv_price_num {
        font-size: 56rem;
    }
    /* モーダル内 */
    .info_content .modal_scroll {
        padding-block: 120rem;
    }
    .info_content .modal_scroll_inner {
        position: relative;
    }
    .info_modal_ttl {
        font-size: 40rem;
        margin-bottom: 40rem;
    }
    .info_modal_ttl::before,
    .info_modal_ttl::after {
        background: url(../img/top/ttl_deco_white.svg) no-repeat left center/ 100%;
        width: 19rem;
        height: 26rem;
    }
    .info_modal_ttl::before {
        left: -40rem;
    }
    .info_modal_ttl::after {
        right: -40rem;
    }
    .info_content .modal_inner {
        background-color: var(--color-white);
        padding: 72rem 80rem;
    }
    .info_tab_area {
        column-gap: 24rem;
        border-bottom: solid 2px var(--color-gray);
    }
    .info_tab_label {
        font-size: 22rem;
        padding: 18rem 40rem 16rem;
    }
    .info_content_ttl {
        font-size: 32rem;
        row-gap: 8rem;
        margin-top: 30rem;
    }
    .info_content_ttl .color_red {
        font-size: 40rem;
    }
    .info_content_ttl_icon .icon_heart {
        width: 19rem;
    }
    .info_content_txt {
        line-height: 1.56;
        margin-block: 16rem 40rem;
    }
    .info_content_figure {
        row-gap: 16rem;
    }
    .info_content_figure + .info_content_figure {
        margin-top: 40rem;
        padding-top: 32rem;
    }
    .info_content_btn {
        width: 400rem;
        padding-block: 18rem;
        font-size: 24rem;
        margin-top: 80rem;
    }
    /* 画像 */
    .mv_fany_img_wrap {
        margin-top: 14rem;
    }
    .mv_fany_img {
        width: 1234rem;
    }
    /* fany_illust */
    .info_content .ill_kirakira_1 {
        width: 42rem;
        left: -64rem;
        top: -12rem;
    }
    .info_content .ill_kirakira_2 {
        width: 31rem;
        left: -86rem;
        top: 30rem;
    }
    .info_content .fany_illust_yellow {
        width: 140rem;
        left: -178rem;
        top: 39rem;
    }
}
@media (max-width: 767px) {
    .mv {
        background-image: url(../img/top/mv_bg_sp.svg);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100%;
        padding-block: 90rem 130rem;
    }
    .mv_logo {
        padding: 14rem 16rem;
        border-bottom-right-radius: 21rem;
    }
    .mv_logo_svg {
        width: 94rem;
    }
    .mv_lead {
        font-size: 28rem;
        row-gap: 11rem;
    }
    .mv_lead_inner {
        font-size: 72rem;
    }
    .mv_lead_sub {
        position: absolute;
        top: -78rem;
        right: 30rem;
        font-size: 14rem;
        background: url(../img/top/mv_fukidashi_sp.svg) no-repeat center/ 100%;
        padding: 30rem 9rem 29rem 16rem;
    }
    .mv_lead_sub_inner {
        display: block;
        transform: rotate(-3deg);
    }
    .mv_limited {
        flex-direction: column;
        align-items: center;
    }
    .mv_price_wrap {
        flex-direction: column;
        align-items: center;
    }
    .mv_limited {
        flex-direction: column;
        row-gap: 14rem;
        margin-top: 12rem;
    }
    .mv_limited_inner {
        column-gap: 22rem;
    }
    .mv_limited_inner .mv_limited_item:first-of-type {
        line-height: 1.2;
    }
    .mv_limited_inner .mv_limited_item:last-of-type {
        line-height: 1.4;
    }
    .mv_limited_item {
        padding: 28rem 20rem;
        font-size: 16rem;
    }
    .mv_limited_item_m {
        font-size: 18rem;
    }
    .mv_limited_item_l {
        font-size: 24rem;
    }
    .mv_limited_other {
        font-size: 24rem;
    }
    .mv_limited_other_inner {
        font-size: 32rem;
        letter-spacing: 0.08em;
    }
    .mv_price_wrap {
        flex-direction: column;
        row-gap: 24rem;
        margin-top: 35rem;
    }
    .mv_price {
        column-gap: 16rem;
    }
    .mv_price_inner {
        flex-direction: column;
        row-gap: 5rem;
    }
    .mv_price_inner > dt {
        font-size: 16rem;
        padding: 7rem 38rem 8rem;
    }
    .mv_price_num {
        font-size: 32rem;
    }
    .mv_price_yen {
        font-size: 18rem;
    }
    .mv_join_btn {
        padding-block: 17rem 20rem;
    }
    /* モーダル内 */
    .info_content .modal_inner {
        border-radius: 24rem;
    }
    .info_modal_ttl {
        font-size: 24rem;
        line-height: 1.3;
        margin-bottom: 20rem;
    }
    .info_modal_ttl::before,
    .info_modal_ttl::after {
        background: url(../img/top/ttl_deco_white_l.svg) no-repeat left center/ 100%;
        width: 36rem;
        height: 46rem;
    }
    .info_modal_ttl::before {
        left: -36rem;
    }
    .info_modal_ttl::after {
        right: -36rem;
    }
    .info_tab_wrap {
        margin-top: 32rem;
    }
    .info_tab_area {
        column-gap: 6rem;
    }
    .info_tab_label {
        font-size: 16rem;
        line-height: 1.25;
        padding: 8rem 17rem;
        width: 176rem;
        border-radius: 24rem 24rem 0 0;
    }
    .info_content_area {
        background-color: var(--color-white);
        border-radius: 0 0 24rem 24rem;
        padding: 32rem 16rem 40rem;
    }
    .info_content_ttl {
        font-size: 20rem;
        row-gap: 4rem;
        line-height: 1.6;
    }
    .info_content_ttl .color_red {
        font-size: 24rem;
    }
    .info_content_ttl_icon .icon_heart {
        width: 15rem;
    }
    .info_content_txt {
        font-size: 16rem;
        line-height: 1.75;
        margin-block: 16rem 24rem;
    }
    .info_content_figure {
        row-gap: 8rem;
    }
    .info_content_figure + .info_content_figure {
        margin-top: 40rem;
        padding-top: 32rem;
    }
    .info_content_btn {
        width: 260rem;
        padding-block: 18rem;
        margin-top: 24rem;
    }
    .info_content .modal_close_black {
        background-color: var(--color-white);
    }
    .info_content .modal_close_black::before,
    .info_content .modal_close_black::after {
        background: var(--color-body);
    }
    /* 画像 */
    .mv_fany_img_wrap {
        margin-top: 13rem;
        padding-inline: 32rem;
    }
    /* fany_illust */
    .info_content .ill_kirakira_1 {
        width: 18rem;
        right: 65rem;
        top: 248rem;
    }
    .info_content .ill_kirakira_2 {
        width: 21rem;
        right: 48rem;
        top: 228rem;
    }
    .info_content .fany_illust_yellow {
        width: 70rem;
        right: -12rem;
        top: 253rem;
    }
}

/* benefits */
.benefits {
    position: relative;
}
.benefits::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
}
.benefits_txt,
.benefits_list,
.benefits_list > li {
    position: relative;
}
.benefits_list_ttl_inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}
.benefits_list_ttl_deco {
    position: relative;
    color: var(--color-white);
}
.benefits_list_ttl_deco::before {
    content: '';
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.deco_red::before {
    background-color: var(--color-darkred);
}
.deco_green::before {
    background-color: var(--color-green);
}
.benefits_list_ttl_deco:last-of-type {
    z-index: -1;
}
.benefits_list_ttl_sub_wrap {
    display: flex;
    align-items: flex-start;
}
.benefits_list_ttl_sub {
    position: relative;
}
.benefits_list_ttl_sub::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--color-green);
    position: absolute;
    left: 0;
}
.benefits_list_txt_info > dt {
    margin-top: 16rem;
    display: flex;
    align-items: center;
    column-gap: 8rem;
}
.benefits_list_txt_icon_svg {
    transform: rotate(90deg);
    width: 12rem;
}
.benefits_details {
    background-color: var(--color-white);
    color: var(--color-body);
    border: solid 2px var(--color-body);
    border-radius: 24rem;
}
.benefits_details:not([open]) {
    border-radius: 80rem;
}
.benefits_question {
    cursor: pointer;
}
.benefits_question_icon {
    position: absolute;
    width: 16rem;
    height: 16rem;
    right: 24rem;
    top: 50%;
    transform: translateY(-50%);
}
.benefits_question_icon:before,
.benefits_question_icon:after {
    content: '';
    background-color: var(--color-body);
    border-radius: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition:
        transform 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
}
.benefits_question_icon:before {
    width: 16rem;
    height: 2px;
    opacity: 1;
}
.benefits_question_icon:after {
    height: 16rem;
    width: 2px;
}
.benefits_question[aria-expanded='true'] .benefits_question_icon:before,
.benefits_question[aria-expanded='true'] .benefits_question_icon:after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.benefits_question[aria-expanded='true'] .benefits_question_icon:before {
    opacity: 0;
}
.benefits_answer_inner {
    border-top: solid 2px var(--color-body);
}
.benefits_answer_info > li::before {
    content: '※';
}
.benefits_answer_link {
    text-decoration: underline;
}
.benefits_btn_performance {
    border: none;
    cursor: pointer;
}
.benefits_btn_performance + .benefits_details {
    margin-top: 16rem;
}
.benefits_list_img_wrap {
    position: relative;
}
/* モーダル内 */
.benefits_modal_ttl {
    color: var(--color-yellow);
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.benefits_modal_ttl_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.benefits_modal_ttl_icon_right {
    transform: translateY(-50%) rotate(180deg);
    line-height: 0;
}
.benefits_swiper_list > li {
    display: flex;
    flex-direction: column;
}
.benefits_swiper_ttl,
.benefits_swiper_txt {
    order: 1;
    text-align: left;
}
.benefits_swiper_txt {
    border-top: solid 2px var(--color-white);
}
/* fany_illust */
.benefits .fany_illust_purple {
    position: absolute;
    z-index: -1;
}
.benefits_list > li .ill_kirakira_6 {
    width: 23rem;
}
.benefits_list > li .ill_kirakira_7 {
    width: 16rem;
}
@media (min-width: 768px) {
    .benefits {
        scroll-margin-top: 150rem;
        padding-top: 115rem;
    }
    .benefits::before {
        background: url(../img/top/wave_white.svg) no-repeat center top/ 100%;
        height: 697rem;
        top: calc(-105 / 1080 * 100vw);
    }
    .benefits_txt {
        font-size: 24rem;
        line-height: 1.67;
    }
    .benefits_list {
        margin-top: 80rem;
    }
    .benefits_list > li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: end;
        min-height: 320rem;
    }
    .benefits_list > li + li {
        margin-top: 96rem;
    }
    .benefits_list_ttl,
    .benefits_list_txt,
    .benefits_btn_area {
        width: 530rem;
    }
    .benefits_list > li:last-of-type {
        scroll-margin-top: 120rem;
    }
    .benefits_list_ttl {
        font-size: 40rem;
        line-height: 1.2;
    }
    .benefits_list_ttl_inner {
        font-size: 28rem;
        column-gap: 6rem;
        padding-left: 10rem;
        margin-bottom: 8rem;
    }
    .benefits_list > li:nth-child(4) .benefits_list_ttl_deco:last-of-type {
        margin-left: -4rem;
    }
    .benefits_list_ttl_deco::before {
        width: 46rem;
        height: 46rem;
    }
    .benefits_list_ttl_deco:last-of-type {
        margin-left: 5rem;
        font-size: 36rem;
        padding-bottom: 2rem;
    }
    .benefits_list_ttl_sub {
        font-size: 24rem;
        padding-left: 24rem;
        margin-top: 8rem;
        padding-bottom: 7rem;
    }
    .benefits_list_ttl_sub::before {
        bottom: 2rem;
    }
    .benefits_list_txt {
        line-height: 1.56;
        margin-top: 16rem;
    }
    .benefits_list_txt_inner {
        font-size: 16rem;
    }
    .benefits_list_txt_info {
        font-size: 14rem;
    }
    .benefits_btn_area {
        margin-top: 24rem;
    }
    .benefits_question {
        padding-block: 16rem;
    }
    .benefits_question_inner {
        font-size: 20rem;
    }
    .benefits_answer_inner {
        padding-block: 14rem 18rem;
        margin-inline: 24rem;
        line-height: 1.7;
        font-size: 14rem;
    }
    .benefits_btn_area .btn_bronze {
        padding-block: 16rem;
    }
    .benefits_list_img_wrap {
        position: absolute;
        left: 0;
        top: 0;
    }
    .benefits_list_img {
        border-radius: 40rem;
        width: 500rem;
    }
    /* モーダル内 */
    .benefits_modal_content .modal_scroll_inner {
        overflow: hidden;
    }
    .benefits_modal_content .modal_inner {
        padding: 48rem 60rem;
        position: relative;
        background-color: var(--color-green);
    }
    .benefits_swiper {
        overflow: inherit;
    }
    .benefits_modal_ttl {
        font-size: 32rem;
    }
    .benefits_modal_ttl_icon {
        width: 22rem;
    }
    .benefits_modal_ttl_icon_left {
        left: -35rem;
    }
    .benefits_modal_ttl_icon_right {
        right: -36rem;
    }
    .benefits_swiper_list {
        display: flex;
        justify-content: center;
        column-gap: 40rem;
        margin-top: 32rem;
    }
    .benefits_swiper_list > li {
        width: 160rem;
    }
    .benefits_swiper_img {
        border-radius: 16rem;
    }
    .benefits_swiper_ttl {
        font-size: 14rem;
        margin-top: 16rem;
        line-height: 1.4;
    }
    .benefits_swiper_txt {
        font-size: 13rem;
        line-height: 1.75;
        margin-top: 10rem;
        padding-top: 5rem;
    }
    .benefits_swiper_txt_info {
        font-size: 12rem;
    }
    /* fany_illust */
    .benefits .fany_illust_red,
    .benefits .fany_spotlight_bg,
    .benefits .fany_illust_blue,
    .benefits .fany_mic {
        position: absolute;
    }
    .benefits .fany_spotlight_bg {
        width: 336rem;
        right: calc(50% - 703rem);
        top: 36rem;
    }
    .benefits .ill_kirakira_1 {
        width: 42rem;
        right: calc(50% - 445rem);
        top: 54rem;
    }
    .benefits .ill_kirakira_2 {
        width: 31rem;
        right: calc(50% - 610rem);
        top: 80rem;
    }
    .benefits .ill_kirakira_3 {
        width: 18rem;
        right: calc(50% - 352rem);
        top: 216rem;
    }
    .benefits .ill_kirakira_4 {
        width: 36rem;
        right: calc(50% - 383rem);
        top: 175rem;
    }
    .benefits .ill_kirakira_5 {
        width: 29rem;
        right: calc(50% - 476rem);
        top: 37rem;
    }
    .benefits .fany_illust_red {
        width: 220rem;
        right: calc(50% - 620rem);
        top: 133rem;
    }
    .benefits .fany_mic {
        width: 31rem;
        right: calc(50% - 515rem);
        top: 234rem;
    }
    .benefits .fany_illust_blue {
        width: 160rem;
        left: calc(50% - 770rem);
        top: 155rem;
    }
    .benefits .fany_illust_purple {
        width: 140rem;
        left: 64rem;
        bottom: -60rem;
    }
    .fany_illust_purple_img {
        transform: scale(-1, 1) rotate(180deg);
    }
    .benefits_list > li .ill_kirakira_6 {
        right: calc(50% - 8rem);
        top: -10rem;
    }
    .benefits_list > li .ill_kirakira_7 {
        right: calc(50% - 25rem);
        top: -22rem;
    }
}
@media (max-width: 767px) {
    .benefits {
        scroll-margin-top: 150rem;
        padding-top: 75rem;
    }
    .benefits::before {
        background: url(../img/top/wave_white_sp.svg) no-repeat center top/ 100%;
        height: 337rem;
        top: calc(-30 / 1080 * 100vw);
    }
    .benefits_txt {
        font-size: 16rem;
        line-height: 1.75;
    }
    .benefits_list {
        margin-top: 24rem;
    }
    .benefits_list > li + li {
        margin-top: 80rem;
    }
    .benefits_list > li:last-of-type {
        scroll-margin-top: 100rem;
    }
    .benefits_list_ttl {
        font-size: 32rem;
        line-height: 1.25;
    }
    .benefits_list_ttl_inner {
        font-size: 24rem;
        column-gap: 4rem;
        padding-left: 9rem;
        margin-bottom: 8rem;
    }
    .benefits_list > li:nth-child(4) .benefits_list_ttl_deco:last-of-type {
        margin-left: -2rem;
    }
    .benefits_list_ttl_deco::before {
        width: 40rem;
        height: 40rem;
    }
    .benefits_list_ttl_deco:last-of-type {
        margin-left: 5rem;
        font-size: 32rem;
        padding-bottom: 1rem;
    }
    .benefits_list_ttl_sub {
        font-size: 16rem;
        padding-left: 20rem;
        padding-bottom: 7rem;
        margin-top: 10rem;
    }
    .benefits_list_ttl_sub::before {
        bottom: 2rem;
    }
    .benefits_list_img_wrap {
        margin-top: 22rem;
    }
    .benefits_list_txt {
        line-height: 1.7;
        font-size: 14rem;
        margin-top: 20rem;
    }
    .benefits_list_txt_info {
        font-size: 12rem;
    }
    .benefits_list_img {
        border-radius: 26rem;
    }
    .benefits_btn_area {
        margin-top: 20rem;
    }
    .benefits_list .btn_bronze,
    .benefits_question {
        font-size: 16rem;
        padding-block: 16rem;
    }
    .benefits_answer_inner {
        padding-block: 12rem 18rem;
        margin-inline: 24rem;
        font-size: 12rem;
        line-height: 1.83;
    }
    /* モーダル内 */
    .benefits_modal_content .modal_inner {
        position: relative;
        padding-inline: 40rem;
    }
    .benefits_modal_ttl {
        font-size: 24rem;
    }
    .benefits_modal_ttl_icon {
        width: 12rem;
    }
    .benefits_modal_ttl_icon_left {
        left: -20rem;
    }
    .benefits_modal_ttl_icon_right {
        right: -21rem;
    }
    .benefits_swiper {
        margin-top: 24rem;
        padding-bottom: 35rem;
    }
    .benefits_swiper_img_wrap {
        padding-inline: 20rem;
    }
    .benefits_swiper_img {
        border-radius: 21rem;
    }
    .benefits_swiper_ttl {
        margin-top: 20rem;
        font-size: 20rem;
        line-height: 1.2;
    }
    .benefits_swiper_txt {
        font-size: 16rem;
        line-height: 1.5;
        margin-top: 12rem;
        padding-top: 6rem;
    }
    .benefits_swiper_txt_info {
        font-size: 12rem;
    }
    .benefits_swiper_list > li {
        overflow: hidden;
        padding-bottom: 44rem;
    }
    .benefits_modal_content .modal_close {
        top: -28rem;
    }
    /* fany_illust */
    .benefits .fany_illust_purple {
        width: 72rem;
        right: 17rem;
        top: -32rem;
    }
    .benefits_list > li .ill_kirakira_6 {
        left: -18rem;
        top: -14rem;
    }
    .benefits_list > li .ill_kirakira_7 {
        left: 2rem;
        top: -24rem;
    }
}

/* limited */
.limited {
    position: relative;
}
.limited::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}
.limited_tab_wrap {
    position: relative;
}
.limited_content_area {
    background-color: var(--color-green);
}
.limited_tab_content {
    text-align: center;
}
.limited_content_ttl {
    color: var(--color-yellow);
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.limited_content_ttl_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.limited_content_ttl_icon_right {
    transform: translateY(-50%) rotate(180deg);
    line-height: 0;
}
.limited_txt_info > li::before {
    content: '◆';
}
.limited_txt_link {
    text-decoration: underline;
}
.limited_content_flex {
    display: flex;
}
.limited_story_block.limited_content_flex {
    flex-wrap: wrap;
}
.limited_content_label {
    display: flex;
    flex-direction: column;
}
.limited_content_label > dt,
.limited_content_label_txt {
    order: 1;
}
.limited_content_info::before {
    content: '※';
}
.limited_content_label_img {
    overflow: hidden;
    position: relative;
}
.limited_content_label_tag {
    position: absolute;
}
.limited_content_label_tag::before {
    content: '';
    background-color: var(--color-red);
    border-radius: 50%;
    position: absolute;
}
.limited_content_label_tag_inner {
    position: relative;
    z-index: 1;
}
.limited_present_txt {
    text-align: left;
}
.limited_tab_label:hover,
#limited_tab1:checked ~ .tab_area .limited_tab1_label,
#limited_tab2:checked ~ .tab_area .limited_tab2_label,
#limited_tab3:checked ~ .tab_area .limited_tab3_label,
#limited_tab4:checked ~ .tab_area .limited_tab4_label {
    background-color: var(--color-green);
}
#limited_tab1:focus-visible ~ .tab_area .limited_tab1_label,
#limited_tab2:focus-visible ~ .tab_area .limited_tab2_label,
#limited_tab3:focus-visible ~ .tab_area .limited_tab3_label,
#limited_tab4:focus-visible ~ .tab_area .limited_tab4_label {
    outline: auto;
}
#limited_tab1:checked ~ .content_area .limited_content1,
#limited_tab2:checked ~ .content_area .limited_content2,
#limited_tab3:checked ~ .content_area .limited_content3,
#limited_tab4:checked ~ .content_area .limited_content4 {
    display: block;
}
/* fany_illust */
.limited .fany_illust_blue,
.limited .fany_illust_flag {
    position: absolute;
}
.limited .fany_illust_flag {
    z-index: 1;
    rotate: 18deg;
}
@media (min-width: 768px) {
    .limited {
        scroll-margin-top: 200rem;
        margin-top: 280rem;
        padding-block: 110rem 270rem;
    }
    .limited::before {
        background: url(../img/top/bg_yellow.webp) no-repeat center top/ cover;
        height: 120%;
        top: calc(-105 / 1080 * 100vw);
    }
    .limited_lead {
        font-size: 24rem;
        line-height: 1.67;
    }
    .limited_txt,
    .limited_txt_info {
        font-size: 16rem;
        line-height: 1.75;
    }
    .limited_txt {
        margin-top: 16rem;
    }
    .limited_txt_info {
        margin-top: 20rem;
    }
    .limited_txt_info > li + li {
        margin-top: 3rem;
    }
    .limited_tab_wrap {
        margin-top: 80rem;
    }
    .limited_tab_label {
        font-size: 20rem;
        padding: 15rem 26rem 12rem;
        line-height: 1.2;
    }
    .limited_tab_label + .limited_tab_label {
        margin-left: 24rem;
    }
    .limited_content_area {
        padding: 64rem 60rem;
    }
    .limited_content_flex {
        gap: 20rem;
        margin-top: 35rem;
    }
    .limited_story_block .limited_story_img_wrap {
        width: calc(50% - 10rem);
    }
    .limited_present_block {
        margin-top: 32rem;
    }
    .limited_present_block .limited_content_flex {
        margin-top: 20rem;
    }
    .limited_content_label > dt {
        font-size: 24rem;
        margin-top: 20rem;
    }
    .limited_content_label_txt {
        line-height: 1.56;
        margin-top: 15rem;
    }
    .limited_content_ttl {
        font-size: 32rem;
    }
    .limited_content_ttl_icon {
        width: 22rem;
    }
    .limited_content_ttl_icon_left {
        left: -35rem;
    }
    .limited_content_ttl_icon_right {
        right: -36rem;
    }
    .limited_content_txt {
        font-size: 20rem;
        line-height: 1.6;
        margin-top: 20rem;
    }
    .limited_content_info {
        margin-top: 16rem;
    }
    .limited_content_label_img {
        border-radius: 16rem;
    }
    .limited_content_label_tag {
        left: 10rem;
        top: 7rem;
    }
    .limited_content_label_tag::before {
        width: 96rem;
        height: 96rem;
        left: -30rem;
        top: -30rem;
    }
    .limited_content_label_tag_inner {
        font-size: 24rem;
        line-height: 1.2;
    }
    .limited_content_label_tag_num {
        font-size: 24rem;
    }
    .limited_content_btn.btn_red {
        width: 320rem;
        font-size: 22rem;
        margin: 32rem auto 0;
        padding-block: 20rem;
    }
    .limited_present_caption {
        font-size: 20rem;
        margin-top: 16rem;
        line-height: 1.2;
    }
    /* img */
    .limited_img {
        border-radius: 16rem;
    }
    /* fany_illust */
    .limited .fany_illust_red,
    .limited .fany_white_bg,
    .limited .fany_illust_blue,
    .limited .fany_mic {
        position: absolute;
    }
    .limited .fany_white_bg {
        width: 280rem;
        left: calc(50% - 641rem);
        top: -100rem;
    }
    .limited .ill_kirakira_1 {
        width: 42rem;
        left: calc(50% - 660rem);
        top: -240rem;
    }
    .limited .ill_kirakira_2 {
        width: 31rem;
        left: calc(50% - 622rem);
        top: -268rem;
    }
    .limited .ill_kirakira_3 {
        width: 18rem;
        left: calc(50% - 368rem);
        top: -110rem;
    }
    .limited .ill_kirakira_4 {
        width: 29rem;
        left: calc(50% - 356rem);
        top: -136rem;
    }
    .limited .fany_illust_red {
        width: 220rem;
        left: calc(50% - 833rem);
        top: -214rem;
    }
    .limited .fany_mic {
        width: 31rem;
        left: calc(50% - 527rem);
        top: -113rem;
    }
    .limited .fany_illust_flag {
        width: 64rem;
        bottom: 20rem;
        right: -85rem;
    }
    .limited .fany_illust_blue {
        width: 140rem;
        bottom: -56rem;
        right: -54rem;
    }
}
@media (max-width: 767px) {
    .limited {
        scroll-margin-top: 150rem;
        margin-top: 140rem;
        padding-block: 75rem 153rem;
    }
    .limited::before {
        background: url(../img/top/bg_yellow_sp.webp) no-repeat center top/ cover;
        height: 105%;
        top: calc(-58 / 1080 * 100vw);
    }
    .limited_lead {
        font-size: 20rem;
        line-height: 1.6;
    }
    .limited_txt,
    .limited_txt_info {
        font-size: 14rem;
        line-height: 1.7;
    }
    .limited_txt {
        margin-top: 12rem;
    }
    .limited_txt_info {
        margin-top: 15rem;
    }
    .limited_txt_info > li + li {
        margin-top: 2rem;
    }
    .limited_tab_wrap {
        margin-top: 32rem;
    }
    .limited_tab_area {
        flex-wrap: wrap;
        gap: 6rem;
    }
    .limited_tab_label {
        position: relative;
        font-size: 12rem;
        line-height: 1.3;
        border-radius: 80rem;
        width: calc(50% - 3rem);
        height: 48rem;
    }
    .limited_tab_label .arrow {
        right: 10rem;
    }
    .limited_content_area {
        margin-top: 16rem;
        padding: 32rem 24rem;
        border-radius: 24rem;
    }
    .limited_content_flex {
        flex-direction: column;
        row-gap: 24rem;
        margin-top: 30rem;
    }
    .limited_story_block.limited_content_flex {
        row-gap: 16rem;
    }
    .limited_present_block {
        margin-top: 30rem;
    }
    .limited_present_txt {
        font-size: 14rem;
    }
    .limited_present_block .limited_content_flex {
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 16rem;
        margin-top: 16rem;
    }
    .limited_content_label > dt {
        font-size: 20rem;
        margin-top: 15rem;
    }
    .limited_content_label_txt {
        line-height: 1.7;
        margin-top: 5rem;
    }
    .limited_content_ttl {
        font-size: 20rem;
        line-height: 1.3;
    }
    .limited_content_ttl_icon {
        width: 12rem;
    }
    .limited_content_ttl_icon_left {
        left: -25rem;
    }
    .limited_content_ttl_icon_right {
        right: -26rem;
    }
    .limited_content_txt {
        line-height: 1.7;
        margin-top: 12rem;
    }
    .limited_content_info {
        font-size: 12rem;
        margin-top: 8rem;
        line-height: 1.83;
    }
    .limited_content_label_img {
        border-radius: 16rem;
    }
    .limited_content_label_tag {
        left: 6rem;
        top: 4rem;
    }
    .limited_content_label_tag::before {
        width: 57rem;
        height: 57rem;
        left: -23rem;
        top: -21rem;
    }
    .limited_content_label_tag_inner {
        font-size: 12rem;
        line-height: 1.1;
    }
    .limited_content_label_tag_num {
        font-size: 14rem;
    }
    .limited_content_btn.btn_red {
        font-size: 14rem;
        width: 260rem;
        margin: 24rem auto 0;
        padding-block: 15rem 17rem;
    }
    .limited_content_figure {
        width: calc(50% - 8rem);
    }
    .limited_present_caption {
        font-size: 11rem;
        margin-top: 6rem;
        line-height: 1.45;
    }
    /* img */
    .limited_img {
        border-radius: 8rem;
    }
    /* fany_illust */
    .limited .fany_illust_flag {
        width: 33rem;
        bottom: 8rem;
        right: -33rem;
    }
    .limited .fany_illust_blue {
        width: 80rem;
        bottom: -35rem;
        right: -16rem;
    }
}

/* news */
.news_link {
    display: flex;
    align-items: center;
    column-gap: 16rem;
    border-bottom: dashed 1px var(--color-white);
}
.news_date {
    font-size: 16rem;
    background-color: var(--color-white);
    border-radius: 30rem;
    padding: 2rem 16rem 3rem;
}
.news_content {
    overflow: hidden;
}
.news_btn {
    width: 140rem;
}
@media (min-width: 768px) {
    .news {
        margin-top: 85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 52rem;
    }
    .news_ttl_wrap {
        flex-shrink: 0;
    }
    .news_ttl {
        font-size: 34rem;
    }
    .news_list {
        width: 888rem;
    }
    .news_list > li + li {
        margin-top: 11rem;
    }
    .news_link {
        padding-bottom: 12rem;
    }
    .news_content {
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .news_btn {
        font-size: 16rem;
        padding-block: 12rem;
        margin-top: 18rem;
    }
    .news_btn .btn_arrow {
        right: 14rem;
    }
}
@media (max-width: 767px) {
    .news {
        margin-top: 45rem;
    }
    .news_ttl {
        font-size: 28rem;
        text-align: center;
    }
    .news_list {
        margin-top: 16rem;
    }
    .news_content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-height: 1.7;
    }
    .news_list > li + li {
        margin-top: 12rem;
    }
    .news_link {
        padding-bottom: 14rem;
    }
    .news_btn {
        font-size: 16rem;
        padding-block: 10rem;
        margin: 24rem auto 0;
    }
    .news_btn .btn_arrow {
        right: 17rem;
    }
}

/* plan */
.plan {
    position: relative;
    background-color: var(--color-green);
}
.plan::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
}
.plan_lead,
.plan_txt,
.plan_table_wrap {
    position: relative;
    z-index: 1;
}
.plan_txt {
    margin-top: 16rem;
}
.plan_price_wrap {
    position: relative;
}
.plan_price_point {
    position: absolute;
}
.plan_price {
    display: flex;
    justify-content: center;
}
.plan_price_inner {
    display: flex;
    align-items: center;
    color: var(--color-white);
}
.plan_price_inner > dt {
    background: url(../img/top/limited_ttl_bg.svg) no-repeat center/ 100%;
    text-shadow: var(--text-shadow);
}
/* table */
.plan_table_wrap {
    background-color: var(--color-white);
}
.plan_table {
    margin-inline: auto;
}
.plan_table_caption::before,
.plan_table_caption::after {
    content: '';
    background: url(../img/top/ttl_deco_blue.svg) no-repeat left center / 100%;
    width: 17rem;
    height: 24rem;
    position: absolute;
}
.plan_table_caption::after {
    transform: scale(-1, 1);
}
.plan_table_body {
    color: var(--color-black);
}
.plan_table_member {
    background-color: var(--color-blue);
    color: var(--color-white);
}
.plan_table_benefits {
    background-color: var(--color-lightgray);
}
.plan_table_body tr:first-child th:first-child {
    background-color: var(--color-blue);
}
.plan_table_body td {
    border-right: solid 3px var(--color-lightgray);
    border-bottom: solid 3px var(--color-lightgray);
    text-align: center;
}
.plan_table_border_white {
    border-top: solid 3px var(--color-white);
}
.plan_table_member_inner {
    border-left: solid 3px var(--color-white);
}
.plan_table_body tr:last-child th {
    border-bottom: solid 3px var(--color-lightgray);
}
.plan_table_member_s {
    display: block;
}
.plan_table_heart_inner {
    transform: rotate(90deg);
    width: 15rem;
}
.plan_table_info {
    display: block;
    margin-top: 8rem;
}
/* モーダル */
.plan_join_btn {
    border: none;
    margin-inline: auto;
    cursor: pointer;
}
@media (min-width: 768px) {
    .plan {
        scroll-margin-top: 180rem;
        padding-block: 115rem 340rem;
    }
    .plan::before {
        background: url(../img/top/wave_green.svg) no-repeat center top/ 100%;
        height: 647rem;
        top: calc(-105 / 1080 * 100vw);
    }
    .plan_lead {
        font-size: 24rem;
        line-height: 1.67;
    }
    .plan_lead_inner {
        font-size: 40rem;
    }
    .plan_price_point {
        font-size: 20rem;
        line-height: 1.2;
        background: url(../img/top/fukidashi.svg) no-repeat center/ 100%;
        padding: 52rem 30rem 53rem 43rem;
        top: -163rem;
        right: 20rem;
    }
    .plan_price_point .color_red {
        font-size: 30rem;
    }
    .plan_price {
        column-gap: 60rem;
        margin-top: 56rem;
    }
    .plan_price_inner {
        column-gap: 21rem;
    }
    .plan_price_inner > dt {
        font-size: 24rem;
        padding: 33rem 15rem 36rem;
    }
    .plan_price_inner > dd {
        font-size: 32rem;
    }
    .plan_price_num {
        font-size: 64rem;
    }
    .plan_price_tax {
        font-size: 18rem;
    }
    /* table */
    .plan_table_wrap {
        border-radius: 40rem;
        padding: 64rem 80rem;
        margin-top: 40rem;
    }
    .plan_table {
        width: 100%;
        table-layout: fixed;
    }
    .plan_table_caption {
        margin-bottom: 32rem;
        font-size: 40rem;
        position: relative;
    }
    .plan_table_caption::before,
    .plan_table_caption::after {
        bottom: 3rem;
    }
    .plan_table_caption::before {
        left: calc(50% - 260rem);
    }
    .plan_table_caption::after {
        right: calc(50% - 260rem);
    }
    .plan_table_body tr:first-child th:first-child {
        border-top-left-radius: 18rem;
    }
    .plan_table_body tr:first-child th:last-child {
        border-top-right-radius: 18rem;
    }
    .plan_table_member > th {
        font-size: 20rem;
        height: 50rem;
    }
    .plan_table_member > th:first-of-type {
        width: 248rem;
    }
    .plan_table_member_inner {
        padding-block: 13rem;
    }
    .plan_table_member_s {
        font-size: 14rem;
        margin-top: 6rem;
    }
    .plan_table_benefits {
        font-size: 15rem;
        line-height: 1.4;
        height: 60rem;
        border-top: solid 3px var(--color-white);
    }
    .plan_table_info {
        font-size: 14rem;
    }
    /* モーダル */
    .plan_join_btn {
        width: 320rem;
        padding-block: 20rem;
        margin-top: 56rem;
    }
    /* fany_illust */
    .plan .fany_illust_mega,
    .plan .fany_illust_purple {
        position: absolute;
    }
    .plan .fany_illust_mega {
        width: 67rem;
        top: 85rem;
        left: calc(50% - 573rem);
        rotate: -34deg;
        z-index: 1;
    }
    .plan .fany_illust_purple {
        width: 140rem;
        top: 152rem;
        left: calc(50% - 706rem);
    }
}
@media (max-width: 767px) {
    .plan {
        scroll-margin-top: 150rem;
        padding-block: 75rem 120rem;
    }
    .plan::before {
        background: url(../img/top/wave_green_sp.svg) no-repeat center top/ 100%;
        height: 337rem;
        top: calc(-30 / 1080 * 100vw);
    }
    .plan .container {
        padding-inline: 16rem;
    }
    .plan_lead {
        font-size: 20rem;
        line-height: 1.2;
    }
    .plan_lead_inner {
        font-size: 36rem;
    }
    .plan_txt {
        line-height: 1.72;
    }
    .plan_price_point {
        font-size: 12rem;
        line-height: 1.2;
        background: url(../img/top/fukidashi_sp.svg) no-repeat center/ 100%;
        padding: 25rem 21rem 23rem 22rem;
        top: -90rem;
        right: -32rem;
    }
    .plan_price_point .color_red {
        font-size: 18rem;
    }
    .plan_price {
        column-gap: 26rem;
        margin-top: 35rem;
    }
    .plan_price_inner {
        flex-direction: column;
        row-gap: 12rem;
    }
    .plan_price_inner > dt {
        font-size: 18rem;
        padding: 26rem 13rem;
    }
    .plan_price_inner > dd {
        font-size: 16rem;
    }
    .plan_price_num {
        font-size: 32rem;
    }
    .plan_price_tax {
        font-size: 13rem;
    }
    /* table */
    .plan_table_wrap {
        border-radius: 24rem;
        margin-top: 40rem;
        padding: 24rem 16rem;
        position: relative;
    }
    .plan_table_inner {
        overflow-x: scroll;
        overflow-y: hidden;
        padding-bottom: 16rem;
    }
    .plan_table {
        width: 516rem;
        white-space: nowrap;
    }
    .plan_table_caption {
        font-size: 20rem;
        position: absolute;
        top: 2rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .plan_table_caption::before,
    .plan_table_caption::after {
        bottom: -3rem;
    }
    .plan_table_caption::before {
        left: calc(50% - 134rem);
    }
    .plan_table_caption::after {
        right: calc(50% - 134rem);
    }
    .plan_table_body tr:first-child th:last-child {
        border-top-right-radius: 20rem;
    }
    .plan_table_member > th {
        font-size: 14rem;
    }
    .plan_table_member > th:first-of-type {
        width: 126rem;
    }
    .plan_table_member_inner {
        padding-block: 15rem;
        width: 130rem;
    }
    .plan_table_member_s {
        font-size: 12rem;
        margin-top: 6rem;
    }
    .plan_table_benefits {
        font-size: 10rem;
        line-height: 1.3;
        padding-block: 13rem;
        height: 48rem;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .plan_table_benefits::before {
        content: '';
        position: absolute;
        top: -1.5px;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: solid 3px var(--color-white);
    }
    .plan_table_body tr:first-child th:first-child::before {
        content: none;
    }
    .plan_table_heart {
        display: block;
        height: 19rem;
    }
    .plan_table_info {
        font-size: 10rem;
    }
    .plan_table_body tr:last-child td:last-of-type {
        position: relative;
    }
    .plan_table_body tr:first-child th:first-of-type::before,
    .plan_table_body tr:last-child th:last-of-type::after,
    .plan_table_body tr:last-child td:last-of-type::before {
        content: '';
        position: absolute;
        width: 20rem;
        height: 20rem;
    }
    .plan_table_body tr:first-child th:first-of-type::before {
        background: url(../img/top/table_corner_l.svg) no-repeat left top;
        left: 0rem;
        top: -3rem;
    }
    .plan_table_body tr:last-child th:last-of-type::after {
        background: url(../img/top/table_corner_l.svg) no-repeat left bottom;
        left: 0rem;
        bottom: -3rem;
        transform: scale(1, -1);
    }
    .plan_table_body tr:last-child td:last-of-type::before {
        background: url(../img/top/table_corner_r_bottom.svg) no-repeat right bottom;
        right: -3rem;
        bottom: -3rem;
    }
    /* スクロールバー */
    .plan_table_inner {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .plan_table_inner::-webkit-scrollbar {
        display: none;
    }
    .simplebar-content-wrapper {
        position: unset !important;
    }
    .simplebar-content {
        padding-top: 40rem !important;
    }
    .simplebar-scrollbar::before {
        background-color: var(--color-gray);
        border-radius: 10rem;
        height: 8rem;
        top: 0;
        bottom: 0;
        left: 0;
    }
    .simplebar-scrollbar.simplebar-visible::before {
        opacity: 1;
    }
    .simplebar-track {
        background-color: var(--color-lightgray);
        border-radius: 10rem;
        height: 8rem !important;
    }
    /* スクロールヒント */
    .scroll-hint-icon {
        width: 120rem;
        border-radius: 8rem;
        padding: 22rem 15rem 12rem;
        background-color: rgba(71, 72, 72, 0.85);
        z-index: 1;
    }
    .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
        opacity: 1 !important;
    }
    .scroll-hint-icon:before {
        background-image: url(../img/top/scroll_hint_icon.svg);
        width: 33rem;
        height: 33rem;
    }
    .scroll-hint-icon:after {
        background-image: url(../img/top/scroll_hint_arrow.svg);
        width: 34rem;
        height: 8rem;
    }
    .scroll-hint-text {
        font-size: 10rem;
        margin-top: 7rem;
    }
    /* モーダル */
    .plan_join_btn {
        width: 260rem;
        padding-block: 20rem;
        margin-top: 40rem;
    }
}

/* join */
.join {
    position: relative;
}
.join::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
}
.join_tab_wrap {
    position: relative;
    z-index: 1;
}
.join_content_area {
    background-color: var(--color-blue);
}
.join_tab_list > li {
    color: var(--color-white);
    display: flex;
    flex-direction: column;
}
.join_content_ttl,
.join_content_txt {
    order: 1;
}
.join_content_txt {
    border-top: solid 2px var(--color-white);
}
.join_tab_label:hover,
#join_tab1:checked ~ .tab_area .join_tab1_label,
#join_tab2:checked ~ .tab_area .join_tab2_label {
    background-color: var(--color-blue);
}
#join_tab1:focus-visible ~ .tab_area .join_tab1_label,
#join_tab2:focus-visible ~ .tab_area .join_tab2_label {
    outline: auto;
}
#join_tab1:checked ~ .content_area .join_content1,
#join_tab2:checked ~ .content_area .join_content2 {
    display: block;
}
@media (min-width: 768px) {
    .join {
        scroll-margin-top: 150rem;
        padding-block: 200rem 250rem;
    }
    .join::before {
        background: url(../img/top/bg_yellow.webp) no-repeat center top/ cover;
        height: 120%;
        top: calc(-105 / 1080 * 100vw);
    }
    .join_tab_label {
        font-size: 24rem;
        padding: 20rem 22rem;
        width: 422rem;
    }
    .join_tab_label + .join_tab_label {
        margin-left: 24rem;
    }
    .join_content_area {
        padding: 48rem 92rem;
    }
    .join_tab_content {
        overflow: inherit;
    }
    .join_tab_list {
        display: flex;
        justify-content: center;
        column-gap: 32rem;
    }
    .join_tab_list > li {
        width: 200rem;
    }
    .join_content_ttl {
        font-size: 14rem;
        margin-top: 16rem;
    }
    .join_content_txt {
        font-size: 13rem;
        line-height: 1.6;
        margin-top: 8rem;
        padding-top: 5rem;
    }
    .join_content_txt_inner {
        font-size: 14rem;
    }
    .join_content_img_wrap {
        text-align: center;
    }
    .join_content_img {
        width: 160rem;
        border-radius: 12rem;
    }
    /* fany_illust */
    .fany_illust_blue_board {
        position: absolute;
        width: 163rem;
        top: calc(130 / 1080 * 100vw);
        transform: translate(-100vw, -26vw);
    }
}
@media (max-width: 767px) {
    .join {
        scroll-margin-top: 120rem;
        padding-block: 100rem 120rem;
    }
    .join::before {
        background: url(../img/top/bg_yellow_sp.webp) no-repeat center top/ cover;
        height: 105%;
        top: calc(-24 / 1080 * 100vw);
    }
    .join_inner {
        position: relative;
    }
    .join_tab_label {
        font-size: 16rem;
        line-height: 1.25;
        padding: 10rem 16rem;
        border-radius: 24rem 24rem 0 0;
        width: 160rem;
    }
    .join_tab_label + .join_tab_label {
        margin-left: 6rem;
    }
    .join_content_area {
        padding: 32rem 24rem;
        border-radius: 0 0 24rem 24rem;
    }
    .join_tab_list > li {
        padding-bottom: 30rem;
    }
    .join_content_ttl {
        font-size: 20rem;
        margin-top: 24rem;
    }
    .join_content_txt {
        font-size: 16rem;
        line-height: 1.5;
        margin-top: 12rem;
        padding-top: 8rem;
    }
    .join_content_txt_inner {
        font-size: 12rem;
    }
    .join_content_img_wrap {
        padding-inline: 20rem;
        border-radius: 21rem;
    }
    .join_content_img {
        border-radius: 21rem;
    }
    /* fany_illust */
    .join .fany_illust_red {
        width: 100rem;
        position: absolute;
        right: -16rem;
        bottom: -46rem;
        z-index: 1;
    }
}
/* fany_illust_board animation */
.animation_ready .fany_illust_blue_board {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.animation_ready.animation_loaded .is_animated.fany_illust_blue_board {
    animation: curveMove 6s linear both infinite;
    opacity: 1;
}
@keyframes curveMove {
    0% {
        transform: translate(0, -26vw);
    }
    17% {
        transform: translate(17vw, -24vw);
    }
    25% {
        transform: translate(25vw, -20vw);
    }
    50% {
        transform: translate(50vw, -17vw);
    }
    75% {
        transform: translate(75vw, -21vw);
    }
    87% {
        transform: translate(87vw, -26.5vw);
    }
    100% {
        transform: translate(100vw, -26vw);
    }
}

/* qa */
.qa {
    position: relative;
}
.qa::before {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
}
.qa_block {
    border-bottom: solid 2px var(--color-gray);
    position: relative;
}
.qa_question {
    cursor: pointer;
    position: relative;
    line-height: 1.6;
}
.qa_question,
.qa_answer_txt_inner {
    display: flex;
}
.qa_question_txt {
    color: var(--color-red);
}
.qa_answer_txt {
    color: var(--color-blue);
}
.qa_answer_txt_link {
    text-decoration: underline;
}
.qa_block.is-opened .arrow {
    transform: rotate(180deg);
}
@media (min-width: 768px) {
    .qa {
        scroll-margin-top: 150rem;
        padding-top: 202rem;
    }
    .qa::before {
        background: url(../img/top/wave_white.svg) no-repeat center top/ 100%;
        height: 697rem;
        top: calc(-105 / 1080 * 100vw);
    }
    .qa_question,
    .qa_answer_txt_inner {
        column-gap: 25rem;
    }
    .qa_align_center {
        align-items: center;
    }
    .qa_question {
        padding: 35rem 55rem 35rem 0;
        align-items: center;
        font-size: 20rem;
    }
    .qa_question_icon {
        width: 72rem;
        flex-shrink: 0;
    }
    .qa_answer_txt_inner {
        margin-bottom: 35rem;
        line-height: 1.5;
        padding-right: 78rem;
    }
    .qa_answer_txt_info {
        font-size: 14rem;
    }
    /* fany_illust */
    .qa .fany_illust_red,
    .qa .fany_green_bg,
    .qa .fany_illust_blue,
    .qa .fany_mic {
        position: absolute;
    }
    .qa .fany_green_bg {
        width: 280rem;
        right: calc(50% - 651rem);
        top: -36rem;
    }
    .qa .ill_kirakira_1 {
        width: 42rem;
        right: calc(50% - 425rem);
        top: -200rem;
    }
    .qa .ill_kirakira_2 {
        width: 31rem;
        right: calc(50% - 645rem);
        top: -198rem;
    }
    .qa .ill_kirakira_3 {
        width: 18rem;
        right: calc(50% - 343rem);
        top: -110rem;
    }
    .qa .ill_kirakira_4 {
        width: 36rem;
        right: calc(50% - 371rem);
        top: -148rem;
    }
    .qa .ill_kirakira_5 {
        width: 29rem;
        right: calc(50% - 456rem);
        top: -214rem;
    }
    .qa .fany_illust_red {
        width: 220rem;
        right: calc(50% - 620rem);
        top: -155rem;
    }
    .qa .fany_mic {
        width: 31rem;
        right: calc(50% - 515rem);
        top: -56rem;
    }
}
@media (max-width: 767px) {
    .qa {
        scroll-margin-top: 120rem;
        padding-top: 80rem;
    }
    .qa::before {
        background: url(../img/top/wave_white_sp.svg) no-repeat center top/ 100%;
        height: 337rem;
        top: calc(-30 / 1080 * 100vw);
    }
    .qa_question,
    .qa_answer_txt_inner {
        column-gap: 12rem;
    }
    .qa_question {
        padding: 25rem 20rem 20rem 0;
        align-items: center;
    }
    .qa_answer {
        font-size: 12rem;
    }
    .qa_question_icon {
        width: 47rem;
        flex-shrink: 0;
    }
    .qa_answer_txt_inner {
        margin-bottom: 20rem;
        line-height: 1.67;
        padding-right: 40rem;
    }
    .qa_answer_txt_info {
        font-size: 10rem;
    }
    .qa_block .arrow {
        right: 3rem;
    }
}

/* service */
.service_block {
    background-color: var(--color-green);
    color: var(--color-white);
    border-radius: 40rem;
    position: relative;
    overflow: hidden;
}
.service_lead {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}
.service_lead::before,
.service_lead::after {
    content: '';
    background: url(../img/top/ttl_deco_white_l.svg) no-repeat left center/ 100%;
    width: 43rem;
    height: 61rem;
    position: absolute;
}
.service_desc {
    display: flex;
    justify-content: center;
}
.service_desc_inner > dt {
    font-size: 20rem;
}
.service_desc_txt {
    border-top: solid 2px var(--color-white);
}
.service_desc_btn {
    font-size: 20rem;
}
.service_info {
    margin-top: 20rem;
}
.service_info > li::before {
    content: '※';
}
/* fany_illust */
.service .fany_illust_red_shop,
.service .fany_illust_shop_bag {
    position: absolute;
}
.service .ill_kirakira_6 {
    width: 22rem;
}
.service .ill_kirakira_7 {
    width: 15rem;
}
@media (min-width: 768px) {
    .service {
        padding-top: 160rem;
    }
    .service_block {
        padding: 44rem 74rem 52rem;
        position: relative;
    }
    .service_lead {
        font-size: 28rem;
        line-height: 1.2;
    }
    .service_lead .color_yellow {
        font-size: 40rem;
    }
    .service_lead::before,
    .service_lead::after {
        bottom: -3rem;
    }
    .service_lead::before {
        left: calc(50% - 300rem);
    }
    .service_lead::after {
        right: calc(50% - 292rem);
        transform: scale(-1, 1);
    }
    .service_desc {
        margin-top: 30rem;
        column-gap: 56rem;
    }
    .service_desc_txt {
        font-size: 16rem;
        line-height: 1.75;
        margin-block: 12rem 24rem;
        padding-top: 14rem;
    }
    .service_desc_btn {
        padding-block: 16rem;
    }
    .service_info > li {
        font-size: 14rem;
        line-height: 1.7;
    }
    /* fany_illust */
    .service .fany_illust_red_shop {
        width: 151rem;
        left: -62rem;
        top: 40rem;
    }
    .service .fany_illust_shop_bag {
        width: 79rem;
        right: 150rem;
        top: 53rem;
    }
    .service .ill_kirakira_6 {
        right: 120rem;
        top: 73rem;
    }
    .service .ill_kirakira_7 {
        right: 105rem;
        top: 58rem;
    }
}
@media (max-width: 767px) {
    .service {
        padding-top: 80rem;
    }
    .service .container {
        padding-inline: 16rem;
    }
    .service_block {
        padding: 40rem 24rem 48rem;
    }
    .service_lead {
        font-size: 16rem;
        line-height: 1.4;
    }
    .service_lead .color_yellow {
        font-size: 24rem;
    }
    .service_lead::before,
    .service_lead::after {
        top: 50%;
        transform: translateY(-50%);
    }
    .service_lead::before {
        left: calc(50% - 152rem);
    }
    .service_lead::after {
        right: calc(50% - 152rem);
        transform: translateY(-50%) scale(-1, 1);
    }
    .service_desc {
        margin-top: 192rem;
        flex-direction: column;
        row-gap: 32rem;
    }
    .service_desc_txt {
        line-height: 1.7;
        margin-block: 10rem 16rem;
        padding-top: 14rem;
    }
    .service_desc_btn {
        padding-block: 14rem 16rem;
    }
    .service_info > li {
        font-size: 12rem;
        line-height: 1.8;
    }
    /* fany_illust */
    .service .fany_illust_red_shop {
        width: 245rem;
        left: -199rem;
        top: 116rem;
    }
    .service .fany_illust_shop_bag {
        width: 63rem;
        right: 60rem;
        top: 225rem;
    }
    .service .ill_kirakira_6 {
        right: 65rem;
        top: 190rem;
    }
    .service .ill_kirakira_7 {
        right: 55rem;
        top: 176rem;
    }
}

/* app_area */
.app_area,
.app_area_block,
.app_area_download,
.app_area_download_inner {
    display: flex;
}
.app_area,
.app_area_block,
.app_area_download,
.app_area_download_inner {
    align-items: center;
}
.app_area {
    justify-content: center;
}
.app_area_block {
    background-color: var(--color-lightgray);
    column-gap: 16rem;
}
@media (min-width: 768px) {
    .app_area {
        margin-top: 80rem;
        column-gap: 32rem;
    }
    .app_area_txt {
        line-height: 1.6;
        font-size: 24rem;
    }
    .app_area_txt_inner {
        font-size: 48rem;
    }
    .app_area_block {
        padding: 24rem 56rem;
        border-radius: 104rem;
    }
    .app_area_download {
        column-gap: 8rem;
    }
    .app_area_download_inner {
        flex-direction: column;
        row-gap: 5rem;
    }
}
@media (max-width: 767px) {
    .app_area {
        margin-top: 60rem;
        flex-direction: column;
        row-gap: 16rem;
    }
    .app_area_txt {
        line-height: 1.4;
        font-size: 20rem;
        text-align: center;
    }
    .app_area_txt_inner {
        font-size: 36rem;
    }
    .app_area_block {
        padding: 27rem 23rem;
        border-radius: 24rem;
    }
    .app_area_download {
        flex-direction: column-reverse;
        align-items: start;
        row-gap: 18rem;
    }
    .app_area_download_inner {
        column-gap: 8rem;
    }
}

/* btn_follow */
.btn_follow {
    position: fixed;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.btn_follow.is_visible {
    opacity: 1;
    pointer-events: auto;
}
.btn_follow_inner {
    border: none;
    background-color: inherit;
    cursor: pointer;
}
@media (min-width: 768px) {
    .btn_follow {
        width: 140rem;
        bottom: 10rem;
        right: 10rem;
    }
}
@media (max-width: 767px) {
    .btn_follow {
        width: 88rem;
        bottom: 5rem;
        right: 5rem;
    }
}