@charset "UTF-8";

/***************************************************************/

/* /kojin/visa_debit/landing__bleague/cam/

/***************************************************************/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
background-attachment: fixed;
background-color: #000;
overflow-x: hidden;
}

body {
    min-width: initial !important;
}

ul, li {list-style: none;}
img {width: 100%;}

.btnT01 {
    height: auto !important;
}

/*	プレロード
-----------------------------------------------------------	*/
.pre-i_0 {
width:0px;
height:0px;
display:inline;
background-image:url("../img/btn-app-active.png"),url("../img/btn-debit-active.png"),url("../img/btn-detail-active.png"),url("../img/btn-entry-active.png"),url("../img/btn-kaisetsu-active.png"),url("../img/btn-nowapp-active.png"),url("../img/btn-nowapp-active-s.png"),url("../img/btn-nowapp-s-active.png"),url("../img/btn-nowentry-active.png"),url("../img/btn-nowentry-active-s.png"),url("../img/btn-nowentry-s-active.png");
background-repeat: no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat , no-repeat;
}

.bleagueSp {display: none !important;}

.txt--s {
    font-size: 14px;
}

.white {color: #FFF;}
.text-indent {
    padding-left: 1em;
    text-indent: -1em;
}
sup {font-size: 60%;}

.horizon--gradient {
    width: 100%;
    margin: 20px auto;
    height: 1px;
    background: linear-gradient(to right,#ff2100, #d1601c 25%, #500694 75%, #090069);
}

.btn-wrap {
    margin: 0 auto;
    margin-bottom: 10px;
}

.btn-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.solid-btn {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    width: 100%;
}

.right__btn-wrap {
    margin-top: 40px;
}

.right__btn {
    margin-bottom: 20px;
}

.btn-wrap--l {
    width: 70%;
}

.btn-wrap--s {
    width: 50%;
    margin: 0 auto;
}
.btns__wrap--row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.btns__wrap-inner {
    width: 48%;
}

.btn-detail {
    margin-bottom: 20px;
}

a:hover > img {
    opacity: 1 !important;
}

.content-wrap {
    width: 80%;
    margin: 0 auto;
}
.content-wrap--ss {
    width: 50%;
    margin: 0 auto;
}
.content-wrap--s {
    width: 75%;
    margin: 0 auto;
}
.content-wrap--l {
    width: 90%;
    margin: 0 auto;
}

.splitBg--l {
    background-image: url(../img/bg-mv-right.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 37%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

.splitBg__img {
    position: absolute;
    inset: 0;
    animation-timing-function: ease-in-out;
}
.splitBg__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
    display: block;
    opacity: 0.7;
}

.splitBg__img--1 {
    animation: image-switch-animation_1 24s infinite;
}
.splitBg__img--2 {
    animation: image-switch-animation_2 24s infinite;
}
.splitBg__img--3 {
    animation: image-switch-animation_3 24s infinite;
}

@keyframes image-switch-animation_1 {
    0%   { opacity: 1; }
    18%  { opacity: 1; }
    33%  { opacity: 0; }
    75%  { opacity: 0; }
    90%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes image-switch-animation_2 {
    0%   { opacity: 0; }
    18%  { opacity: 0; }
    33%  { opacity: 1; }
    48%  { opacity: 1; }
    63%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes image-switch-animation_3 {
    0%   { opacity: 0; }
    48%  { opacity: 0; }
    63%  { opacity: 1; }
    78%  { opacity: 1; }
    90%  { opacity: 0; }
    100% { opacity: 0; }
}

.splitBg--r {
    background-image: url(../img/bg-mv-right.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: calc(100% - 37% - 767px);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.right__nav {
    width: 260px;
    margin-left: 10%;
    margin-top: 80px;
}

.right__list {
    width: 90%;
}

.right__list-item {
    margin-bottom: 10px;
}

.right__list-item a {
    width: 100%;
    height: auto;
}

.right__list-item a img:hover {
    opacity: 1 !important;
}

.right__list-item:hover {
    opacity: 1;
    background: linear-gradient(
        to right,
        rgba(255, 33,   0,   0.5) 0%,
        rgba(209,  96, 28,   0.5) 25%,
        rgba( 80,   6,148,   0.5) 75%,
        rgba(  9,   0,105,   0.0) 96%
        );
    background-size: cover;
}

.right__list-item img {
    width: 100%;
    padding-left: 4%;
}

.splitMain {
    margin-top: 73px;
    background-color: #000;
    position: relative;
}

.splitContents {
    width: 767px;
    position: absolute;
    top: 0;
    left: 37%;
    margin-left: auto;
    background: #000000;
    z-index: 2;
}

.bleagueHeader {
    background-color: #FFF;
}

.mv {
    width: 100%;
    height: auto;
}

.mv__main {
    background-image: url(../img/bg-mv-main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
}

.mv__txt-sub {
    position: absolute;
    width: 58%;
    top: 9%;
    left: 4%;
}
.mv__txt-main {
    position: absolute;
    width: 68%;
    top: 22%;
    left: 0;
    right: 0;
    margin: auto;
}

.gaiyo {
    padding: 40px 0 50px;
    background-image: url(../img/bg-gaiyo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    position: relative;
    width: 100%;
}

.gaiyo__heading {
    margin-bottom: 20px;
}

.gaiyo__txt-wrap {
    margin-top: 10px;
}
.gaiyo__txt-wrap img {
    margin-bottom: 20px;
}

.gaiyo__card-wrap {
    margin-top: 20px;
}

.tokuten-first {
    margin-top: 40px;
    padding-bottom: 40px;
    background-image: url(../img/bg-tokuten.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    position: relative;
    width: 100%;
}
.tokuten__sub--first {
    position: absolute;
    width: 20%;
    right: 10%;
    top: 4%;
}

.tokuten__heading {
    width: 45%;
}

.tokuten__txt-wrap--top {
    width: 60%;
    margin: 0 auto 20px;
    position: relative;
}

.tokuten__txt-wrap--bottom {
    width: 75%;
    margin: 0 auto;
    padding-bottom: 55%;
}

.tokuten-first__inner--bottom {
    padding: 40px 0;
    background-image: url(../img/bg-present.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
}

.tokuten-first__obokuchi {
    margin-bottom: 20px;
}

.tokuten__sub--first-reverce {
    position: absolute;
    width: 20%;
    left: 6%;
    top: 14%;
}

.tokuten-first__main {
    margin-bottom: 20px;
}

.tokuten-second {
    padding: 40px 0;
    background-image: url(../img/bg-traca.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    position: relative;
    width: 100%;
}

.tokuten__sub--second {
    position: absolute;
    width: 20%;
    right: 10%;
    top: 8%;
}

.tokuten__heading-sub {
    margin-bottom: 20px;
}

.tokuten-traca__main-img {
    margin-top: -40px;
}

.tokuten-traca__sub-txt {
    margin-top: -60px;
}

.tokuten-traca__player {
    font-size: 18px;
    margin: 20px 0;
}

.tokuten-traca__player tbody tr td:nth-child(odd) {
    padding-right: 20px;
}

.tokuten-traca__note {
    margin-top: 20px;
}

.merit {
    padding: 40px 0 50px;
    background-image: url(../img/bg-merit.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.merit__wrap {
    padding: 30px 20px 40px;
    background: rgba(255, 255, 255, 0.9);
}
.merit__heading {
    width: 100%;
}

.merit__list {
    margin: 20px 0 0;
}

.merit__list li {
    margin-bottom: 40px;
}

.entry {
    padding: 60px 0 20px;
    background-image: url(../img/bg-entry.jpg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
}

.entry__intro {
    margin-bottom: 40px;
}

.entry__list {
    width: 100%;
}

.entry__list li {
    margin-bottom: 30px;
    position: relative;
}

.entry__tokuten-inner {
    position: absolute;
    padding: 0 5%;
}

.entry__tokuten-inner--01 {
    top: 52%;
}
.entry__tokuten-inner--02 {
    top: 36%;
}
.entry__tokuten-inner--03 {
    bottom: 12%;
}

.faq {
    background-color: #f2f2f2 !important;
    padding: 40px 0;
}

.faq__heading {
    margin-bottom: 20px;
}

.faq__q {
    font-weight: 600;
    display: flex;
    margin-bottom: 12px;
}
.faq__q::before,
.faq__a::before {
    content: "";
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.faq__q::before {
    background-image: url(../img/txt-q.png);
}
.faq__a::before {
    background-image: url(../img/txt-a.png);
}

.faq__a {
    display: flex;
    margin-bottom: 20px;
}

.faq__app-wrap {
    width: 100%;
    background-color: #FFF;
    padding: 20px;
    margin-bottom: 30px;
}

.faq__app-inner {
    display: flex;
    width: 80%;
    margin: 10px auto 0;
    justify-content: space-between;
}

.faq__btn--app {
    margin-right: 30px;
}

.closing {
    background-image: url(../img/bg-note.jpg);
    background-size: cover;
    padding-bottom: 40px;
}

.bleagueNotes {
    background-image: url(../img/bg-note.jpg);
    color: #FFF;
    padding-bottom: 40px;
}

.bleagueNote {
    margin-bottom: 20px;
    width: 90%;
    margin: 0 auto;
}

.bleagueNoteTitle {
    position: relative;
    background-color: #00995c;
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    padding: 6px 35px 6px 10px;
    margin-bottom: 20px;
}
.bleagueNoteTitle {
    cursor: pointer;
}

.bleagueNoteTitle::before {
    content: "";
    width: 4px;
    height: 20px;
    background: #000;
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
}

.bleagueNoteTitle.close::before {
opacity: 1;
}

.bleagueNoteTitle::after {
    content: "";
    width: 20px;
    height: 4px;
    background: #000;
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.bleagueNote__inner-heading {
    border-bottom: 1px solid #00995c;
    padding-bottom: 4px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.bleagueNote__inner-heading span {
    border: 2px solid #00995c;
    margin-right: 8px;
    padding: 4px;
    flex-grow: 0;
    flex-shrink: 0;
}

.bleagueNote__list {
    margin-bottom: 20px;
}

.bleagueNote__list li {
    padding-left: 1.2em;
    text-indent: -1.0em;
    margin-bottom: 2px;
}

.bleagueNote__list li:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #00995c;
    border-radius: 15px;
	margin-right: 4px;
}

.bleagueNote__list--light > li:before {
    background-color: #8aba28;
}

.bleagueFollowBtn {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 20px 0;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

.bleagueFooter {
    width: 100vw;
    margin-left: -37vw;
}

.bleagueFooter .copyRight {
    width: 100% !important;
}

.splitContents.modal-open {
    overflow: hidden;
}

.bleague__modal.open {
    display: block;
}

.bleague__modal {
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
}

.bleague__modal-inner {
    background-color: #FFF;
    width: 90%;
    max-width: 767px;
    margin: 200px auto 0;
    padding: 40px 20px 20px;
    border-radius: 5px;
}
.bleague__modal-content {
    margin-bottom: 40px;
    text-align: center;
}

.bleagueModalCloseBtn {
    display: block;
    background-color: #4d4d4d;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    border-radius: 4px;
    cursor: pointer;
}

.bleague__modal-head {
    font-size: 20px;
    font-weight: bold;
}


.bleague__qr {
    max-width: 200px;
}

.modal-2__btn-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    gap: 20px;
    margin-top: 40px;
}
.modal-2__btn {
    width: 48%;
    height: 100px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 5px;
}

.modal-2__btn {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-2__btn img {
    width: 60%;
}

.bleague__modal--3 .bleagueModalCloseBtn {
    margin-top: auto;
}

/* ===================================================
min-width: 1400px
=================================================== */
@media screen and (min-width: 1400px) {
    .tokuten-first__inner {
        margin-top: 60px;
    }
    }

/* ===================================================
max-width:  1700px
=================================================== */
@media screen and (max-width: 1700px) {
    .splitBg--l {
        width: 24%;
    }

    .splitBg--r {
        width: calc(100% - 24% - 767px);
    }

    .splitContents {
        left: 24%;
    }

    .bleagueFooter {
        width: 100vw;
        margin-left: -24vw;
    }
}

/* ===================================================
max-width:  1400px
=================================================== */
@media screen and (max-width: 1400px) {
    .splitBg--l {
            width: 10%;
    }
    .splitBg__img {
        display: none;
    }

    .splitBg--r {
        width: 40%;
    }

    .splitContents {
        width: 50%;
        max-width: 767px;
        left: 10%;
    }

    .tokuten-traca__player {
        font-size: 16px;
    }

    .bleagueFooter {
        margin-left: -10vw;
    }
}

/* ===================================================
min-width: 500px
=================================================== */
/* 2025.12.15追加 */
@media screen and (min-width: 500px) {
    .solid-btn:hover,
    .faq__btn--app:hover,
    .faq__btn--google:hover {
        cursor: pointer;
    }
}


/* ===================================================
max-width: 767px
=================================================== */
@media screen and (max-width: 767px) {
    .splitBg--l {
        width: 0;
    }

    .splitBg--r {
        width: 0;
    }

    .splitMain {
        margin-top: 78px;
    }

    .splitContents {
        width: 100%;
        max-width: none;
        top: 0;
        left: 0;
        background: #FFF;
    }

    .splitContents {
        padding-bottom: 80px;
    }

    .gaiyo {
        padding: 20px 0 40px;
    }

    .bleagueFooter {
        width: 100%;
        margin-left: 0;
    }

    .modal-2__btn-wrap {
        gap: 10px;
    }

    .modal-2__btn {
        width: 48%;
        height: 80px;
    }

    .modal-2__btn img {
        width: 80%;
    }

    .bleague__modal--3 .bleagueModalCloseBtn {
        margin-top: auto;
        margin-bottom: 80px;
    }
}

/* ===================================================
max-width: 500px
=================================================== */
@media screen and (max-width: 500px) {
    .bleaguePc {display: none;}
    .bleagueSp {display: block !important;}

    .txt--s {
        font-size: 12px;
    }

    .tokuten-traca__player {
        font-size: 14px;
    }

    .tokuten-traca__player tbody tr td:nth-child(odd) {
        padding-right: 10px;
    }

    .bleagueNoteTitle {
        font-size: 16px;
    }

    .bleagueNote__inner-heading {
        font-size: 16px;
    }

    .bleagueNote__list li {
    padding-left: 1.2em;
    text-indent: -1.1em;
    margin-bottom: 2px;
	}

    .bleagueFollowBtn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: env(safe-area-inset-bottom, 0); /* iPhone対策 */
        z-index: 100;
    }
}