/*閉鎖*/

.kv {
    position: relative;
}

/* マスク部分 */
#end_box {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    font-weight: bold;

    /* 要素全体を覆う設定 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* z-indexを十分に高く設定 */
    z-index: 9999;

    display: flex;
    /* 中央寄せを簡単にするためflex推奨 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.7;
}

/* テキスト部分の調整（flexを使うなら絶対配置は不要になります） */
#end_box p {
    font-size: 35px;
    margin: 0;
    padding: 0 20px;
    /* スマホ時の余白 */
}

#end_box p span {
    font-size: 20px;
    display: block;
}


@media screen and (max-width:767px) {

    #end_box p,
    #end_box2 p {
        font-size: 7vw;
    }
}


/* メインのボタン（期間表示）部分 */
.campaign-status-wrapper .overview_button {
    background: linear-gradient(#FF9B48, #ED6C00);
    border-radius: 100em;
    border: 1px solid #ED6C00;
    text-align: center;
    color: #fff;
    font-size: 99.5%;
    padding: 0.7em 0.5em;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: 1.4;
    /* 行間の調整 */
    display: block;
    /* pタグをボタンらしく見せる */
}

/* 太字（日付・時刻）部分のサイズアップ */
.campaign-status-wrapper .overview_button b {
    font-size: 155.5555555556%;
    letter-spacing: 0.02em;
}

/* 曜日 (水) (金) 部分の微調整 */
.campaign-status-wrapper .overview_button b span {
    font-size: 90%;
    font-weight: normal;
    margin: 0 0.1em;
}

/* 終了告知ボックスのスタイル（おまけ） */
#end_box2 {

    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    color: #333;
    font-weight: bold;
}

@media screen and (max-width: 600px) {
    .campaign-status-wrapper .overview_button {
        /* 角丸をマイルドに */
        border-radius: 0.5em;
    }

    .campaign-status-wrapper .overview_button b {
        /* 日付の文字サイズを調整 */
        font-size: 112.5%;
    }
}

@media screen and (max-width: 767px) {

    /* スマホ時のみ、ボタン内の日付周りの挙動を制御 */
    .campaign-status-wrapper .overview_button {
        text-align: center;
        white-space: normal;
    }

    /* 改行を強制的に有効化 */
    .campaign-status-wrapper .overview_button br {
        display: block;
    }

    /* 日付（bタグ）を左寄せのブロックとして扱う */
    .campaign-status-wrapper .overview_button b {
        display: inline-block;
        text-align: left;
        white-space: nowrap;
    }

    /* 2行目の「終了日」の前に2文字分のインデントを追加 */
    .campaign-status-wrapper .overview_button b:nth-of-type(2) {
        margin-left: 2em;
    }
}



/* 親要素：マスクの基準位置にする */
.campaign-status-wrapper {
    position: relative;
    max-width: 1000px;
    /* 必要に応じて調整 */
    margin: 0 auto;
    width: 100%;
}

/* もし元の .overview_button に背景色などがある場合、角丸などがはみ出さないように設定 */
.overview_button {
    margin: 0;
    /* 余計な隙間を消す */
    /* ここに既存のスタイルが入る */
}

#end_box2 {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 0;
    border-radius: 10px;

    /* 親要素 (.campaign-status-wrapper) 全体を覆う */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 10;
    /* 他の要素より確実に上に来るように */
    line-height: 1.7;

    /* 以前の translateX(-50%) などは不要になるので削除 */
    transform: none;
}

#end_box2 p {
    /* フォントサイズは 25px もしくは 7vw などお好みで */
    font-size: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    margin: 0;
}

/* -----------------------------------------------------------
   キャンペーン終了時：ボタン無効化（「撮影方法はコチラ」は除く）
   ----------------------------------------------------------- */

/* 1. 基本的にすべての .red_button を無効化するが、
      アンカーリンク（#receipt）を持つものは除外する */
.page_contents .red_button:not([href="#receipt"]) {
    /* 透明度を0.4に設定 */
    opacity: 0.4 !important;

    /* クリック・タップを完全に禁止 */
    pointer-events: none !important;

    /* カーソルを「禁止」マークにする */
    cursor: not-allowed !important;
}

/* 2. 【除外設定】「詳しい撮影方法はコチラ」などは通常通り表示 */
.page_contents .red_button[href="#receipt"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* --- 以下、style.cssをコメントアウトしても維持するための基本スタイル --- */

.page_contents .red_button {
    width: 100%;
    box-sizing: border-box;
    margin: 1em auto;
    text-align: center;
    position: relative;
    border-radius: 6.25em;
    background-color: #fff;
    padding: 0.625em 0;
    display: block;
    font-weight: 600;
    line-height: 1.5;
}

/* 赤いボタン（会員登録・ログイン等）の色 */
.page_contents .red_button:not(.orange_button) {
    color: #E60012;
    border: solid 3px #E60012;
    box-shadow: 0 8px 0 0 #c61c2b !important;
}

/* オレンジボタンの色（撮影方法ボタンもこれに含まれる） */
.page_contents .red_button.orange_button {
    color: #ED6C00;
    border: solid 3px #ED6C00;
    font-size: 143.75%;
    box-shadow: 0 0.3125em 0 #ED6C00 !important;
    max-width: 21.0869565217em;
}

/* 撮影方法ボタン（#receipt）のみ、ホバー時の動きを有効にする */
.page_contents .red_button[href="#receipt"]:hover {
    box-shadow: 0 0 0 #ED6C00 !important;
    transform: translate3d(0, 0.3125em, 0) !important;
}

/* 矢印アイコンの設定 */
.page_contents .red_button:before {
    content: "";
    position: absolute;
    z-index: 3;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
}

.page_contents .red_button:not(.orange_button):before {
    width: 1.4375em;
    height: 1.4375em;
    background-image: url(../img/right_red.svg);
}

.page_contents .red_button.orange_button:before {
    width: 1em;
    height: 1em;
    background-image: url(../img/right_orange.svg);
}



/* --- 修正版：キャンペーン終了時のボタン制御 --- */

/* 1. 【対象外】「撮影方法(#receipt)」と「TikTokリンク」を、無効化ルールから完全に除外する */
.page_contents .red_button:not([href="#receipt"]):not([href*="tiktok.com"]) {
    opacity: 0.4 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* 2. 【個別設定】撮影方法ボタンは「不透明(1)・クリック可」 */
.page_contents .red_button[href="#receipt"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* 3. 【個別設定】TikTokボタンも「不透明(1)・クリック可」にする */
/* もし「半透明(0.4)でクリック可」にしたい場合は、ここを 0.4 のままにしてください */
.page_contents .red_button[href*="tiktok.com"] {
    opacity: 1 !important;
    /* ←ここを 1 にすればハッキリ表示されます */
    pointer-events: auto !important;
    cursor: pointer !important;
}

@media screen and (max-width: 600px) {
    .page_contents .red_button.orange_button {
        font-size: 100%;
    }
}