main{ 
    margin-top: 15px;
    margin-bottom: 80px;
}

/* ---共通ユーティリティ--- */
.u-mt0 { margin-top: 0px; }
.u-ml4  { margin-left: 4px; }
.u-ml6  { margin-left: 6px; }
.u-mt8  { margin-top: 8px; }
.u-mt16 { margin-top: 16px; }
.u-mt24 { margin-top: 24px; }
.u-mt32 { margin-top: 32px; }
.u-pb8 { padding-bottom: 8px; }
.u-pt80 { padding-top: 80px; }
.u-pb80 { padding-bottom: 80px; }

.u-tc-blue{ color: #08287F !important;}

.u-f12-l16-medium{
    font-weight: 500;
    font-size: 12px;
    line-height: 160%;
}
.u-f12-l16-bold{
    font-weight: 700;
    font-size: 12px;
    line-height: 160%;
}
.u-f14-l22-medium{
    font-weight: 500;
    font-size: 14px;
    line-height: 22.4px;
}
.u-f16-l15-bold{
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
}
.u-f16-l16-medium{
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
}
.u-f16-l16-bold{
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
}
.u-f20-l15-bold{
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
}
.u-f24-l15-bold{
    font-weight: 700;
    font-size: 24px;
    line-height: 150%;
}
.u-f30-l15-bold{
    font-weight: 700;
    font-size: 30px;
    line-height: 150%;
}
.u-font-arial {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}
/* ---共通ユーティリティ--- */

/* ---共通--- */
.section{
    margin-top: 0px !important;
}
.section__list{
    max-width: 966px;
    width: 100%;
}
.sp-only-space,
.section__br--sp-only,
.section__br--sp-space {
    display: none;
}
.section__br--pc-only {
    display: block;
}
.section__list-normal-low {
    padding-left: 23px;
}
.section__list-normal-low::before{
    margin-left: 8px;
}
.section__list-note{
    font-weight: 500;
    font-size: 14px;
    line-height: 22.4px;
}
.section__list-normal::before{
    background: #333;
}
.section__list.char1 > .section__list-item {
    padding-left: 15px !important; 
}
.section__list.char2 > .section__list-item{
    padding-left: 23px;
}
.section__link {
    display: inline;
}
/* ---共通--- */

/* ---Section: CTA (ボタン・注釈エリア)--- */
.bg-gray{
    background: #F3F3F3;
}
.p-notices__item{
    max-width: 714px;
    padding: 32px 0px;
    margin: auto;
}
.p-notices__text{
    font-weight: 500;
    font-size: 12px;
    line-height: 160%;
    padding-left: 14px !important;
}
.section__list-char{
    left: 0;
    position: absolute;
}
/* --- Section: CTA (ボタン・注釈エリア) --- */

/* --- Section: Steps (3ステップエリア) --- */
.p-steps__inner{
    padding: 80px 0px;
}
.p-steps--bg-blue{
    background: #F6F9FF;
}
.p-spec--bg-blue{
    background: #F0F4FF;
}
.section__h2{
    font-weight: 700;
    font-size: 30px;
    line-height: 39.2px !important;
    text-align: center;
    color: #285AE1;
}
.p-steps__list {
    max-width: 966px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 36px;
    margin: auto;
}
.p-steps__item {
    flex: 1;
    min-height: 225px; 
    background: #fff;
    border: 2px solid #285AE1;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.p-steps__item:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -30px; 
    width: 20px;
    height: 10px;
    background: url(/common2024/images/icon/icon_triangle_bottom02.png) no-repeat center/contain;
    transform: translateY(-50%) rotate(-90deg);
}
.p-steps__item-text,
.p-steps__item-subtext {
    text-align: left;
}
.p-steps__item:last-of-type {
    max-width: none;
}
.p-steps__item-icon--finish img{
    width: auto;
    max-width: none;
}
.p-steps__item-subtext{
    font-weight: 500;
    font-size: 14px;
    line-height: 160%;
}
/* 上部の青いラベル（ステップ 1など） */
.p-steps__item-header {
    width: 100%;
    background: #285AE1;
    color: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
    text-align: center;
}
/* カードの中身のレイアウト */
.p-steps__item-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.p-steps__item:first-of-type .p-steps__item-body {
    gap: 15px;
}
.p-steps__item:last-of-type .p-steps__item-body{
    gap: 15px;
}
.p-steps__item:nth-child(2) .p-steps__item-body {
    flex-direction: column;
    justify-content: center;
}
.p-steps__item-text {
    font-weight: 700;
    font-size: 16px;
    line-height: 160%;
    flex: 1;
}
.p-steps__condition{
    display: flex;
    align-items: center;
    gap:10px;
}
.p-steps__plus-symbol--fit-icon{
    margin: 8px 0px;
}
/* --- Section: Steps (3ステップエリア) --- */

/* --- Section: incentives（特典エリア） --- */
/* 逆三角形（▼）の作成 */
.p-incentives.section.bg-image {
    position: relative;
}
.p-incentives.section.bg-image::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #F6F9FF; 
    clip-path: polygon(-1% 0, 100% 0, 50% 100%);
}
/* 逆三角形（▼）の作成 */
.p-incentives{
    padding-top: 140px;
    padding-bottom: 35px;
}
.bg-image {
    background-image: url("/special/rakutencard_campaign_lp/images/bg_01_pc.png");
    background-repeat: repeat;
    background-size: cover;
    background-position: center;
}
.p-incentives__title {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 39.2px;
}
.p-incentives__list{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* 各特典カードアイテム */
.p-incentives__item {
    background: #fff;
    border-radius: 40px;
    padding: 32px 42px;
}
.p-incentives__item-header {
    max-width: 882px;
    line-height: 49px;
    min-height: 49px;
    margin: auto;
    background: #285AE1;
    color: #fff;
    text-align: center;
    border-radius: 8px;
}
.p-incentives__item-body {
    max-width: 714px;
    margin: auto;
}
.p-incentives__item-title {
    text-align: center;
    color: #285AE1;
}
.p-incentives__banner img {
    max-width: 100%;
    height: auto;
}
/* アコーディオン */
.u-table-prevent-collapse{
    display: block;
    width: 100%;
}
.section__list-normal-low{
    margin: 0px !important;
}
.section__table-head{
    padding: 7px;
}
.section__table-data {
    padding: 7px;
}
.section__accordion-body-inner {
    padding: 16px 14px;
}
.section__table-head--strong{
    width:80px
}
.section__table--responsive {
    width: 33.33%; 
}
/* 特典1進呈条件アコーディオン */
.p-incentives__inner-table .section__table-head{
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
}
.p-incentives__inner-table .section__table-data{
    font-weight: 500;
    font-size: 12px;
    line-height: 160%;
}
.p-incentives__inner-table thead .section__table-row th{
    text-align: center;
}
.p-incentives__inner-table .section__table-row td:first-child {
    text-align: center;
}
.p-incentives__inner-table .section__table-head span {
    display: block; 
}
.section__table-data--nested{
    padding: 0px !important;
    border-top: none;
    border-left: none;
    border-bottom: none;
}
.p-incentives__inner-table thead th{
    border-top: none;
}
.p-incentives__inner-table thead th:first-child,
.p-incentives__inner-table tbody td:first-child{
    border-left: none;
}
.p-incentives__inner-table thead th:last-child,
.p-incentives__inner-table tbody td:last-child{
    border-right: none;
}
.p-incentives__inner-table tbody tr:last-child td{
    border-bottom: none;
}
/* 特典2エリア　カードアイテム　ボタン */
.section__button--tertiary{
    border: 2px solid #BF0000;
    color: #BF0000;
}
.section__button--tertiary[target=_blank]::after {
    background: url(/common2024/images/icon/icon_blank_red.svg) no-repeat;
}
/* --- Section: incentives（特典エリア） --- */

/* --- Section: spec（みずほ楽天カード基本情報） --- */
.p-spec-table__inner {
    margin-top:32px !important;
}
.p-spec-table__title-note {
    top: -0.5em; 
    color: #333;
    padding-left: 4px;
}
/* --- Section: spec（みずほ楽天カード基本情報） --- */

/* --- Section: caution-area（ご注意事項） --- */
.p-caution-area__inner{
    max-width: 714px;
}
.p-caution-area__body-inner{
    font-weight: 500;
    padding: 0px 0px 16px 0px;
}
.p-caution-area__list-note:nth-child(n+2) {
    margin:0px;
}
.p-spec-table__row-head {
    width: 30%;
    padding: 12px;
}
/* --- Section: caution-area（ご注意事項） --- */

/* --- Section: floating（フローティング） --- */
.section__button--high-priorityr{
    background-color: #fff;
    border: 2px solid #08287f;
    color: #08287f;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}
.section__button--high-priorityr:hover{
    color: #fff;
}
.floating-conversion__inner{
    gap:12px;
    padding: 12px;
}
.floating-conversion .section__button{
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    height: 56px;
}
/* --- Section: floating（フローティング） --- */

/* --- 768px以上　レスポンシブ --- */
/* --- tel: テキスト化--- */
@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
        color: inherit;
    }
}
/* --- tel: テキスト化---- */