/***********************************
    common.css  WordPress作成ページおよびHTML作成ページに共通なCSS（ヘッダー、フッター含む）
    wp.css  WordPressで作成しているページにのみ必要なCSSを記述
>>  spms.css  スポンサーシップ・マンスリーのページにのみ必要なCSSを記述
   *********************************/



/************************************
  スポンサーシップ・プログラムページ用 
**************************************/

.sponsorship-overview-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .sponsorship-overview-flex {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }
    .sponsorship-overview-txt {
        flex: 1;
    }
    .sponsorship-overview-img {
        flex: 0 0 400px; /* 画像の幅を固定または調整 */
    }
}
.sponsorship-vision-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 0px;
}
.sponsorship-vision-img {
    max-width: 375px;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .sponsorship-vision-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
    .sponsorship-vision-txt {
        flex: 1;
    }
    .sponsorship-vision-img {
        flex: 0 0 300px;
    }
}
@media screen and (min-width: 1024px) {
    .sponsorship-vision-img {
        flex: 0 0 350px;
    }
}

/* Titles & Headings */
.contents-title {
    padding: 15px;
    background-color: #007a45;
    text-align: center;
}
.contents-title h1 {
    color: #fff;
    font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
    .contents-title { padding: 25px; }
    .contents-title h1 { font-size: 2.4rem; }
}

/* Section Images (Titles) */
/*.txt-flexible { text-align: left; margin-bottom: 20px; font-size: 2.6rem; }*/
.txt-flexible img { max-width: 100%; height: auto; }

/* Main Visual */
.contents-mv {
    position: relative;
    text-align: center;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}
.contents-mv .fv-img {
    width: 100%;
    display: block;
}
.contents-mv #mv01_02 {
    position: absolute;
    bottom: -10%;
    right: 5%;
    width: 28%;
    max-width: 150px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Lead Section */
.contents-lead { padding: 10px 0 0 0; }
.contents-lead h2 { text-align: left; }
.lead-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
@media screen and (max-width: 767px) {
    .lead-flex {
        overflow: hidden;
        align-items: flex-start;
    }
    .lead-img {
        flex: 3;
        margin-bottom: 5px;
    }
    .lead-text {
        flex:7;
    }
}
.lead-img {
    max-width: 150px;
}
.article_body .contents-lead p {
    margin: 0;
}
@media screen and (min-width: 768px) {
    .lead-flex {
        justify-content: center;
        gap: 40px;
        max-width: 1000px;
    }
    .contents-lead p { flex: 1; max-width: 800px; text-align: left; }
    .contents-lead h2 img { width: auto; max-width: 100%; }
    .lead-img {
        flex: 0 0 150px;
    }
}

/* --- About Section (Countries) --- */
div.fixed-page .article_body .article_content ul.country-list { margin-top: 20px; margin-left: 0; padding-left: 0;}
.country-item {
    display: flex; /* Flexbox for Mobile & PC */
    margin-bottom: 25px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.country-item:last-child { border-bottom: none; margin-bottom: 0; }

.country-img { flex: 0 0 120px; margin-right: 15px; } /* Fixed width for image container */
.country-txt { flex: 1; }
.article_body .country-txt h4{
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    /* 3 Column Grid for PC */
    .country-list {
        display: flex;
        gap: 30px;
        justify-content: space-between;
        align-items: stretch;
    }
    .country-item {
        flex-direction: column;
        width: 32%;
        border-bottom: none;
        margin-bottom: 0;
        background: #fff;
        padding: 20px;
        border-radius: 8px;
    }
    .country-img { flex: 0 0 auto; text-align: center; margin-bottom: 15px; }
    .country-img img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; }
}

/* --- Story Section --- */
@media screen and (min-width: 768px) {
    .sponsorship-story .txt { max-width: 800px; margin: 0 auto 20px; text-align: center; }
    .sponsorship-story .img-flexible { text-align: center; margin-bottom: 30px; }
    .sponsorship-story .img-flexible img { width: 80%; max-width: 600px; }
}
@media screen and (min-width: 1024px) {
    .sponsorship-story .img-flexible img { width: 100%; max-width: 800px; }
}
.story-title {
    color: #007a45;
    font-size: 130%;
    margin-top: 0;
}

/* --- Slider Section --- */
.slider-container {
    position: relative;
    max-width: 900px; /* 矢印のスペースを確保するためにコンテナを広げる */
    margin: 20px auto 0 auto;
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .slider-container {
        max-width: 85%; /* 80%だと狭すぎたため85%に微調整 */
    }
}
.slider-outer {
    overflow: hidden;
    border-radius: 8px;
    max-width: 800px; /* スライド自体の最大幅 */
    margin: 0 auto;
}
.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.slide {
    min-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
}
@media screen and (max-width: 767px) {
    .slide {
        flex-direction: column;
        align-items: center;
/*        text-align: center;*/
    }
    .slide img {
        flex: 0 0 auto !important;
        margin-bottom: 15px;
        width: 100%!important;
    }
}
.article_content .slide img,
.slide img {
    flex: 0 0 30%;
    max-width: 375px;
    width: 30%;
    display: block;
    border-radius: 8px;
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .slide {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 折り返しを禁止 */
        align-items: flex-start !important;
        gap: 20px !important;
        width: 100% !important;
    }
    .article_content .slide img,
    .slide img {
        flex: 0 0 calc(30% - 10px) !important;
        max-width: 30% !important; /* 幅を制限 */
        width: 100% !important;
        height: auto !important;
    }
    .slide .slide-txt {
        flex: 1 1 calc(70% - 10px) !important; /* 柔軟に広がるように */
        min-width: 0 !important;
        text-align: left !important;
        overflow: visible !important; /* 隠れないように */
    }
}
.slide .slide-txt {
    flex: 1;
    font-size: 1.4rem;
    line-height: 1.6;
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #84bd00;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: none; /* デフォルト非表示 */
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.3s;
}
@media screen and (max-width: 767px) {
    .slider-btn { display: flex; width: 25px; height: 25px; }
    .slider-btn::after { width: 8px; height: 8px; }
}
@media screen and (min-width: 768px) {
    .slider-btn { display: flex; } /* PCでは表示 */
}
.slider-btn:hover {
    background:#84bd00;
}
.slider-btn.prev { left: 5px; }
.slider-btn.next { right: 5px; }
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .slider-btn.prev { left: -45px; }
    .slider-btn.next { right: -45px; }
}
@media screen and (max-width: 767px) {
    .slider-btn.prev { left: -20px; }
    .slider-btn.next { right: -20px; }
}

.slider-btn::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: inline-block;
}
.slider-btn.prev::after { transform: rotate(-135deg); margin-left: 4px; }
.slider-btn.next::after { transform: rotate(45deg); margin-right: 4px; }

.slider-dots {
    text-align: center;
}
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.dot.active {
    background: #007a45;
}

/* --- Support Section (3 Columns) --- */
div.fixed-page .article_body .article_content ul.support-list {
    padding: 20px;
    margin: 0px;
    border: 1px solid #007a45;
    border-radius: 10px;
    position: relative;
}
div.fixed-page .article_body .article_content ul.support-list li{
    list-style: none;
}
/* 吹き出しの三角形（外枠） */
div.fixed-page .article_body .article_content ul.support-list::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 16px 22px 16px;
    border-color: transparent transparent #007a45 transparent;
    z-index: 1;
}
/* 吹き出しの三角形（内側の塗りつぶし：背景色と同じにして線を表現） */
div.fixed-page .article_body .article_content ul.support-list::after {
    content: '';
    position: absolute;
    top: -20px; /* 線の太さを1pxに調整 */
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 15px 21px 15px; /* 下側のborderを少し伸ばして下の線を隠す */
    border-color: transparent transparent #fff transparent;
    z-index: 2;
}
.support-list li {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .support-list li {
    padding: 20px 0;
    }
}
.support-list h3 {
    color: #007a45;
    font-size: 2.0rem;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #e5f1ec;
    padding-bottom: 10px;
    margin-top: 0;
}
.support-content { display: flex; gap: 15px; }
@media screen and (max-width: 767px) {
    .support-content {
        flex-direction: column;
        align-items: center;
/*        text-align: center;*/
    }
    .support-img {
        width: 100%;
        text-align: center;
        flex: 0 0 106px;
    }
    .support-img img {
        max-width: 300px;
    }
}
.support-img { flex: 0 0 200px; }
.support-img img{ border-radius: 10px; }

/* Nested DL styles */
.support-list dl dt { color: #007a45; font-weight: bold; margin-top: 10px; }
.support-list dl dd { margin-bottom: 10px; font-size: 1.3rem; }

@media screen and (min-width: 768px) {
    .support-list { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
    .support-list li { width: calc(50% - 10px); margin-bottom: 0; display: flex; flex-direction: column; }
    .support-content { flex-direction: row; align-items: flex-start; text-align: left; height: 100%; }
    .support-content .txt { text-align: left; margin-top: 0; }
}
.article_body  .support-content p{
    margin-top: 0;
}
/* --- Program Section (Prices & Examples) --- */
.program-examples dt {
    background-color: #007a45;
    padding: 15px;
    border-radius: 10px 10px 0 0;
    text-align: center;
}
/* Make title image white or visible on green bg */
.program-examples dt img { filter: brightness(0) invert(1); max-width: 100%; }

.program-examples dd {
    background-color: #e5f1ec;
    padding: 20px;
    border-radius: 10px;
    margin-left: 0;
}

.program-img-row {
    display: block; /* Mobile: Stacked */
}
.program-img-item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 5px;
    align-items: flex-start;
}
@media screen and (max-width: 767px) {
    .program-img-item {
        flex-direction: column;
        align-items: center;
/*        text-align: center;*/
        border-bottom: none;
    }
    .article_content .program-img-item img {
        order: 1;
        width: 100%;
        max-width: 375px;
        flex: 0 0 auto !important;
    }
    .program-img-item h4 {
        order: 2;
        margin: 0;
    }
    .program-img-item p {
        order: 3;
        margin-top: 0;
    }
}
.program-img-item img {
    flex: 0 0 100px; /* モバイルでの画像幅 */
    margin: 0 auto 10px;
}
.program-img-item:last-child { margin-bottom: 0; }

@media screen and (min-width: 768px) {
    .program-examples { max-width: 960px; margin: 0 auto; }
    .program-img-row { display: flex; gap: 40px; justify-content: space-between; }
    .program-img-item {
        width: calc(33.333% - 27px);
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
        flex-direction: column;
    }
    .program-img-item img {
        flex: 0 0 auto;
        display: block;
    }
}
@media screen and (min-width: 1024px) {
    .program-img-item img {
        width: 100%; /* PC表示（1024px以上）では元の大きさに */
    }
}

/* Gray border white box */
.box-gray-border {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    font-size: 1.4rem;
}

/* Payment List */
.payment-list {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}
.payment-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    font-weight: bold;
}
.payment-list li:last-child { border-bottom: none; }
.payment-list span { display: block; font-weight: normal; color: #666; margin-top: 5px; }

@media screen and (min-width: 768px) {
    .payment-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .payment-list li { width: 45%; border-bottom: none; background: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
}

/* --- Letter Section (Image + Text) --- */
.letter-content { display: block; }
@media screen and (min-width: 768px) {
    .letter-content { display: flex; align-items: center; gap: 40px; margin-top: 30px; }
    .letter-img { flex: 0 0 300px; margin-bottom: 0 !important; }
    .letter-txt { flex: 1; text-align: left !important; }
}
.sponsorship-letter .letter-img img {
    width: 250px;
}
@media screen and (max-width: 767px) {
    .sponsorship-letter .letter-img img {
        width: 200px;
    }
}

.article_body p.micro-copy {
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 5px;
}


/* --- Deduction Section --- */
.sponsorship-deduction {
    margin: 40px 0;
}
.deduction-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
@media screen and (min-width: 768px) {
    .deduction-flex {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }
    .deduction-txt {
        flex: 1;
    }
    .deduction-img {
        flex: 0 0 350px;
    }
    .deduction-img img{
        margin-top: 25px!important;
    }
}
@media screen and (min-width: 1024px) {
    .deduction-img {
        flex: 0 0 450px;
    }
}
.deduction-img {
    width: 100%;
    max-width: 375px;
}
.deduction-img img{
    border-radius: 10px;
    margin-top: 0;
}

.deduction-example img {
    max-width: 100%;
    height: auto;
}
.deduction-note {
    text-align: left;
    font-size: 1.2rem;
    max-width: 800px;
    color: #666;
    line-height: 1.5;
}

/* --- Voice Section --- */
.voice-slider-container {
    position: relative;
    max-width: 1000px;
    margin: 40px auto;
}
.voice-slider-outer {
    overflow: hidden;
    width: 100%;
}
.voice-slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.voice-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0 0px;
}
.voice-container {
    background: #f2eee4;
    padding: 25px 110px 5px 110px;
    border-radius: 10px;
    height: 100%;
    border: 1px solid #ddd;
}
.voice-intro {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
    align-items: flex-start;
}
.voice-intro-img {
    flex: 0 0 120px;
}
.voice-intro-img img {
    border-radius: 50px;
    width: 100px;
    height: auto;
    object-fit: cover;
}
/* 廣田さんの画像のみ2倍にするための特定クラス */
.voice-intro-img.hirota-img {
    flex: 0 0 240px;
}
.voice-intro-img.hirota-img img {
    width: 220px;
}
.voice-intro-txt {
    flex: 1;
}
.sponsorship-voice h3 {
    color: #007a45;
}
@media screen and (max-width: 767px) {
    .sponsorship-voice h3 {
        font-size:23px;
    }
    .voice-intro-txt h4 {
        margin-bottom: 15px;
    }
}

.voice-text {
    line-height: 1.8;
    margin-top: 10px;
}
.voice-text p {
    margin-top:0;
    margin-bottom: 1.5em;
}
.voice-text p:last-child {
    margin-bottom: 0;
}

/* Voice Slider Controls */
.voice-slider-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    background: transparent;
    color: #84bd00;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}
.voice-slider-btn:hover {
    opacity: 0.7;
}
@media screen and (max-width: 767px) {
    .voice-slider-btn { width: 30px !important; height: 30px !important; }
    .voice-slider-btn::after { width: 10px !important; height: 10px !important; }
    .voice-slider-btn.prev { left: 5px !important; }
    .voice-slider-btn.next { right: 0px !important; }
}
@media screen and (max-width: 1023px) {
    .voice-slider-btn.prev { left: 40px; }
    .voice-slider-btn.next { right: 40px; }
}
@media screen and (min-width: 1024px) {
    .voice-slider-btn.prev { left: 50px; }
    .voice-slider-btn.next { right: 50px; }
}
.voice-slider-btn::after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #84bd00;
    border-right: 3px solid #84bd00;
    display: inline-block;
}
.voice-slider-btn.prev::after { transform: rotate(-135deg); margin-left: 4px; }
.voice-slider-btn.next::after { transform: rotate(45deg); margin-right: 4px; }

.voice-slider-dots {
    text-align: center;
    margin-top: 20px;
}
.voice-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.voice-dot.active {
    background: #007a45;
}

@media screen and (max-width: 767px) {
    .voice-container {
        padding: 20px 30px 0 30px !important;
    }
    .voice-intro {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 15px !important;
    }
    .voice-intro p{
        text-align: justify!important;
    }

    .voice-intro-img {
        flex: 0 0 50px !important;
        margin-bottom: 0 !important;
    }
    .voice-intro-img img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 25px !important;
        object-fit: cover !important;
    }
    /* 廣田さんの特定クラス調整（モバイル） */
    .voice-intro:has(.hirota-img) {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .voice-intro-img.hirota-img {
        flex: 0 0 auto !important;
        margin-bottom: 15px !important;
    }
    .voice-intro-img.hirota-img img {
        width: 200px !important;
        height: auto !important;
        border-radius: 10px !important;
    }
}


/*************************************************
マンスリー・サポーター用のCSS
*********************************************/

/* --- Monthly Program Section --- */
.monthly-program {
    margin: 40px 0;
}
.monthly-program h2 {
    margin-bottom: 30px;
/*    font-size: 2.2rem;
    color: #333;*/
}
.monthly-program-lead {
    margin-bottom: 1.5em;
    line-height: 1.8;
}
.monthly-program-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
}
.monthly-program-item {
    display: flex;
    flex-direction: column;
    background: #f2f7e8;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.monthly-program-img {
    width: 100%;
    overflow: hidden;
}
.monthly-program-img img {
    width: 100%;
    max-width: 480px;
    display: block;
    margin: 0 auto;
}
.monthly-program-item h4 {
    background-color: #84bd00;
    color: #fff;
    font-size: 1.8rem;
    padding: 15px;
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.monthly-program-content {
    padding: 20px;
    background-color: #f2f7e8; /* 添付画像に合わせた薄い黄緑の背景 */
    flex-grow: 1;
}
.article_body .monthly-program-content p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0;
    color: #333;
}

@media screen and (min-width: 768px) {
    .monthly-program-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .monthly-program-item {
        width: calc(33.333% - 20px);
    }
    .monthly-program-item h4 {
        font-size: 1.6rem;
        min-height: 4em; /* 高さを揃える */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .monthly-program-content {
        padding: 25px;
    }
}

/* --- Monthly Reward Section --- */
.article_body .monthly-reward-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    list-style: none;
    margin-left: 0;
}
.monthly-reward-list li {
    background: #f2eee4;

    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.monthly-reward-list h3 {
    background: transparent;
    color: #007a45;
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
}
.monthly-reward-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}
.monthly-reward-img img {
    width: 100%;
    max-width: 375px;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}
.monthly-reward-content .txt {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
}

@media screen and (min-width: 768px) {
    .article_body .monthly-reward-list {
        flex-direction: row;
        justify-content: space-between;
    }
    .monthly-reward-list li {
        width: calc(33.333% - 14px);
    }
    .monthly-reward-list h3 {
        min-height: 3em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.monthly-voice .voice-intro-txt h3{
    color: #007a45;
}

/* --- Monthly Dollar Section (Examples) --- */
.monthly-dollar-examples {
    background-color: #e5f1ec;
    padding: 20px;
    border-radius: 10px;
    margin-left: 0;
}
.monthly-dollar-row {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.monthly-dollar-item {
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}
.monthly-dollar-item p{
    text-align: justify;
}
.monthly-dollar-item img {
    width: 100%;
    max-width: 375px;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.monthly-dollar-item h4 {
    margin-top: 0;
    color: #007a45;
}
@media screen and (min-width: 768px) {
    .monthly-dollar-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    .monthly-dollar-item {
        width: calc(33.333% - 14px);
        display: flex;
        flex-direction: column;
    }
    .monthly-dollar-item p {
        text-align: left;
    }
}

.wrap-contents a.spms_cta {
    display:block;
    width:330px;
    margin: 20px auto 0;
    text-align:center;
    text-decoration:none;
    background-color: #fd9000;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
    height: 100%;
    line-height: 40px;
    padding-left: 15px;
    position: relative;
}

.wrap-contents a.spms_cta:before {
    content: '';
    background-color: #fff;
    border-radius: 50%;
    display: block;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
}

.wrap-contents a.spms_cta:after {
    content: '';
    border: 3px solid transparent;
    border-left: 5px solid #fd9000;
    display: block;
    height: 0;
    position: absolute;
    top: 17px;
    left: 18px;
    width: 0;
}