@media screen and (max-width: 767px) {
    main{margin-bottom: 56px;}

    /* ---共通ユーティリティ--- */
    .u-sp-mt8 { margin-top: 8px; }
    .u-sp-mt16 { margin-top: 16px; }
    .u-sp-mt24 { margin-top: 24px; }
    .u-sp-mt56 { margin-top: 56px; }
    .u-f20-l15-bold{
        font-weight: 700;
        font-size: 20px;
        line-height: 150%;
    }
    .u-f26-l15-bold{
        font-weight: 700;
        font-size: 26px;
        line-height: 150%;
    }
    .u-sp-f24 {
        font-size: 24px;
    }
    /* ---共通ユーティリティ--- */

    /* ---共通--- */
     .section__br--sp-only {
        display: block;
    }
    .section__br--pc-only {
        display: none;
    }
    .section__br--sp-space {
        display: inline;
    }
    .section__button{
        height: 50px;
    }
    /* ---共通--- */

    /* ---Section: CTA (ボタン・注釈エリア)--- */
    .section__list-note{
        padding-left: 8px;
    }
    .section__button{
        font-size: 16px;
    }
    .section__button-notes{
        text-align: left;
    }
    /* ---Section: CTA (ボタン・注釈エリア)--- */

    /* ---Section: Steps (3ステップエリア)--- */
    .p-steps__inner{
        padding: 56px 0px;
    }
    .content .section__h2 + *:not(.section__heading-lead), .content .section__h3 + *:not(.section__heading-lead), .content .section__h4 + *:not(.section__heading-lead) {
     margin-top: 24px;
    }
    .p-steps__list {
        flex-direction: column;
        align-items: center;
        gap: 26px;
    }
    .p-steps__item {
        width: 100%;
        min-height: auto;
        padding: 15px;
    }
    .p-steps__item:not(:last-child)::after {
        top: auto;
        bottom: -20px;
        right: 50%;
        transform: translate(50%, 0) rotate(0deg);
    }
    .p-steps__item-body {
        justify-content: flex-start;
    }
    .p-steps__condition {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }
    .p-steps__item:nth-child(2) .p-steps__item-body {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .p-steps__condition {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
    .p-steps__plus-symbol {
        width: 100%;  
        display: flex; 
        justify-content: center;
    }
    .p-steps__plus-symbol--fit-icon {
        width: auto;
    }
    .p-steps__item:nth-child(2) {
         min-height: 225px; 
    }
    .p-steps__item:first-of-type {
        max-height: 148px;
    }
    .p-steps__item:last-of-type {
        max-height: 148px;
    }
    /* ---Section: Steps (3ステップエリア)--- */

    /* --- Section: incentives（特典エリア） --- */
    /* 逆三角形（▼）の作成 */
    .p-incentives.section.bg-image::before {
        top: -1px;
        height: 40px;
        clip-path: polygon(0% 0, 100% 0, 50% 100%);
    }
    .p-incentives__title {
        font-size: 24px;
    }
    .p-incentives__item-header {
        line-height: 43px;
    }
    .p-incentives__item{
        padding: 24px 15px 40px;
        border-radius: 24px;
    }
    .p-incentives__item-title{
        margin-top: 24px;
    }
    .p-incentives {
        padding-top: 96px;
        padding-bottom: 15px;
    }
    .p-incentives__list {
        gap: 32px;
    }
    .section__button-wrap--tight{
        padding: 0px 15px;
    }
    .section__accordion-body-inner {
        padding-top: 0px;
    }
    .p-incentives__item-header {
        max-width: 100%;
        min-height: 43px;
    }
    .p-incentives__inner-table thead th{
    border: 1px solid #c0d2ff;
    }
    .p-incentives__inner-table tbody td:first-child{
        border-left: 1px solid #c0d2ff;
    }
    .p-incentives__inner-table thead th{
        border: 1px solid #c0d2ff;
    }
    .p-incentives__inner-table thead th:first-child,
    .p-incentives__inner-table tbody td:first-child{
        border: 1px solid #c0d2ff;
    }
    .section__table-body--another tr:last-child td{
        border-bottom: 1px solid #c0d2ff;
    }
    /* テーブルエリア */
    .section__table--another,
    .section__table-body--another,
    .section__table-row--another,
    .section__table-head--another,
    .section__table-data--another {
        display: block;
        width: 100%; 
    }
    .section__table-body--another th,
    .section__table-body--another td{
        border-bottom: none;
    }
    /* --- Section: incentives（特典エリア） --- */

    /* --- Section: spec（みずほ楽天カード基本情報） --- */
    .p-spec-table__row-head {
        width: 30%;
        padding: 7px;
        vertical-align: middle;
    }
    .section__table-head--responsive br {
        display: none;
    }
    .section__table--responsive:nth-child(n+2) {
        text-align: left !important;
    }
    .p-spec-table__inner{
        padding: 56px 0px;
    }
    /* --- Section: spec（みずほ楽天カード基本情報） --- */

    /* --- Section: caution-area（ご注意事項） --- */
    .p-caution-area__inner{
        padding-top: 56px;
    }
    .p-caution-area__body-inner{
        font-weight: 500;
        padding: 0px 16px 14px;
    }
    /* --- Section: caution-area（ご注意事項） --- */

    /* --- Section: floating（フローティング） --- */
    .section__button--high-priorityr{
        border-radius: 25px;
    }
    .floating-conversion__inner{
        gap:15px;
        padding: 10px;
    }
    .floating-conversion .section__button{
        padding: 0px;
        height: 48px;
    }
    /* --- Section: floating（フローティング） --- */
}