@charset "Shift_jis";

/*ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ

    三井住友Visa共通設定（2021/07/01以降用）
    三井住友Visaスーパーロード/Mastercardスーパーロードページ共通設定（2023/09/29以降用）

ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ*/

/************************************MV内の円************************************/

/************************************キャンペーン特典************************************/

.link_in_page_wrap {
    margin: 0 auto 20px;
}

/* キャンペーン詳細　色別 */

/*三井住友Visa*/
.nyukai_smcc #box_cpn .box_benefits .cpn_ttl {
    display: block;
    background: #ec6d8e;
}
.nyukai_smcc #box_cpn .box_benefits .cpn_color {
    color: #ec6d8e;
}

/*******************************ご利用特典部分*******************************/
.box_benefits .cpn_ttl_note {
    display: block;
    position: absolute;
    right: 1em;
    padding: 0.5em;
    border: 2px solid white;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    z-index: 1;
}

#box_cpn .cpn_text {
    line-height: 1.5;
}

#box_cpn .cpn_btm {
    display: block;
}

.box_benefits .btn_benefits_link_wrap {
    width: 620px;
    margin: 20px auto;
}

#contents_area .box_benefits a.btn_benefits_link {
    position: relative;
    display: block;
    padding: 1em;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.5;
}

/*Visa*/
.nyukai_smcc #contents_area .box_benefits a.btn_benefits_link {
    background: #76b708;
}

#contents_area .box_benefits a.btn_benefits_link::before {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
    transform: translateY(-50%);
    content: "";
}

#contents_area .box_benefits a.btn_benefits_link:hover {
    opacity: 0.8;
}

.cpn_note02 {
    margin-bottom: 2em;
    text-align: right;
    line-height: 1.5;
}

/*******************************ポイント還元シミュレーション部分*******************************/

.pointSimulation {
    margin-top: 40px;
    margin-bottom: 40px;
}

.pointSimulation__contentsWrap {
    box-sizing: border-box;
    position: relative;
    display: flex;
    gap: 20px 40px;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 2em;
    max-width: 890px;
    background-color: #fffcdb;
    border: 1px solid #000;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.5;
}

.pointSimulation__contents--ribbon {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-weight: bold;
    padding: 0.5em 1.2em 0.5em 0.5em;
    background-color: #e60013;
    font-size: 20px;
    line-height: 1;
    transform: translate(-20%, -50%) rotate(-10deg);
}
.pointSimulation__contents--ribbonPtn2 {
    position: static;
    transform: none;
}
.pointSimulation__contents--ribbonWrap {
    width: 100%;
}
.pointSimulation__contents--ribbonWrap2 {
    position: relative;
    margin-inline: auto;
    width: fit-content;
}
.pointSimulation__contents--ribbonWrap2 .pointSimulation__contents--ribbon {
    padding: 0.5em 1.2em 0.5em;
}

.pointSimulation__contents--ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.5em;
    height: 100%;
    background-image: linear-gradient(to bottom right, #e60013 50%, transparent 50%), linear-gradient(to top right, #e60013 50%, transparent 50%);
    background-size: 100% 50%, 100% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    /* ↓ブラウザによって若干切れるのを防ぐため100%にはしない */
    transform: translateX(99%);
}
.pointSimulation__contents--ribbonWrap2 .pointSimulation__contents--ribbon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0em;
    width: 0.5em;
    height: 100%;
    background-image: linear-gradient(to bottom right, #e60013 50%, transparent 50%), linear-gradient(to top right, #e60013 50%, transparent 50%);
    background-size: 100% 50%, 100% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    /* ↓ブラウザによって若干切れるのを防ぐため100%にはしない */
    transform: scaleX(-1) translateX(99%);
}

.pointSimulation__contents {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc((100% - 40px) / 2);
}

.pointSimulation__contents--achievement::after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    width: 1px;
    height: 100%;
    background-color: #000;
}

.pointSimulation__contentsHead {
    margin-bottom: 1em;
}

.pointSimulation__contentsHeadInner {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em 0.25em 1em;
    background-color: #e95283;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    z-index: 1;
}

.pointSimulation__contents--dailyUse .pointSimulation__contentsHeadInner {
    background-color: #008cd6;
}
.pointSimulation__contents--dailyUse02 .pointSimulation__contentsHeadInner {
    background-color: #9f6cab;
}

.pointSimulation__contentsHeadInner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0.5em;
    height: 100%;
    background-image: linear-gradient(to bottom right, #e95283 50%, transparent 50%), linear-gradient(to top right, #e95283 50%, transparent 50%);
    background-size: 100% 50%, 100% 50%;
    background-position: top left, bottom left;
    background-repeat: no-repeat;
    /* ↓ブラウザによって若干切れるのを防ぐため100%にはしない */
    transform: translateX(99%);
}

.pointSimulation__contents--dailyUse .pointSimulation__contentsHeadInner::after {
    background-image: linear-gradient(to bottom right, #008cd6 50%, transparent 50%), linear-gradient(to top right, #008cd6 50%, transparent 50%);
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

.pointSimulation__contents--dailyUse02 .pointSimulation__contentsHeadInner::after {
    background-image: linear-gradient(to bottom right, #9f6cab 50%, transparent 50%), linear-gradient(to top right, #9f6cab 50%, transparent 50%);
    background-position: top left, bottom left;
    background-repeat: no-repeat;
}

.pointSimulation__exampleList {
    margin-bottom: 1em;
    font-size: 18px;
}

.pointSimulation__exampleList dt {
    padding-left: 1em;
    text-indent: -1em;
    font-weight: bold;
}
.pointSimulation__exampleList dt:not(:first-of-type) {
    margin-top: 1em;
}

/* インデントによる「display: inline-block;」の表示崩れ対策 */
.pointSimulation__exampleList dt .dib {
    text-indent: 0;
}

.pointSimulation__exampleList dd {
    margin-top: 0.5em;
    padding-left: 1em;
}

.pointSimulation__exampleTextBalloon {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    background-color: #0096e0;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.pointSimulation__exampleTextBalloon::before {
    content: "";
    position: absolute;
    top: calc(-0.5em + 1px);
    left: 50%;
    width: 0;
    height: 0;
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-bottom: 0.5em solid #0096e0;
    transform: translateX(-50%);
}

.pointSimulation__exampleTotal {
    min-height: 90px;
    margin-top: auto;
    padding-top: 1em;
    padding-left: 1em;
    border-top: 1px dotted #727171;
    font-size: 18px;
    line-height: 1.5;
}
.pointSimulation__textColor {
    color: #e95283;
}
.pointSimulation__textColor.red {
    color: red;
}

.pointSimulation__contents--dailyUse .pointSimulation__textColor {
    color: #008cd6;
}

.pointSimulation__contents--dailyUse02 .pointSimulation__textColor {
    color: #9f6cab;
}
.pointSimulation__contents--dailyUse02 .pointSimulation__textColor.red {
    color: red;
}

.pointSimulation__contentsBalloon {
    width: 100%;
    padding: 1em 0.5em;
    background-color: #f0da8f;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
}
.pointSimulation__contentsBalloon .text_red {
    color: red;
}

/************************************ページ下部追従ボタン************************************/

.signup_img_wrap {
    display: flex;
    gap: 20px;
    width: 148px;
}

.signup_img_wrap img {
    width: 60px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.75);
}

.signup_txt_wrap {
    position: relative;
    top: 0;
}

.signup_txt01 {
    display: block;
    font-size: 14px;
}

a.btn_signup {
    /* justify-content: flex-start; */
    /* width: 440px; */
    height: 76px;
    /* margin: 0; */
    padding-left: 1em;
    /* transform: translateX(-18px); */
    /* background: linear-gradient(to right, #E84091 0%, #f059a2 48%, #ef69aa 100%); */
    background: #e84091;
}

a.btn_signup::after {
    border-top: 38px solid transparent;
    border-bottom: 38px solid transparent;
    /* border-left: 36px solid #ef69aa; */
    border-left: 36px solid #e84091;
}

a.btn_signup:hover {
    /* background: linear-gradient(to right, #ea539c, #f16aab, #f178b2); */
    background: #ea539c;
}

a.btn_signup:hover::after {
    /* border-left: 36px solid #f178b2; */
    border-left: 36px solid #ea539c;
}

.btn_signup__icon {
    position: absolute;
    top: 0;
    left: -1em;
    display: flex;
    padding: 0.25em 0.5em;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ffff00;
    color: #c80920;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    transform: translateY(-15%) rotate(-15deg);
}