@charset "UTF-8";

/*------   フォント    ------*/

@font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
  }
  @font-face {
    font-family: "NotoSansJP";
    font-style: normal;
    font-weight: 700;
    src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
  }
  @font-face {
    font-family: "NotoSansJP-Black";
    font-style: normal;
    font-weight: 900;
    src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
  } 
  @font-face {
    font-family: "DINAlternate";
    font-style: normal;
    font-weight: 700;
      src: local("DINAlternate-Bold"), local("DINAlternate-Bold"), url("/font/DINAlternate-Bold.woff2") format("woff2"), url("/font/DINAlternate-Bold.woff") format("woff");
  }

.rank-main {
    font-family: "NotoSansJP", "Noto Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    line-height: 1.6;
}

.rank-main .section {
    padding: 80px min(6.4vw, 24px);
}

.rank-main .heading_lv1 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 60px;
    color: #FF6E00;
    text-align: center;

}
.rank-main .heading_lv2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 24px;
    text-align: center;
}

.rank-main .section .heading_lv2:not(:first-child) {
    margin-top: 80px;
}

.rank-main .heading_lv3 {
    font-size: 16px;
    font-weight: bold;
}

.only-pc {
    display: none;
}

@media(min-width: 768px) {
    .rank-main .heading_lv1 {
        font-size: 50px;
        margin-top: 40px;
    }
    .rank-main .heading_lv2 {
        font-size: 32px;
        margin-bottom: 32px;
    }
    .rank-main .heading_lv3 {
        font-size: 22px;
    }

    .only-sp {
        display: none;
    }

    .only-pc {
        display: block;
    }
}


/* キービジュアル */
.rank-kv {
    background-color: #FDF8ED;
    padding-top: 60px;
    text-align: center;
    line-height: 1;
}

.kv-img {
    display: block;
    margin: 0 auto;
}

@media(min-width: 768px) {
    .rank-kv {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 40px;
    }
    .kv-img {
        display: block;
        margin: 0;
    }
}


/* バックス概要 */
.overview {
    max-width: 450px;
    margin: 0 auto;
}

@media(min-width: 768px) {
    .overview {
        max-width: inherit;
        margin: 0;
    }
}

/* 会員ランク */
.rank-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 8px;
}
.rank-list li:not(:first-child) {
    margin-top: 20px;
}
.rank-list li span {
    font-size: 22px;
    font-weight: bold;
}

.rank-list img {
    width: auto;
    height: auto;
}

.rank-list_bronze {
    color: #CC6132;
    border-bottom: solid 1px #CC6132;
}
.rank-list_sapphire {
    color: #529CC7;
    border-bottom: solid 1px #529CC7;
}
.rank-list_diamond {
    color: #E0A43B;
    border-bottom: solid 1px #E0A43B;
}

.rank-list_diamond img{
    margin-left: -5px;
}

@media(min-width: 768px) {
    .rank-list {
        display: flex;
        justify-content: space-between;
        max-width: 738px;
        margin: 0 auto;
    }

    .rank-list li {
        width: 216px;
        justify-content: center;
        gap: 12px;
        padding-bottom: 20px;
    }
    .rank-list li:not(:first-child) {
        margin-top: 0;
    }

    .rank-list_diamond img{
        margin-left: 0;
    }
}

/* ランクアップ特典 */
.rank-up_img {
    margin: 0 0 32px;
}
.rank-up_img img {
    display: block;
    width: 100%;
    max-width: 431px;
}
.rank-up_text {
    max-width: 512px;
}

.bacs-outline {
    margin-bottom: 36px;
}
.bacs-outline li {
    font-weight: bold;
    border-bottom: 1px solid #000;
    line-height: 1.7;
}
.bacs-outline li:not(:last-child) {
    margin-bottom: 18px;
}

.text_sm {
    font-size: 14px;
    line-height: 1.4;
}

@media(min-width: 768px) {
    .rank-main .section {
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .rank-up_wrapper {
        display: flex;
        gap: 56px;
        align-items: end;
        max-width: 1000px;
        margin: 0 auto;
    }
    .rank-up_img {
        margin: 0;
    }
    .bacs-outline li {
        font-size: 22px;
    }
    .rank-up_text {
        width: 80%;
    }
}

/* バックスとは */
.about-bacs {
    background-color: #F6F6F6;
}
.about-bacs .inner {
    max-width: 450px;
    margin: 0 auto;
}

@media(min-width: 768px) {
    .about-bacs .inner {
        max-width: 1000px;
    }
}

.about-bacs .heading_lv2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.about-bacs .heading_lv2 img {
    display: block;
    width: 40px;
    height: auto;
}
.about-bacs .heading_lv2 span {
    display: block;
    font-weight: bold;
}

.about-bacs .sub-text {
    font-weight: bold;
    margin-bottom: 32px;
}

.box_bg-color {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px 16px;
}

.about-bacs .box_bg-color {
    margin-bottom: 48px;
}

.heading_lv3.kihon {
    font-size: 24px;
    color: #FF6E00;
    border-bottom: 3px solid #FF6E00;
    margin-bottom: 40px;
}

.tamekata {
    text-align: center;
    margin-bottom: 24px;
}
.tamekata p {
    font-size: 22px;
    font-weight: bold;
}
.tamekata p span {
    display: inline-block;
    font-size: 14px;
}
.tamekata img {
    margin-bottom: 12px;
}

@media(min-width: 768px) {
    .about-bacs .heading_lv2 {
        gap: 10px;
    }
    .about-bacs .heading_lv2 img {
        width: 46px;
    }
    .sub-text {
        font-size: 18px;
        text-align: center;
    }
    .about-bacs .sub-text {
        margin-bottom: 64px;
    }

    .about-bacs .box_bg-color {
        padding: 40px 80px;
        margin-bottom: 80px;
    }
    .heading_lv3.kihon {
        font-size: 32px;
        color: #FF6E00;
        border-bottom: 5px solid #FF6E00;
        margin-bottom: 30px;
    }
    .tamekata {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }
    .tamekata p {
        font-size: 32px;
    }
}
/* その他の貯め方 */
.heading_lv3.sonota {
    width: 240px;
    margin: 0 auto 24px;
    border-radius: 50px;
    background-color: #fff;
    line-height: 38px;
    text-align: center;
}
.bacs-table, .bacs-table td, .bacs-table th {
	border: 1px solid #000;
	border-collapse: collapse;
    line-height: 1.5;
}
.bacs-table {
    margin: 0 auto 32px;
    width: 100%;
}
.bacs-table td, .bacs-table th {
	padding: 6px min(2.67vw, 10px);
}

.bacs-table th {
    background-color: #767676;
    color: #fff;
    /* font-size: 14px; */
    font-size: min(3.73vw,16px);
}
.bacs-table td {
    background-color: #fff;
    /* font-size: 12px; */
    font-size: min(3.2vw,16px);
}

.bacs-table td span {
    /* font-size: 8px; */
    font-size: min(3vw,16px);
}
.bacs-table td.point {
    text-align: right;
    padding-left: 4px;
    padding-right: 8px;
}

/* @media(min-width: 768px) {
    .bacs-table td span {
        font-size: min(2.13vw,16px);
    }
} */

/* 月1回ランク査定 */
.ranking > .box_bg-color {
    background-color: #F6F6F6;
    padding-top: 40px;
}
.ranking .sub-text {
    font-weight: bold;
}

.rank-timing {
    text-align: center;
    margin: 32px 0;
    padding-bottom: 40px;
}

.rank-timing .heading_lv3 {
    background-color: #F6F6F6;
    border-radius: 50px;
    line-height: 38px;
}

.rank-timing img {
    display: block;
    margin: 24px auto;
    padding-right: 38px;
}
.rank-timing p {
    font-weight: bold;
}
.ranking .text_sm {
    margin: 1em 0 0 0;
}

@media(min-width: 768px) {
    .ranking > .box_bg-color {
        max-width: 1000px;
        margin: 0 auto;
        padding: 40px;
        box-sizing:border-box;
    }
    .ranking .sub-text {
        font-size: 22px;
    }
    .ranking .heading_lv2{
        margin-bottom:0.7em!important;
    }
    .rank-timing {
        max-width: 830px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 0;
    }
    .rank-timing .heading_lv3 {
        width: 268px;
        font-size: 18px;
        margin-left: auto;
        margin-right: auto;
    }
    .rank-timing .inner {
        display: flex;
        justify-content: center;
        align-items: end;
        margin-top: 20px;
    }
    .rank-timing img {
        margin: 0;
        padding-right: 14px;
    }
    .rank-timing p {
        text-align: left;
        margin-bottom: 12px;
    }
    .ranking .text_sm {
        max-width: 830px;
        margin: 30px 0 0 50px;
    }
}