@charset "UTF-8";

/*-------------------------------------------*/
/*  PC
/*-------------------------------------------*/

@media screen and (min-width:900px) {

    /* =====================
      bookmark
    ===================== */

    #bookmark {
        padding-top: 10px;
    }

    .bookmark_head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .bookmark_icon {
        width: 24px;
    }

    .bookmark_ttl {
        font-weight: 700;
        font-size: 22px;
    }

    .bookmark_conts {
        margin-top: 10px;
    }

    .bookmark_section + .bookmark_section {
        margin-top: 40px;
    }

    .bookmark_sub {
        background: #FFF6F2;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        padding: 8px 15px;
        margin: 32px 0 20px;
    }

    .bookmark_steps {
        display: flex;
        flex-wrap: wrap;
        gap: 28px 32px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bookmark_steps li {
        flex: 0 0 calc((100% - 64px) / 3);
        position: relative;
    }

    .bookmark_steps li::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-left: 12px solid var(--color-main);
        position: absolute;
        top: 44%;
        right: -24px;
        transform: translateY(-50%);
    }

    .bookmark_steps li:nth-child(3n)::after,
    .bookmark_steps li:last-child::after {
        display: none;
    }

    .bookmark_step_img {
        border: none;
    }

    .bookmark_step_img picture {
        display: block;
        height: 100%;
    }

    .bookmark_step_img img {
        height: 100%;
        object-fit: contain;
    }

    .bookmark_section-iphone .bookmark_step_img {
        aspect-ratio: 360 / 738;
    }

    .bookmark_section-android .bookmark_step_img {
        aspect-ratio: 540 / 1137;
    }

    .bookmark_step_text {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 16px;
        margin-top: 15px;
    }

    .bookmark_step_text .num {
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-main);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        flex: 0 0 22px;
        margin-top: 2px;
    }

    .bookmark_step_text .label {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bookmark_step_text .em {
        font-weight: 700;
    }

}

/*-------------------------------------------*/
/*  SP
/*-------------------------------------------*/

@media screen and (max-width:899px) {

    /* =====================
      bookmark
    ===================== */

    #bookmark {
        padding-top: 10px;
    }

    .bookmark_head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .bookmark_icon {
        width: 24px;
    }

    .bookmark_ttl {
        font-weight: 700;
        font-size: 20px;
    }

    .bookmark_conts {
        margin-top: 10px;
    }

    .bookmark_section + .bookmark_section {
        margin-top: 32px;
    }

    .bookmark_sub {
        background: #FFF6F2;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        padding: 8px 15px;
        margin: 28px 0 16px;
    }

    .bookmark_steps {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 16px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .bookmark_steps li {
        flex: 0 0 calc((100% - 16px) / 2);
        position: relative;
    }

    .bookmark_steps li::after {
        display: none;
    }

    .bookmark_step_img {
        border: none;
    }

    .bookmark_step_img picture {
        display: block;
        height: 100%;
    }

    .bookmark_step_img img {
        height: 100%;
        object-fit: contain;
    }

    .bookmark_section-iphone .bookmark_step_img {
        aspect-ratio: 360 / 738;
    }

    .bookmark_section-android .bookmark_step_img {
        aspect-ratio: 540 / 1137;
    }

    .bookmark_step_text {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        font-size: 16px;
        margin-top: 10px;
    }

    .bookmark_step_text .num {
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--color-main);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        flex: 0 0 20px;
        margin-top: 2px;
    }

    .bookmark_step_text .label {
        flex: 1 1 auto;
        min-width: 0;
    }

    .bookmark_step_text .em {
        font-weight: 700;
    }

}