/**
* @file app.css
* @path \kaikyunavi_renewal\public\css\new_customer\end\app.css
*/
@charset "UTF-8";
.recommend-card .sd {
    flex-wrap: nowrap;
    max-width: 100%;
    pointer-events: all;
    z-index: 0;
    -webkit-overflow-scrolling: touch;
    align-content: center;
    align-items: center;
    display: flex;
    flex: none;
    flex-direction: column;
    position: relative;
}
.recommend-card .sd.icon, .sd.text {
    align-content: center;
    align-items: center;
    display: flex
;
    flex-direction: row;
    justify-content: center;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.recommend-card .sd[data-s-8b828597-1a4f-42ec-bf4e-0770b9968465] {
    align-items: center;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    padding: 0px;
    width: 100%;
    max-width: 100%;
}
.recommend-card .sd[data-s-00fbc2f1-75eb-47d5-9928-760ed186eda8] {
    align-items: flex-end;
    flex-direction: column;
    gap: 0px;
    height: auto;
    justify-content: flex-start;
    margin: 0px;
    padding: 0px;
    width: 100%;
    --gap-h-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
    --gap-v-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
    --gap-uuid: 00fbc2f1 -75eb -47d5 -9928 -760ed186eda8;
    max-width: 100%;
}
.recommend-card .sd[data-s-c4aec041-e7ae-4869-83f5-78fbc6f0b599] {
    align-items: center;
    background: linear-gradient(var(--g-angle), var(--g-color-0) var(--g-position-0), var(--g-color-1) var(--g-position-1));
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    margin: 0px;
    padding: 70px 40px 63px 40px;
    width: calc(100% - (var(--gap-h-00fbc2f1-75eb-47d5-9928-760ed186eda8) * 0));
    max-width: calc(100% - (var(--gap-h-00fbc2f1-75eb-47d5-9928-760ed186eda8) * 0));
    --g-color-0: rgb(47, 205, 255);
    --g-position-0: 0%;
    --g-color-1: rgb(27, 122, 232);
    --g-position-1: 100%;
    --g-color-2: rgb(27, 122, 232);
    --g-position-2: 100%;
    --g-color-3: rgb(27, 122, 232);
    --g-position-3: 100%;
    --g-color-4: rgb(27, 122, 232);
    --g-position-4: 100%;
    --g-color-5: rgb(27, 122, 232);
    --g-position-5: 100%;
    --g-color-6: rgb(27, 122, 232);
    --g-position-6: 100%;
    --g-color-7: rgb(27, 122, 232);
    --g-position-7: 100%;
    --g-color-8: rgb(27, 122, 232);
    --g-position-8: 100%;
    --g-color-9: rgb(27, 122, 232);
    --g-position-9: 100%;
    --g-color-10: rgb(27, 122, 232);
    --g-position-10: 100%;
    --g-color-11: rgb(27, 122, 232);
    --g-position-11: 100%;
    --g-angle: 135deg;
}
.recommend-card .sd[data-s-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6] {
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 42px;
    height: auto;
    justify-content: flex-start;
    padding: 0px;
    width: 100%;
    --gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 0px;
    --gap-v-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 42px;
    --gap-uuid: 0ae6b50c -a8aa-489e-87b1-d65fbefa71f6;
    max-width: 100%;
}
.recommend-card .sd[data-s-7d85771b-3087-4c92-bbf4-124e67222f55] {
    color: #FFFFFF;
    font-family: var(--s-font-34b9ec73);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    height: 27px;
    letter-spacing: 0em;
    line-height: 34px;
    text-align: center;
    width: calc(100% - (var(--gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6) * 0));
    max-width: calc(100% - (var(--gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6) * 0));
    justify-content: center;
}
.recommend-card .sd[data-s-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae] {
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 37px;
    height: auto;
    justify-content: flex-start;
    padding: 0px;
    width: auto;
    --gap-h-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 37px;
    --gap-v-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 0px;
    --gap-uuid: 8a5ea5cc -13b6 -4be9 -94ab -16f52aab00ae;
    max-width: 100%;
}
.recommend-card .sd[data-s-ad856f72-f821-49ba-be0d-73bc296e0387] {
    align-items: center;
    flex: none;
    flex-direction: column;
    height: auto;
    justify-content: center;
    width: 76px;
    max-width: 100%;
}
.recommend-card .sd[data-s-e8189639-9f94-4add-9c0d-5d24fc45c2b3] {
    align-content: flex-start;
    align-items: flex-start;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0px;
    height: auto;
    justify-content: flex-start;
    padding: 0px;
    width: 198px;
    --gap-h-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
    --gap-v-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
    --gap-uuid: e8189639-9f94-4add-9c0d-5d24fc45c2b3;
    max-width: 100%;
}
.recommend-card .sd[data-s-1606efcd-5443-4a91-bf51-bc7b51b9903d] {
    align-items: center;
    flex-direction: column;
    height: auto;
    justify-content: center;
    width: calc(100% - (var(--gap-h-e8189639-9f94-4add-9c0d-5d24fc45c2b3) * 0));
    max-width: calc(100% - (var(--gap-h-e8189639-9f94-4add-9c0d-5d24fc45c2b3) * 0));
}
.recommend-card .sd[data-s-1e1d00c2-31fd-45ae-9ad6-2a261b41a78a] {
    color: #FFFFFF;
    font-family: var(--s-font-34b9ec73);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    height: auto;
    letter-spacing: 0em;
    line-height: 27px;
    text-align: left;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
}
.recommend-card .sd[data-s-192db6ce-4f51-4ead-9c50-49a1dffe2ac6] {
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 21px;
    height: auto;
    justify-content: center;
    padding: 0px;
    width: calc(100% - (var(--gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6) * 0));
    --gap-h-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 21px;
    --gap-v-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 0px;
    --gap-uuid: 192db6ce -4f51 -4ead -9c50 -49a1dffe2ac6;
    max-width: calc(100% - (var(--gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6) * 0));
}
.recommend-card .sd[data-s-5881bc38-293f-4166-b263-983ffa0318f5] {
    background: transparent;
    flex: none;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    height: auto;
    width: auto;
    --gap-h-5881bc38-293f-4166-b263-983ffa0318f5: 20px;
    --gap-v-5881bc38-293f-4166-b263-983ffa0318f5: 0px;
    --gap-uuid: 5881bc38 -293f -4166 -b263-983ffa0318f5;
    max-width: 100%;
}
.recommend-card .sd[data-s-bd98171e-593f-4a74-b4fb-cf663e6efa38] {
    align-content: flex-start;
    align-items: flex-start;
    background: transparent;
    flex: none;
    height: auto;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
}
.recommend-card .sd[data-s-fc641816-fa11-4422-8789-a659177743f3] {
    height: auto;
    width: 200.00000000000003px;
    max-width: 100%;
}
.recommend-card .sd[data-s-c73aed02-69a6-4c0b-ad9e-762f9c0ade03] {
    align-content: flex-start;
    align-items: flex-start;
    background: transparent;
    flex: none;
    height: auto;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
}
.recommend-card .sd[data-s-61a66829-0d40-4cde-b37d-2a8da2972a01] {
    flex: none;
    height: auto;
    width: 200px;
    max-width: 100%;
}
.recommend-card .sd[data-s-e919ed9a-663b-4ecf-9b35-23565632e2e7] {
    align-content: flex-start;
    align-items: flex-start;
    background: #FFFFFF;
    border-radius: 20px;
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    height: auto;
    justify-content: flex-start;
    padding: 15px 42px 15px 42px;
    width: 360px;
    --gap-h-e919ed9a-663b-4ecf-9b35-23565632e2e7: 0px;
    --gap-v-e919ed9a-663b-4ecf-9b35-23565632e2e7: 10px;
    --gap-uuid: e919ed9a-663b-4ecf-9b35-23565632e2e7;
    max-width: 100%;
}
.recommend-card .sd[data-s-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5] {
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;
    height: auto;
    justify-content: flex-start;
    padding: 0px;
    width: calc(100% - (var(--gap-h-e919ed9a-663b-4ecf-9b35-23565632e2e7) * 0));
    --gap-h-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 30px;
    --gap-v-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 0px;
    --gap-uuid: d10d9bf3-4eaf-4827-aa25-c7e90ac380b5;
    max-width: calc(100% - (var(--gap-h-e919ed9a-663b-4ecf-9b35-23565632e2e7) * 0));
}
.recommend-card .sd[data-s-4ba9d6f4-fac9-4089-aa87-570960be748c] {
    color: #464646;
    flex: none;
    font-family: var(--s-font-34b9ec73);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    height: 47px;
    letter-spacing: 0em;
    line-height: 27px;
    text-align: left;
    width: 155px;
    max-width: 100%;
    justify-content: flex-start;
}
.recommend-card .sd[data-s-8eb84d44-b559-46ac-a7b5-b8a41aa66fb6] {
    align-items: center;
    border-radius: 10px;
    box-shadow: 3px 3px 9px 0px rgba(0, 0, 0, 0.1599999964237213);
    flex: none;
    flex-direction: column;
    height: auto;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 90px;
    max-width: 100%;
}
@media screen and (max-width: 375px) {
    .recommend-card .sd[data-s-8b828597-1a4f-42ec-bf4e-0770b9968465] {
        padding: 0px;
    }
    .recommend-card .sd[data-s-00fbc2f1-75eb-47d5-9928-760ed186eda8] {
        margin: 0px;
        padding: 0px;
        --gap-h-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
        --gap-v-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
    }
    .recommend-card .sd[data-s-c4aec041-e7ae-4869-83f5-78fbc6f0b599] {
        padding: 20px 20px 20px 20px;
    }
    .recommend-card .sd[data-s-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6] {
        gap: 20px;
        padding: 0px;
        --gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 0px;
        --gap-v-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 20px;
    }
    .recommend-card .sd[data-s-7d85771b-3087-4c92-bbf4-124e67222f55] {
        font-size: 15px;
    }
    .recommend-card .sd[data-s-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae] {
        gap: 16px 10px;
        padding: 0px;
        --gap-h-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 10px;
        --gap-v-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 0px;
    }
        .recommend-card .sd[data-s-ad856f72-f821-49ba-be0d-73bc296e0387] {
        flex: none;
        height: auto;
        margin: 0px 0px 0px 0px;
        width: 53px;
        max-width: 100%;
    }
    .recommend-card .sd[data-s-e8189639-9f94-4add-9c0d-5d24fc45c2b3] {
        padding: 0px;
        --gap-h-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
        --gap-v-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
    }
    .recommend-card .sd[data-s-1e1d00c2-31fd-45ae-9ad6-2a261b41a78a] {
        font-size: 13px;
    }
    .recommend-card .sd[data-s-192db6ce-4f51-4ead-9c50-49a1dffe2ac6] {
        gap: 10px 0px;
        padding: 0px;
        --gap-h-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 0px;
        --gap-v-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 0px;
    }
    .recommend-card .sd[data-s-5881bc38-293f-4166-b263-983ffa0318f5] {
        align-content: center;
        align-items: center;
        flex: none;
        justify-content: center;
        --gap-h-5881bc38-293f-4166-b263-983ffa0318f5: 20px;
        --gap-v-5881bc38-293f-4166-b263-983ffa0318f5: 0px;
    }
    .recommend-card .sd[data-s-bd98171e-593f-4a74-b4fb-cf663e6efa38] {
        flex: none;
        width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
        max-width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
    }
    .recommend-card .sd[data-s-fc641816-fa11-4422-8789-a659177743f3] {
        flex: none;
    }
    .recommend-card .sd[data-s-c73aed02-69a6-4c0b-ad9e-762f9c0ade03] {
        flex: none;
        width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
        max-width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
    }
    .recommend-card .sd[data-s-61a66829-0d40-4cde-b37d-2a8da2972a01] {
        flex: none;
    }
    .recommend-card .sd[data-s-e919ed9a-663b-4ecf-9b35-23565632e2e7] {
        display: none;
        gap: 4px;
        --gap-h-e919ed9a-663b-4ecf-9b35-23565632e2e7: 0px;
        --gap-v-e919ed9a-663b-4ecf-9b35-23565632e2e7: 4px;
    }
    .recommend-card .sd[data-s-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5] {
        gap: 14px 0px;
        padding: 0px;
        --gap-h-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 0px;
        --gap-v-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 0px;
    }
    .recommend-card .sd[data-s-4ba9d6f4-fac9-4089-aa87-570960be748c] {
        font-size: 13px;
    }
}


@media screen and (max-width: 768px) {
    .recommend-card .sd[data-s-8b828597-1a4f-42ec-bf4e-0770b9968465] {
        padding: 0px;
    }
    .recommend-card .sd[data-s-00fbc2f1-75eb-47d5-9928-760ed186eda8] {
        margin: 0px;
        padding: 0px;
        --gap-h-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
        --gap-v-00fbc2f1-75eb-47d5-9928-760ed186eda8: 0px;
    }
    .recommend-card .sd[data-s-c4aec041-e7ae-4869-83f5-78fbc6f0b599] {
        padding: 20px 20px 20px 20px;
    }
    .recommend-card .sd[data-s-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6] {
        gap: 20px;
        padding: 0px;
        --gap-h-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 0px;
        --gap-v-0ae6b50c-a8aa-489e-87b1-d65fbefa71f6: 20px;
    }
    .recommend-card .sd[data-s-7d85771b-3087-4c92-bbf4-124e67222f55] {
        font-size: 15px;
    }
    .recommend-card .sd[data-s-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae] {
        gap: 16px 10px;
        padding: 0px;
        --gap-h-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 10px;
        --gap-v-8a5ea5cc-13b6-4be9-94ab-16f52aab00ae: 0px;
    }
        .recommend-card .sd[data-s-ad856f72-f821-49ba-be0d-73bc296e0387] {
        flex: none;
        height: auto;
        margin: 0px 0px 0px 0px;
        width: 53px;
        max-width: 100%;
    }
    .recommend-card .sd[data-s-e8189639-9f94-4add-9c0d-5d24fc45c2b3] {
        padding: 0px;
        --gap-h-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
        --gap-v-e8189639-9f94-4add-9c0d-5d24fc45c2b3: 0px;
    }
    .recommend-card .sd[data-s-1e1d00c2-31fd-45ae-9ad6-2a261b41a78a] {
        font-size: 13px;
    }
    .recommend-card .sd[data-s-192db6ce-4f51-4ead-9c50-49a1dffe2ac6] {
        gap: 10px 0px;
        padding: 0px;
        --gap-h-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 0px;
        --gap-v-192db6ce-4f51-4ead-9c50-49a1dffe2ac6: 0px;
    }
    .recommend-card .sd[data-s-5881bc38-293f-4166-b263-983ffa0318f5] {
        align-content: center;
        align-items: center;
        flex: none;
        justify-content: center;
        --gap-h-5881bc38-293f-4166-b263-983ffa0318f5: 20px;
        --gap-v-5881bc38-293f-4166-b263-983ffa0318f5: 0px;
    }
    .recommend-card .sd[data-s-bd98171e-593f-4a74-b4fb-cf663e6efa38] {
        flex: none;
        width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
        max-width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
    }
    .recommend-card .sd[data-s-fc641816-fa11-4422-8789-a659177743f3] {
        flex: none;
    }
    .recommend-card .sd[data-s-c73aed02-69a6-4c0b-ad9e-762f9c0ade03] {
        flex: none;
        width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
        max-width: calc(50% - (var(--gap-h-5881bc38-293f-4166-b263-983ffa0318f5) * 0.5));
    }
    .recommend-card .sd[data-s-61a66829-0d40-4cde-b37d-2a8da2972a01] {
        flex: none;
    }
    .recommend-card .sd[data-s-e919ed9a-663b-4ecf-9b35-23565632e2e7] {
        display: none;
        gap: 4px;
        --gap-h-e919ed9a-663b-4ecf-9b35-23565632e2e7: 0px;
        --gap-v-e919ed9a-663b-4ecf-9b35-23565632e2e7: 4px;
    }
    .recommend-card .sd[data-s-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5] {
        gap: 14px 0px;
        padding: 0px;
        --gap-h-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 0px;
        --gap-v-d10d9bf3-4eaf-4827-aa25-c7e90ac380b5: 0px;
    }
    .recommend-card .sd[data-s-4ba9d6f4-fac9-4089-aa87-570960be748c] {
        font-size: 13px;
    }
}
.recommend-card .pf-ttl_wrap--001 .pf-ttl {
    border-bottom: none;
    padding: 0;
}
.recommend-card .pf-ttl_wrap--002 .pf-ttl {
    border-bottom: none;
    padding: 0;
}
.recommend-card .pf-button--001.pf-button--c-primary.pf-button-detail {
    display: block;
    width:90%;
    margin-left:5%;
    margin-bottom:10px;
}
.recommend-card .btn-like,
.recommend-card .btn-apply{
    width: 100%;
}
.recommend-card .button-row {
    display: flex;
    justify-content: space-between; /* 横並びに配置 */
    gap: 10px;                      /* ボタン間の余白 */
    width:90%;
    margin-left:5%;
}

.recommend-card .button-row .pf-grid_col,
.recommend-card .button-row .pf-grid_col {
    flex: 1; /* グリッド列を均等に */
}

.recommend-card .btn-hope{
    width: 90%;
    display: flex;
    align-items: center;
    gap: 6px;
    height:56px;
}

.recommend-card .btn-hope .btn-icon {
    position: absolute;
    left: 20px;           /* アイコン位置 */
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 39px;
    pointer-events: none; /* アイコンはクリック不可 */
}
/* スライドカードを横並びにする */
.recommend-card .swiper-slide {
    display: flex;
}
/* カード内の要素を縦並びにする（高さ調整） */
.recommend-card .pf-card--015_02 {
    display: flex;
    flex-direction: column;
    min-height: 420px;  /* 最低高さを指定し、見た目を整える */
    padding-bottom: 10px;
}
.recommend-card .pf-card--015_02 > div:first-child {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* カードボタンエリア最下部に配置 */
.recommend-card .card-bottom-buttons {
    margin-top: auto;
}
.recommend-card .entry-together{
    margin-bottom: -10px;
    margin-top: -30px;
}
/* 希望タイトルはPCのみ表示 */
.recommend-card .hope-title-sp {
    display: none;
}
.recommend-card .hope-title-pc {
    display: inline-block;
}
.recommend-card .pf-comp-008 [data-show-count-pc="2"] .swiper-slide {
    width: 50%;
}
@media screen and (max-width: 767px) {
    .recommend-card .pf-ttl_wrap--001 .pf-ttl strong {
        font-size:16px;
    }
    .recommend-card .pf-comp-004 {
        margin-top: 20px;
        margin-bottom: 0px;
    }
    .recommend-card .entry-box-oubo-item2 {
        width: 100% !important;
        margin-left: 0% !important;
    }
    .recommend-card .card-bottom-buttons {
        margin-bottom: 10px;
    }
    .recommend-card .entry-together {
        margin-bottom: -8px;
    }
    .recommend-card .button-row-hope {
        flex-wrap: nowrap;
        display: block;
        width: 100%;
        margin-left: 0%;
    }
    .recommend-card .btn-hope {
        width: calc(50% - 10px);
    }
    .recommend-card .btn-hope {
        width: 100%;
        margin-bottom:10px;
    }
    .recommend-card .btn-hope .btn-icon {
        left: 10px;
    }
    .recommend-card .hope-title-sp {
        display: inline-block;
    }
    .recommend-card .hope-title-pc {
        display: none;
    }
    .recommend-card .pf-box {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* FB */
@media screen and (max-width: 767px) {
    .recommend-card .recommend-title-area {
    margin-top: 30px;
    margin-bottom: 0px;
    }
    .recommend-card .recommend-title-wrap::before {
        text-align: center;
        height: 20px;
        width: 8px;
        border-radius: 2px;
    }
    .recommend-card .recommend-pf-ttl {
        line-height: 1.25 !important;
    }
    .recommend-card .pf-button--001.pf-button--c-primary.pf-button-detail {
        margin-top: 5px;
    }
    .recommend-card .pf-button--c-secondary {
        height: 55px;
        margin-bottom: 8px;
    }
    .recommend-card .pf-button--heart {
        height: 55px;
        margin-bottom: 8px;
    }

    .recommend-card .pf-button--c-primary {
        height: 55px;
        line-height: 2.6;
    }
    .recommend-card .pf-card-item-table .td-detail {
        font-size: 11px !important;
    }
    .recommend-card .pf-card-item-table .td-title {
        font-size: 11px !important;
    }
    .recommend-card .pf-button--arrow-right {
        height: 55px;
    }
    .recommend-card .pf-hope-action {
        margin-top: 5px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 380px) {
    .recommend-card .hope-title-sp {
        width: 98%;
    }
}

@media screen and (min-width: 768px) {
    /* ここにPC向けなどのスタイルを記述 */
    .recommend-card .pf-card-item-table .td-detail {
        font-size: 11px !important;
    }
    .recommend-card .pf-card-item-table .td-title {
        font-size: 11px !important;
    }
    .recommend-card .pf-button--001.pf-button--c-primary.pf-button-detail {
        margin-top: 5px;
    }
    .recommend-card .pf-button--heart {
        height: 55px;
        margin-bottom: 8px;
    }
    .recommend-card .pf-button--c-secondary {
        height: 55px;
        margin-bottom: 8px;
    }
    .recommend-card .pf-button--c-primary {
        height: 55px;
    }
    .recommend-card .pf-button--arrow-right {
        height: 55px;
    }
    .recommend-card .button-row-hope .hope-col-left {
        margin-right: -34px;
    }
    .recommend-card .button-row-hope .hope-col-right {
        margin-right: -34px;
    }
    .recommend-card .pf-hope-action {
        margin-bottom: -20px;
    }
    .recommend-card .entry-together{
        margin-bottom: -14px;
        margin-top: -30px;
    }

}
@media screen and (min-width: 980px) {
    /* 1件表示（PC想定）だけボタン横並びを安定させる */
    .recommend-card .card-bottom-buttons-single {
        /* text-align: left; */
        margin-top: 0px;              /* カード本文との余白 */
    }

    .recommend-card .card-bottom-buttons-single .button-row-single{
        display: flex;
        align-items: left;
        gap: 10px;                      /* ボタン間の余白 */
        flex-wrap: nowrap;              /* 3つを同一行に固定 */
    }

    /* pf-grid_col が block 幅を持って崩すケースがあるので、single時だけ上書き */
    .recommend-card .card-bottom-buttons-single .button-row-single > .pf-grid_col{
        flex: 0 0 auto;
        width: auto;
    }

    /* ボタンの高さを揃える（中のlabel有無で高さがズレるの対策） */
    .recommend-card .card-bottom-buttons-single a,
    .recommend-card .card-bottom-buttons-single button{
        height: 60px;                   /* 既存デザインに合わせて調整 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 「あと◯日」ラベルがある時に縦ズレしないように */
    .recommend-card .card-bottom-buttons-single .pf-button_label{
        line-height: 1;
    }
    .recommend-card .card-bottom-buttons-single .pf-button--001.pf-button--c-primary.pf-button-detail {
        margin-top: 0px;
    }
    .recommend-card .card-bottom-buttons-single
    .recommend-card .pf-button--001.pf-button--c-primary.pf-button-detail {
        display: inline-flex;   /* or flex */

    }

}

/* 3カラムの比率（210/420/210）に寄せる：必要ならpx→%に変更でもOK */
@media (min-width: 768px){
    .recommend-card .card-bottom-buttons-single .button-row-single > .pf-grid_col--pc-210{
        flex-basis: 210px;
    }
    .recommend-card .card-bottom-buttons-single .button-row-single > .pf-grid_col--pc-420{
        flex-basis: 420px;
    }
}

@media screen and (min-width: 1100px) {
    .recommend-card .button--heart-single {
        max-width: 220px;
        min-width: 191px;
        width: 220px !important;
        margin-left: -22px;
        height: 55px !important;
    }
    .recommend-card .button--c-primary-single {
        height: 55px !important;
        width: 436px !important;
        margin-left: -4px !important;
    }
    .recommend-card .button--c-secondary-single {
        max-width: 220px;
        min-width: 191px;
        height: 55px !important;
        width: 220px;
        transform: translateX(8px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
    .recommend-card .button--c-secondary-single {
        height: 55px !important;
    }
    .recommend-card .button--heart-single {
        height: 55px !important;
    }
    .recommend-card .button--c-primary-single {
        height: 55px !important;
    }
}
@media (min-width: 768px) and (max-width: 980px) {
    .recommend-card .button--c-secondary-single {
        height: 55px !important;

    }
    .recommend-card .button--heart-single {
        height: 55px !important;
    }
    .recommend-card .button--c-primary-single {
        height: 55px !important;
    }
    /* 1件表示（PC想定）だけボタン横並びを安定させる */
    .recommend-card .card-bottom-buttons-single {
        /* text-align: left; */
        margin-top: 0px;              /* カード本文との余白 */
    }

    .recommend-card .card-bottom-buttons-single .button-row-single{
        display: flex !important;
    }




    /* 「あと◯日」ラベルがある時に縦ズレしないように */
    .recommend-card .card-bottom-buttons-single .pf-button_label{
        line-height: 1;
    }

    .recommend-card .card-bottom-buttons-single
    .recommend-card .pf-button--001.pf-button--c-primary.pf-button-detail {
        display: inline-flex;   /* or flex */
        margin-top: 0px;

    }

}
@media screen and (max-width: 767px) {
    .recommend-card .pf-container_inner {
        padding: 0 12px !important;
    }
}
@media screen and (max-width: 380px) {
    .recommend-card .pf-container_inner {
        padding: 0 10px !important;
    }
}
/* FB */
/* FB2 */
@media screen and (max-width: 767px) {
    .recommend-card .pf-card-item-table .td-detail {
        padding-left: 1em;
    }
    .recommend-card .resume-button--001 {
        font-size: 18px !important;
    }
}
/* 768px以上（タブレット・PC） */
@media screen and (min-width: 768px) {
    .recommend-card .pf-ttl_wrap--001::before {
        text-align: center;
        height: 20px;
        width: 8px;
        border-radius: 2px;
    }
    .recommend-card .pf-ttl_wrap--001::before {
        background-color: #238fe8;
        content: "";
        left: 0;
        position: absolute;
        top: 4px;
    }

    .recommend-card .pf-card-item-table2 tr {
        border: none;
        line-height: 1em;
        padding: 3px 0;
        color: rgb(27, 32, 33) !important;
    }
    .recommend-card .pf-card-item-table .td-detail {
        padding-left: 1em;
    }

    .recommend-card .detail-single-column {
        margin-right: -8px !important;
        margin-left: -8px !important;
    }
    .recommend-card .pf-card-item-table .td-detail {
        font-size: 11px !important;
    }
    .recommend-card .resume-button--001 {
        font-size: 18px !important;
    }
}

/* 380px以下の範囲指定 */
@media screen and (max-width: 380px) {
    /* ここに適用したい要素のセレクタを追加 */
    .recommend-card .pf-card_tag_item {
        margin-left: 2.6px !important;
    }

    .recommend-card .pf-util_pl--20 {
        padding-left: 15px !important;
    }
    .recommend-card .pf-util_pr--20 {
        padding-right: 15px !important;
    }
    .recommend-card .pf-card-item-table .td-detail {
        font-size: 11px !important;
    }
}

/* 381px ～ 400px の範囲指定 */
@media screen and (min-width: 381px) and (max-width: 400px) {

}

/* 401px ～ 767px の範囲指定 */
@media screen and (min-width: 401px) and (max-width: 767px) {
    .recommend-card .list-button {
        font-size: 18px !important;
    }
    .recommend-card .change-button {
        font-size: 18px !important;
    }
}

/* 1000px以上の範囲指定 */
@media screen and (min-width: 1000px) {
    .recommend-card .pf-button--c-primary {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 850px) {
    .recommend-card .list-button {
        font-size: 16px !important;
    }
    .recommend-card .change-button {
        font-size: 16px !important;
    }
}
/* 850px以上の範囲指定 */
@media screen and (min-width: 851px) {
    .recommend-card .list-button {
        font-size: 18px !important;
    }
    .recommend-card .change-button {
        font-size: 18px !important;
    }
}
/* FB2 */