@charset "UTF-8";

h2 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 1000;
    letter-spacing: 0.1em;
    margin: 0;
}

.pointer {
    cursor: pointer;
}

p {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600px;
    color: #371d03;
}

/*--------　メイン --------*/
.O_BG {
    background: url(../images/BG_00.png) no-repeat center center;
    background-position: center;
    max-width: 100%;
}

.Orb_Bunner_BG {
    max-width: 100%;
}

.fixed-banner {
    width: 2317px;
    /* 画像の表示サイズを固定（お好みのピクセル数に調整） */
    height: auto;
    /* 高さは自動調整、アスペクト比を維持 */
    display: block;
    margin: 0 auto;
    /* センター表示したい場合 */
}

.padding_space {
    padding: 0 20px;
}

.space {
    margin: 0 auto;
    max-width: 1080px;
    padding-top: 2%;
}

.Orb_Owned {
    display: flex;
    justify-content: flex-end;
    max-width: 40%;
    min-width: 50%;
    min-height: 10px;
    gap: 10px;
    margin: 0 0 0 auto;
}

.orbCount {
    position: absolute;
    /* 左からの距離 */
    color: rgb(255, 255, 255);
    /* 数字の色 */
    font-size: clamp(10px, 4vw, 40px);
    /* 数字のサイズ */
    font-weight: bold;
    /* 太字 */
    padding: 0.5% 1%;
    border-radius: 4px;
    display: table-cell;
    vertical-align: middle;
    line-height: normal;
}

/* サガコイン所持数：Exchangeは単独バナーで横長のため、共通 .orbnikuCount より大きめに表示する。
   ID(#sagaCoin)はクラスより優先度が高いので、共通CSS(.orbnikuCount)には影響しない。 */
#sagaCoin {
    font-size: clamp(15px, 5vw, 40px);
}

.Orb_right {
    display: block;
    margin-left: auto;
}

.orb_contents_center {
    display: flex;
    justify-content: center;
}

.Orb_center {
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.Orb_Pac {
    max-width: 1080px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.pac1 {
    justify-self: start;
}

.pac2 {
    justify-self: center;
}

.pac3 {
    justify-self: end;
}

.Orb_Pac2 {
    max-width: 1080px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.Orb_BtnImage {
    max-width: 100%;
    height: auto;
    position: relative;
}

/* ボタン アクティブ表示 */
.Orb_buybtn_text {
    text-align: center;
    color: white;
    font-size: clamp(10px, 3.3vw, 35px);
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 100%;
}

.Orb_buybtn {
    width: 100%;
    background-color: #e18b13;
    border-radius: 1.5vw;
    padding: 10px 30px;
}

.Orb_buybtn:hover {
    background-color: #ffba26;
}

/* ボタンデフォルト */
.Orb_buybtn_def {
    color: white;
    background-color: #828486;
}

.Orb_buybtn_def:hover {
    background-color: #828486;
}


/* ボタン非アクティブ表示 */
.Orb_buybtn_gray {
    color: #828486;
    box-shadow: inset 0 0 0 5px #828486;
    font-weight: 700;
    background-color: #ffffff00;
}

.Orb_buybtn_gray:hover {
    background-color: #ffffff00;
}

/* 停止中（申請上限到達）のカードボタン：グレーで押せない見た目にする */
.Orb_buybtn_stop {
    width: 100%;
    background-color: #828486;
    border-radius: 1.5vw;
    padding: 10px 30px;
    cursor: default;
}

.Orb_buybtn_stop:hover {
    background-color: #828486;
}

/* 停止中のカードはクリック不可・薄く表示 */
.exchange_card_stopped {
    pointer-events: none;
    opacity: 0.7;
}

/* モーダルの交換実行ボタンが抑止状態（SC不足・ウォレット未接続・停止中） */
.exchange_btn_disabled {
    background-color: #828486;
    cursor: default;
}

.Orb_pac2 {
    margin: 5px;
}


/*支払方法変更*/
.LandMarket_paymeth_wrap {
    text-align: center;
    margin: 5% auto;
    width: 100%;
    margin-bottom: 5%;
}

.LandMarket_PayMethBtn {
    width: 500px;
    border-color: #ccb491;
    background-color: black;
    border-radius: 10vw;
    padding: 30px;
    margin: 0 auto;

    color: white;
    font-size: clamp(18px, 2.1vw, 30px);
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 100%;
}

.LandMarket_PayMethBtn:hover {
    background-color: #ffba26;
}

.Orb_Boder {
    position: relative;
    height: 1px;
    border-width: 0;
    background-image: -webkit-linear-gradient(left,
            transparent 0%, #000000 50%, transparent 100%);
    background-image: linear-gradient(90deg,
            transparent 0%, #000000 50%, transparent 100%);
}

.Orb_bottom {
    margin: 40px auto;
    padding: 0 20px;
    max-width: 960px;
    text-align: center;
    height: auto;
    /* 固定高さをやめて内容に応じて伸びるように */
    line-height: 1.6;
    /* 行間を少し広くして読みやすく */
}

/* モーダル基盤 */

.Orbmordal_box {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 900px;
    width: 95%;
    /* 画面（特にiOSのツールバー表示時）からはみ出して上下が見切れるのを防ぐ。
       dvh非対応ブラウザ向けにvhをフォールバックとして先に指定する。 */
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 10px;
    background-color: #ebdfc7;
    border-radius: 25px;
    align-items: center;
    transform: translate(-50%, -50%);
    display: none;
}

.Orbmodal_credit_ti {
    display: block;
    padding: 20px 40px;
    text-align: center;
    outline: solid 5px #ab834a;
    border-radius: 20px;
}



.Orbmodal_credit_title {
    margin-bottom: 15px;
}

.Orbmodal_credit_title p {
    font-size: clamp(34px, 2vw, 40px);
    letter-spacing: 5px;
    font-weight: 700;
}

.Orbmodal_credit {
    display: flex;
}

/* モーダル画像系統 */

.OM_goods {
    margin: 0 auto 0 0;
    height: 100%;
    width: 34%;
}

.landmodal_goods {
    margin: 0 auto 0 0;
    height: 100%;
    width: 35%;
}


.OM_image {
    height: 100%;
    width: 100%;
    margin: auto;
    position: relative;
}


.landmodal_gachaimage {
    height: 100%;
    width: 100%;
    margin: auto;
    position: relative;
}

.nftimage_setcss {
    width: 100%;
    text-align: center;
    position: absolute;
    inset: 0;
}

.nftimage_standard {
    position: static;
}


/* 文字モーダル情報 */

.Orbmodal_credit_info {
    width: 60%;
    margin-left: 3%;
    text-align: left;
}

.OM_headtext {
    font-size: clamp(24px, 2vw, 30px);
    font-weight: bold;
}

.landmodal_headtext {
    font-size: clamp(23px, 1.5vw, 28px);
    font-weight: bold;
}

.Orbmodal_credit_right {
    margin-top: 10%;
    margin-bottom: 1%;
}

.OM_detail {
    display: flex;
    align-items: center;
    margin-top: 10.5%;
    margin-bottom: 4.5%;
    color: #371d03;
}

.landmodal_detail {
    display: flex;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
    color: #371d03;
}

.Orbmodal_detail_4 {
    display: flex;
    align-items: center;
    margin-top: 8%;
    color: #371d03;
}

.Orbmodal_detail_L {
    width: 40%;
    text-align: left;
}

.Orbmodal_detail_R {
    width: 60%;
    text-align: right;
}

.Orbmodal_name {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: bold;
}

.OM_attritext {
    font-size: clamp(22px, 2vw, 24px);
    font-weight: bold;
}

.Orbmodal_attritext {
    font-size: clamp(20px, 2vw, 22px);
    font-weight: bold;
}

/* ドロップダウンメニュー */

.selectdiv {
    margin: 0 0 0 auto;
    width: 70%;
}

.selectdiv select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    display: block;
    text-align: center;
    text-align-last: center;
    width: 100%;
    max-width: 320px;
    height: 50px;
    float: right;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.75;
    color: #371d03;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #ab834a;
    -ms-word-break: normal;
    word-break: normal;
}



/* 戻る・購入ボタン */

.Orbmodal_credit_inputsection {
    width: 100%;
    margin: 0 auto;

}


.Orbmodal_credit_label {
    text-align: left;
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 600;
}

.Orbmodal_credit_inputbigbox {
    margin-bottom: 10px;
}

.Orbmodal_credit_inputsection input {
    width: 100%;
    margin: 0 auto;
}

.Orbmodal_credit_inputflexbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(15px, 2vw, 40px);
}

.Orbmodal_credit_inputminibox {
    width: 48%;
}




/* ボタンセクション */


.Orbmodal_credit_btnsection {
    display: flex;
    justify-content: space-between;
    max-height: 45px;
    margin-top: 5%;
}


.Orbmodal_credit_btnsection p {
    font-size: clamp(22px, 2vw, 24px);
    font-weight: bold;
}

.Orbmodal_credit_btnWrap {
    width: 50%;
}

/* キャンセルボタン */


.Orbmodal_credit_cancelbtn {
    width: 90%;
    outline: solid 4px #ab834a;
    outline-offset: -4px;
    border-radius: 15px;
    line-height: 45px;
    text-align: center;
    margin: 0 2.5% 0 0;
}

.Orbmodal_credit_cancelbtn p {
    color: #ab834a;
}

.Orbmodal_credit_cancelbtn:hover {
    outline: solid 4px #cba656;
}

.Orbmodal_credit_cancelbtn:hover p {
    color: #cba656;
}




/* 購入ボタン */

.Orbmodal_credit_buybtn {
    width: 90%;
    background-color: #e18b13;
    border-radius: 15px;
    line-height: 45px;
    text-align: center;
    margin: 0 0 0 2.5%;
}

.Orbmodal_credit_buybtn p {
    color: white;
    font-size: 20px;
}

.Orbmodal_credit_buybtn:hover {
    background-color: #ffba26;
}

.Orbmodal_credit_buybtn_close {
    width: 90%;
    background-color: #525457;
    border-radius: 15px;
    line-height: 45px;
    text-align: center;
    margin: 0 0 0 auto;
}

.Orbmodal_credit_buybtn_close p {
    color: white;
    font-weight: 200;
    font-size: 20px;
}


/* --- 共通ポップアップ --- */

.Orbmodal_simpletext {
    font-size: clamp(5px, 6.5vw, 30px);
    font-weight: bold;
}

.Orbmodal_simpletext_small {
    font-size: clamp(5px, 3.6vw, 20px);
    font-weight: bold;
}

.Orbmordal_simplesection {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);
}

/* 最終確認ダイアログ用：背後のダイアログごと暗転させるオーバーレイ */
.Orbmordal_dialog_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    display: none;
}

/* 最終確認ダイアログはオーバーレイより前面に表示する */
.pop_default {
    z-index: 20;
}

.Orbmordal_BGbox {
    height: 220px;
    padding: 10px;
    background-color: #ebdfc7;
    border-radius: 25px;
    align-items: center;
    max-width: 500px;
    width: 95%;
    transform: translate(-50%, -50%);
    display: none;
}

.Orbmodal_simplebox {
    height: 200px;
    padding: 20px;
    text-align: center;
    outline: solid 5px #ab834a;
    border-radius: 20px;
}

.Orbmordal_BGbox_1 {
    height: 200px;
    max-width: 500px;
    width: 95%;
    padding: 10px;
    background-color: #ebdfc7;
    border-radius: 25px;
    align-items: center;
}

.Orbmordal_BGbox_2 {
    height: 220px;
    max-width: 600px;
    width: 110%;
    padding: 10px;
    background-color: #ebdfc7;
    border-radius: 25px;
    align-items: center;
}

.Orbmordal_simplebox_1 {
    height: 180px;
    padding: 20px;
    text-align: center;
    outline: solid 5px #ab834a;
    border-radius: 20px;
}


.Orbmodal_simpletextbox {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}




.Orbmodal_simple_backbtn {
    width: 50%;
    height: 30%;
    outline: solid 4px #ab834a;
    outline-offset: -4px;
    border-radius: 15px;
    line-height: 45px;
    margin: 5% auto;
}

.Orbmodal_simple_backbtn p {
    color: #ab834a;
    font-size: 24px;
    font-weight: bold;
}

.Orbmodal_simple_backbtn:hover {
    width: 50%;
    height: 30%;
    outline: solid 4px #cba656;
    outline-offset: -4px;
    border-radius: 15px;
    line-height: 45px;
    margin: 5% auto;
}

.Orbmodal_simple_backbtn:hover p {
    color: #cba656;

}




.Orbmodal_simple_gobtn {
    width: 50%;
    background-color: #e18b13;
    border-radius: 15px;
    line-height: 60px;
    margin: 0 auto;
    margin-top: 2%;
}

.Orbmodal_simple_gobtn p {
    color: white;
    font-size: clamp(10px, 6vw, 24px);
    font-weight: bold;
}

.Orbmodal_simple_gobtn:hover {
    width: 50%;
    background-color: #ffba26;
    border-radius: 15px;
    line-height: 60px;
    margin: 0 auto;
    margin-top: 2%;
}

.Orbmodal_common_text {
    color: #ffffff;
    font-size: clamp(5px, 3.6vw, 20px);
    font-weight: bold;
}

.Orbmodal_common_text_area {
    height: 200px;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
}


.Orbmodal_relogin {
    width: 80%;
    background-color: #e18b13;
    border-radius: 15px;
    line-height: 45px;
    text-align: center;
    margin: 0 auto;
}

.Orbmodal_relogin p {
    color: white;
    font-size: 20px;
}

.Orbmodal_relogin:hover {
    background-color: #ffba26;
}

/* LandMarket Detail
------------------------------- */
.Detail_BG {
    background: url(../images/C_1_DetailBG.png) no-repeat center center;
    background-size: cover;
    background-position: center top;
    height: auto;
    position: relative;
    /* 位置指定 */
    z-index: 1;
    /* 重なり順指定 */
    margin-top: -100%;
}


.CountryDetail_Section {
    padding-top: 110%;
    padding-bottom: calc(10px + 5%);
    text-align: center;
}

.CD_imgWrap {
    margin: 0 auto;
    width: 50%;
}

.CD_imgWrap img {
    width: 100%;
}

.Detail_Section {
    padding-bottom: calc(10px + 5%);
    text-align: center;

}

.Detail_HeadWrap {
    text-align: center;
    margin-bottom: 5%;
}

.Detail_TextWrap {
    text-align: center;
    padding: 0 4%;
    margin-bottom: 5%;
}

.Detail_Text {
    color: #fff;
}



.Detail_ImageSection {
    display: flex;
    justify-content: center;
    margin-bottom: 7%;
}


.Detail_ImageWrap {
    max-width: 400px;
}

.CenterMargin {
    margin: 0px 2vw;
}

.CenterMargin_button {
    margin: 0px auto;
}



/* ボタン */

.Detail_LandBtnWrap {
    display: flex;
    justify-content: center;
    width: 90%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.Detail_LandBtn {
    width: 50%;
    max-width: 370px;
    position: relative;
    margin: 0 50px;
    margin-bottom: 0%;
}




/* swiper */

.swiper-button-prev {
    display: none;
}

.swiper-button-next {
    display: none;
}

.paysel {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 30%;
}

.paysel::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.paysel select {
    appearance: none;
    min-width: 100%;
    max-width: 100%;
    height: 2.5em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #2e2e2e;
    border-radius: 25px;
    background-color: #fff;
    color: #333333;
    font-size: clamp(18px, 2vw, 22px);
    cursor: pointer;
    text-align-last: center;
    font-weight: 700;
}

/*********************************************************
 モバイル版 命令
 800px以下の場合の処理
 *********************************************************/
@media (max-width: 800px) {

    h2 {
        font-size: clamp(24px, 4vw, 32px);
        font-weight: 1000;
        letter-spacing: 0.1em;
        margin: 0;
    }

    p {
        font-size: clamp(12px, 2.7vw, 22px);
        font-weight: 600;
        /* font-size:8px; */
        color: #371d03;
    }

    .Orb_Pac {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .Orb_Pac2 {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .space {
        padding-top: 2%;
    }

    /* サガコイン所持バナー：スマホでは単独表示で枠が大きすぎるため幅を抑える（オーブ/にくまる1枚分に近づける）。
       Exchange.css は Exchangeページ専用のため、他ページの .ItemOwned/.relative には影響しない。 */
    .ItemOwned .relative {
        max-width: 50vw;
    }

    .ItemOwned .relative img {
        width: 100%;
        height: auto;
    }

    /* .Orb_Owned {
        margin: 0;
        padding-bottom: 2%;
        padding-left: 20%;
    } */

    .number {
        position: absolute;
        top: 0px;
        /* 上からの距離 */
        right: 10px;
        /* 左からの距離 */
        color: rgb(255, 255, 255);
        /* 数字の色 */
        font-size: 21px;
        /* 数字のサイズ */
        font-weight: bold;
        /* 太字 */
        padding: 4px 8px;
        border-radius: 4px;
    }

    /*支払方法変更*/
    .LandMarket_paymeth_wrap {
        margin: 3% auto;
        width: 70%;
        margin-bottom: 20%;
    }

    .LandMarket_PayMethBtn {
        width: 100%;
        border-color: #ccb491;
        background-color: black;
        border-radius: 10vw;
        padding: 5%;

        color: white;
        font-size: clamp(16px, 3vw, 24px);
        font-weight: 700;
        letter-spacing: 0.2em;
        line-height: 100%;
    }

    .Orb_Boder {
        position: relative;
        height: 1px;
        border-width: 0;
        background-image: linear-gradient(90deg,
                transparent 0%, #000000 50%, transparent 100%);
    }

    .Orb_bottom {
        margin: 5% 4%;
        height: 30px;
        text-align: left;
    }

    .Orbmodal_credit_title p {
        font-size: clamp(23px, 2vw, 40px);
        letter-spacing: 5px;
        font-weight: 700;
    }

    /* modal */

    .Orbmordal_box {
        max-width: 500px;
    }

    .Orbmodal_credit_ti {
        display: block;
        padding: 10px;
        text-align: center;
        outline: solid 5px #ab834a;
        border-radius: 20px;
    }

    .Orbmodal_credit_title {
        margin-bottom: 2%;
    }

    .Orbmodal_credit_title p {
        font-size: clamp(28px, 2vw, 34px);
        letter-spacing: 5px;
        font-weight: 700;
    }

    .Orbmodal_credit {
        display: block;
        margin: 0 auto;
    }


    .OM_goods {
        margin: 0 auto;
        height: 100%;
        width: 100%;
    }

    .OM_image {
        height: auto;
        width: 60%;
        margin: auto;
        position: relative;
    }


    .Orbmodal_goods {
        margin: 0 auto;
        height: 50vw;
        width: 50vw;
    }

    .OM_gachaimage {
        width: 40%;

        height: 100%;
        margin: 0px auto;
    }

    .Orbmodal_gachaimage {
        width: auto;
        height: 100%;
        margin: 0px auto;
    }

    .nftimage_setcss {
        width: 100%;
        text-align: center;
        position: absolute;
        inset: 0;
    }


    .Orbmodal_credit_info {
        width: 100%;
        height: auto;
        padding: 0% 0%;
        margin: 0 auto;
        text-align: center;
    }

    .Orbmodal_headtext {
        margin: 3% 0;
        font-size: clamp(20px, 3.8vw, 28px);
        font-weight: bold;
    }

    .Orbmodal_credit_right {
        display: block;
        margin-top: 0%;
        margin-bottom: 0%;
    }

    .Orbmodal_name {
        font-size: clamp(14px, 2vw, 16px);
        font-weight: bold;
    }

    .Orbmodal_attritext {
        font-size: clamp(18px, 2vw, 20px);
        font-weight: bold;
    }

    /* ドロップダウンメニュー */

    .selectdiv {
        margin: 0 0 0 auto;
        width: 90%;
    }

    .Orbmordal_pulldown {
        text-align: right;
    }

    .selectdiv select {
        width: 100%;
        max-width: 320px;
        height: 45px;
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.75;
    }


    .OM_detail {
        display: flex;
        align-items: center;
        margin: 1% 2%;
        color: #371d03;
    }

    .Orbmodal_detail {
        display: flex;
        align-items: center;
        font-size: clamp(10px, 3vw, 20px);
        margin-top: 2%;
        margin-bottom: 2%;
        color: #371d03;
    }

    .Orbmodal_detail_4 {
        display: flex;
        align-items: center;
        margin-top: 5%;
        color: #371d03;
    }

    .Orbmodal_detail_sub {
        line-height: 200%;
        margin-bottom: 5%;
    }




    .Orbmodal_credit_btnsection {
        display: flex;
        justify-content: space-between;
        height: 60px;
        margin-top: 2%;
    }



    /* キャンセルボタン */

    .Orbmodal_credit_cancelbtn {
        width: 90%;
        outline: solid 3px #ab834a;
        outline-offset: -4px;
        border-radius: 15px;
        line-height: 45px;
        text-align: center;
        margin: 0 auto 0 0;
    }



    .Orbmodal_credit_cancelbtn p {
        color: #ab834a;
        font-size: clamp(18px, 2vw, 20px);
        font-weight: 700;
    }


    .Orbmodal_credit_cancelbtn:hover {
        outline: solid 3px #cba656;
    }

    .Orbmodal_credit_buybtn_close p {
        color: white;
        font-size: clamp(18px, 2vw, 20px);
        font-weight: 200;
    }




    .Orbmodal_credit_buybtn p {
        color: white;
        font-size: clamp(18px, 2vw, 20px);
        font-weight: 700;
    }


    /* swiper */
    /* LandMarket Main
------------------------------- */
    .contentswidth {
        width: 100%;
    }

    .OrbMarket_Gacha {
        width: auto;
        margin: 0 auto;
        margin-bottom: 10%;
    }

    .OrbMarket_GachaImage {
        height: auto;
        margin-bottom: 8%;
    }

    .OrbMarket_GachaImage img {
        width: 100%;
    }

    .OrbMarket_BtnImage {
        margin: 0 auto;
        max-width: none;
        height: auto;
    }


    /* ランドボタン アクティブ表示 */
    .Orb_buybtn_text {
        color: white;
        font-size: clamp(22px, 3.3vw, 35px);
        font-weight: 700;
        letter-spacing: 0.15em;
        line-height: 100%;
    }

    .Orb_buybtn {
        width: 100%;
        background-color: #e18b13;
        border-radius: 5vw;
        padding: 5% 0;
    }

    .Orb_buybtn:hover {
        background-color: #ffba26;
    }

    /* 停止中（申請上限到達）のカードボタン（モバイル） */
    .Orb_buybtn_stop {
        width: 100%;
        background-color: #828486;
        border-radius: 5vw;
        padding: 5% 0;
        cursor: default;
    }

    .Orb_buybtn_stop:hover {
        background-color: #828486;
    }

    /* ランドボタンデフォルト */
    .Orb_buybtn_def {
        color: white;
        background-color: #828486;
    }

    .Orb_buybtn_def:hover {
        background-color: #828486;
    }


    /* ランドボタン非アクティブ表示 */
    .Orb_buybtn_gray {
        color: #828486;
        box-shadow: inset 0 0 0 4px #828486;
        font-weight: 700;
        background-color: #ffffff00;
    }

    .Orb_buybtn_gray:hover {
        background-color: #ffffff00;
    }



    .CD_imgWrap {
        margin: 0 auto;
        width: 90%;
    }




    .Detail_TextWrap {
        padding: 0 4%;
        text-align: center;
        margin-bottom: 5%;
    }


    .Detail_ImageSection {
        padding: 0 4%;
        display: flex;
        justify-content: center;
        margin-bottom: 7%;
    }


    /* スライダー */

    .swiper-container {
        overflow: hidden;
        position: relative;
    }



    /* 幅・高さを指定 */
    .swiper-button-prev,
    .swiper-button-next {
        display: block;
        min-height: 100px;
        min-width: 70px;
        height: auto;
        top: 40%;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        min-height: 100px;
        min-width: 70px;
        height: auto;
        margin: auto;
    }

    /* 前に戻る画像パス */
    .swiper-button-prev:after {
        background-image: url(../images/arrow01.png);
    }

    /* 次に進む画像パス */
    .swiper-button-next:after {
        background-image: url(../images/arrow02.png);
    }

    /* =========================================================
   追加：幅 680px〜800px（iPad mini〜小型タブレット横向きなど）
   ========================================================= */
    @media (min-width: 680px) and (max-width: 800px) {

        /* ── オーブ残高（数字）の見やすさ ─────────────────── */
        .orbCount {
            position: absolute;
            /* top: 8px;            */
            /* right: 16px;    */
            /* font-size: clamp(24px, 3vw, 30px); */
            /* 読みやすいサイズ範囲 */
            font-weight: bold;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
        }

        /* ── 商品カード（限定／恒常パッケージ）のグリッド ─── */
        .Orb_Pac,
        .Orb_Pac2 {
            /* PC：3列 → タブレット：2列 に */
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-top: 24px;
        }

        /* 画像がつぶれないよう横幅いっぱい、高さは自動 */
        .Orb_Pac img,
        .Orb_Pac2 img {
            width: 100%;
            height: auto;
        }

        /* ── 支払い方法切り替えボタン ─────────────────────── */
        .LandMarket_PayMethBtn {
            width: 85%;
            /* 500px固定 → 画面幅依存に */
            padding: 24px 0;
            font-size: clamp(20px, 2.6vw, 28px);
        }

        /* ── バナー（必要に応じて） ───────────────────────── */
        .Orb_Bunner_BG img {
            width: 100%;
            /* タブレット帯は全幅でフィットさせる */
            height: auto;
        }

        /* ── 余白・配置の微調整 ─────────────────────────── */
        /* .Orb_Owned {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-bottom: 1.5%;
  }

  .Orb_Owned img {
    width: auto;
    height: auto;
    max-width: 100%;
  } */

        .space {
            padding-top: 2%;
        }
    }

    /* ========================================
   幅 400px〜650px 専用：所持オーブ数の調整
   ======================================== */
    @media (min-width: 400px) and (max-width: 680px) {


        .number {
            position: absolute;
            top: 6px;
            /* 数字の縦位置 */
            right: 10px;
            /* 数字の横位置 */
            font-size: clamp(20px, 4vw, 26px);
            /* 小さくなりすぎず調整 */
            font-weight: bold;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            z-index: 2;
        }

    }


    .paysel {
        display: inline-flex;
        align-items: center;
        position: relative;
        width: 50%;
    }

    .paysel::after {
        position: absolute;
        right: 15px;
        width: 10px;
        height: 7px;
        background-color: #535353;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
        pointer-events: none;
    }

    .paysel select {
        appearance: none;
        min-width: 100%;
        max-width: 100%;
        max-height: 50%;
        padding: .4em calc(.8em + 30px) .4em .8em;
        border: 1px solid #2e2e2e;
        border-radius: 25px;
        background-color: #fff;
        color: #333333;
        font-size: clamp(15px, 3vw, 22px);
        cursor: pointer;
        text-align-last: center;
    }

}