/* ==========================================================================
   2026年 クリスマス用 追加CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ベース・全体設定
   ※影響範囲を限定するため、親要素(.sebu-xmas-wrap)を付けています
-------------------------------------------------------------------------- */
html body .sebu-xmas-wrap {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothi";
    letter-spacing: 0;
}

.sebu-xmas-wrap main {
    letter-spacing: 3px;
    line-height: 26px;
    letter-spacing: normal;
}

.sebu-xmas-wrap header .logo_text {
    font-family: serif;
}

.sebu-xmas-wrap .logo_wrap img {
    width: auto;
}

.sebu-xmas-wrap .l-header__burger__button {
    align-items: center;
}

.sebu-xmas-wrap section,
.sebu-xmas-wrap .inner {
    padding: 0;
}

.sebu-xmas-wrap span.red {
    color: red;
}

.sebu-xmas-wrap .sebu-xmas-txt-inner {
    width: 80%;
}

.sebu-xmas-wrap .ef-hq_btm-yearlink__c-2026 {
    background-image: linear-gradient(163deg, rgba(165, 89, 152, 1) 50%, rgba(148, 72, 136, 1) 50%);
}

.sebu-xmas-wrap .entry_link_2026 {
    font-size: clamp(14px, 6px + 1.2vw, 32px);
    color: white;
}

/* --------------------------------------------------------------------------
   2. 各セクション・モジュール
-------------------------------------------------------------------------- */
.sebu-xmas-wrap .sebu_xmas_banner {
    max-width: 1100px;
    margin: 100px auto 0;
}

.sebu-xmas-wrap .sebu_cooperation_txt {
    font-size: 40px;
    font-weight: bold;
    font-family: 'NotoSans';
    background-color: #d51642;
    color: white;
    text-align: center;
    width: fit-content;
    margin: auto;
    padding: 0px 2rem;
    border-radius: 2px;
}

.sebu-xmas-wrap .bnr2024-box {
    max-width: 800px;
    margin: 2cqw auto 15cqw;
}

.sebu-xmas-wrap .sebu-xmas-icon {
    max-width: 750px;
    margin: 40px auto;
    padding-left: 80px;
}

.sebu-xmas-wrap .sebu-xmas-img {
    max-width: 1200px;
    margin: 40px auto;
}

.sebu-xmas-wrap .thanks_img {
    width: 800px;
    max-width: 100%;
    text-align: center;
    margin: auto;
}

.sebu-xmas-wrap .sebu-xmas_name-box {
    width: auto;
}

/* --------------------------------------------------------------------------
   3. カスタムデザインパーツ (詳細度強: #lp-wrapper を使用)
-------------------------------------------------------------------------- */

/* ▼ プレゼントボックスのスタイル ▼ */
#lp-wrapper .present-lead {
    text-align: center;
    font-weight: bold;
    font-size: clamp(16px, 2vw, 22px);
    margin-bottom: 40px;
}

#lp-wrapper .present-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

#lp-wrapper .present-img {
    position: absolute;
    left: -40px;
    bottom: 0;
    width: clamp(120px, 15vw, 160px);
    z-index: 1;
}

#lp-wrapper .present-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

#lp-wrapper .present-txt {
    position: relative;
    z-index: 2;
}

#lp-wrapper .present-txt p {
    font-weight: bold;
    font-size: clamp(16px, 2.5vw, 24px);
    line-height: 1;
    margin: 1cqw 0 1.5cqw;
    text-align: center;
}

#lp-wrapper .present-txt .red-text {
    color: #e60044;
}

#lp-wrapper .inner02 {
    margin-top: 40px;
}

#lp-wrapper .sebu-xmas_name-wrap {
    margin-top: 0;
}

/* ▼ リボン画像とご支援メッセージのスタイル ▼ */
#lp-wrapper .sebu-xmas_name-wrap picture {
    display: block;
    text-align: center;
    margin: 40px auto 15px;
    max-width: 800px;
}

#lp-wrapper .sebu-xmas_name-wrap picture img {
    width: 100%;
    height: auto;
}

#lp-wrapper .support-msg-box {
    text-align: center;
    margin-top: -40px;
    font-weight: bold;
    line-height: 1.6;
}

#lp-wrapper .support-msg-txt-black {
    font-size: clamp(20px, 3.5vw, 36px);
    color: #000000;
}

#lp-wrapper .support-msg-txt-red {
    font-size: clamp(20px, 3.5vw, 36px);
    color: #e60044;
}

.sebu-xmas-wrap #lp-wrapper .text-black {
    color: #000000;
}

#lp-wrapper .marker-yellow {
    background: linear-gradient(transparent 60%, #ffff00 60%);
    display: inline;
    padding-bottom: 2px;
}

/* ▼ ThankYou画像の配置（右上に重ねる） ▼ */
#lp-wrapper under_banner .inner {
    position: relative;
}

#lp-wrapper .thankyou-img {
    position: absolute;
    z-index: 10;
    width: clamp(160px, 20vw, 250px);
    right: 5%;
    top: 0;
    transform: translateY(-70%);
}


/* --------------------------------------------------------------------------
   4. レスポンシブ対応 (メディアクエリ)
-------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    html body .sebu-xmas-wrap {
        margin-top: 0;
    }

    .sebu-xmas-wrap .sebu_cooperation_txt {
        font-size: 20px;
        padding: 0px 1rem;
    }

    .sebu-xmas-wrap .sebu_xmas_banner {
        max-width: 1200px;
        margin-top: 4.5rem;
    }
}

@media screen and (min-width: 768px) {
    .sebu-xmas-wrap [data-inside-pc="32"]:not([data-maxwidth]) {
        top: 0;
    }
}

@media (max-width: 767px) {

    /* 企画内容のテキスト */
    .sebu-xmas-wrap #lp-wrapper .sebu-xmas-txt-inner .text p.main {
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.8;
        text-align: center;
        /* 画像に合わせて中央揃え */
    }

    /* プレゼント内容のテキスト */
    .sebu-xmas-wrap #lp-wrapper .present-txt p {
        /* 元の clamp(12px, 3.2vw, 16px) から少し大きく読みやすく調整 */
        font-size: clamp(14px, 4vw, 18px);
        text-align: center;
    }

    /* 開催期間のテキスト */
    .sebu-xmas-wrap #lp-wrapper .sebu-xmasday-box {
        font-size: clamp(18px, 5vw, 24px);
        /* 「2026年」のサイズ */
        text-align: center;
        line-height: 1.4;
    }

    .sebu-xmas-wrap #lp-wrapper .sebu-xmasday {
        font-size: clamp(28px, 8vw, 36px);
        /* 「11月15日〜12月15日」を大きく強調 */
        font-weight: bold;
    }

    /* 注意書きテキスト */
    .sebu-xmas-wrap #lp-wrapper .undertext.undertext2 {
        font-size: clamp(11px, 3vw, 14px);
        text-align: center;
        margin-top: 10px;
    }

    /* ▼ リボン画像とご支援メッセージのスタイル ▼ */
    #lp-wrapper .sebu-xmas_name-wrap picture {
        margin: 40px auto 30px;
    }

    .sebu-xmas-wrap #lp-wrapper .sebu-xmas-icon {
        padding-left: 15px;
        box-sizing: border-box;
        width: 85%;
        margin: 30px auto;
    }

    .sebu-xmas-wrap #lp-wrapper .present-box {
        flex-direction: row;
        /* 横並び（Row）を強制 */
        padding: 15px 10px 15px 23vw;
        /* 左側にサンタ用の空きスペース(23vw)を確保 */
        margin-top: 0;
        /* 余分な上部マージンをリセット */
        justify-content: center;
    }

    .sebu-xmas-wrap #lp-wrapper .present-img {
        left: -15px;
        /* ボックスの左端から少しはみ出させる */
        bottom: 0;
        /* 下のラインに揃える */
        top: auto;
        transform: none;
        /* 中央寄せを解除 */
        width: clamp(90px, 28vw, 130px);
        /* スマホ画面に合わせたサイズ可変 */
    }

    .sebu-xmas-wrap #lp-wrapper .present-txt p {
        font-size: clamp(12px, 3.2vw, 16px);
        text-align: center;
    }

    /* その他のスマホ調整 */
    .sebu-xmas-wrap #lp-wrapper .sebu-xmas-txt-inner {
        width: 90%;
    }

    .sebu-xmas-wrap #lp-wrapper .sebu-xmas-img {
        padding-left: 0;
    }

    .sebu-xmas-wrap #lp-wrapper .thankyou-img {
        right: 12%;
    }

    /* ご支援メッセージ（リボン下）: 行間と余白の調整 */
    #lp-wrapper .support-msg-txt-black {
        font-size: clamp(16px, 5vw, 24px);
    }

    #lp-wrapper .support-msg-txt-red {
        font-size: clamp(16px, 5vw, 24px);
    }

    /* 既存の !important 指定を上書きして中央揃えにする */
    .sebu-xmas-wrap #lp-wrapper .sebu-xmas-txt-inner .text p.texta-l {
        text-align: center !important;
    }
}

@media (max-width: 479px) {
    .sebu-xmas-wrap #lp-wrapper section .sebu-content-inner {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .sebu-xmas-wrap br.sp {
        display: none;
    }

    .sebu-xmas-wrap br.pc {
        display: inline;
    }
}

/* SP表示時 (767px以下) */
@media (max-width: 767px) {
    .sebu-xmas-wrap br.sp {
        display: inline;
    }

    .sebu-xmas-wrap br.pc {
        display: none;
    }
}