/* ==========================================================================
   1. Reset & Base Styles
   ========================================================================== */

/* Universal Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* すべての要素にbox-sizing: border-box;を適用 */
}

/* HTML Base */
html {
    scroll-behavior: smooth;
    /* スムーズスクロールを有効にする */
}


@font-face {
    font-family: "Rakuten Sans";
    src: url(/assets/fonts/RakutenSans_W_Rg.woff2?250819) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Rakuten Sans";
    src: url(/assets/fonts/RakutenSans_W_Bd.woff2?250819) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

/* CSS Variables */
:root {
    /* Colors */
    --color-shaken: #F12317;
    --color-light-orange: #FFF2E6;
    --color-light-red: #FCEEED;
    --color-bright-orange: #F16A04;
    --color-dark-blue: #023C61;
    --color-light-blue: #ECF9FF;
    --color-bg-neutral: #FFF;
    --color-text-primary: #333;
    --color-text-secondary: #686868;
    --color-text-tertiary: #4D4D4D;
    --color-text-placeholder: #828282;
    --color-border: #C6C6C6;
    --color-success: #047205;
    --color-info: #006497;
    --color-link: #0074AD;
    --color-danger: #DF0101;
    --color-crimson: #BF0000;
    --color-orange: #F59600;
    --pink: #FF008C;
    --gray-800: #4d4d4d;
    --color-bg-gray:#FBFBFB;


    /* Typography - Mobile First */
    --font-h1: 26px;
    --font-h2: 22px;
    --font-h3: 16px;
    --font-text-ll: 18px;
    --font-text-l: 16px;
    --font-text-m: 14px;
    --font-text-s: 13px;
    --font-text-ss: 12px;

    /* Spacing */
    --padding-top: 24px;
    --padding-bottom: 32px;
    --padding-left-right: 16px;

    /* Widths */
    --max-width-680: 680px;
    --max-width-960: 960px;
    --max-width-1280: 1280px;
    --container-step: 343px;

    /* Border */
    --border-radius: 4px;
    --button-border: 1px solid #C6C6C6;

    /* Shadow */
    --button-shadow: 1.25px 2.25px 1.5px rgba(0, 0, 0, 0.25);

    /* line */
    --line-130: 1.3;

    /* gap */
    --container-gap: 16px;

    /* Font Family */
    --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system, BlinkMacSystemFont, sans-serif;

}

/* Desktop Overrides */
@media (min-width: 768px) {
    :root {
        --font-h1: 28px;
        --font-h2: 24px;
        --font-h3: 20px;
        --font-text-ll: 20px;
        --font-text-l: 18px;
        --font-text-m: 16px;
        --font-text-s: 14px;
        --font-text-ss: 13px;
        --padding-top: 34px;
        --padding-bottom: 42px;
        --container-step: 960px;
        --container-gap: 24px;
    }
}


@media (max-width: 375px) {
    :root {
        --font-h1: 24px;
        --font-h2: 20px;
        --font-h3: 18px;
        --font-text-ll: 18px;
        --font-text-l: 16px;
        --font-text-m: 14px;
        --font-text-s: 12px;
        --font-text-ss: 11px;
        --padding-top: 18px;
        --padding-bottom: 24px;
        --container-step: 960px;
    }
}

/* Body Base */
body {
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-style: normal;
    color: var(--color-text-primary);
    line-height: var(--line-130);
}

/* Links */
a {
    text-decoration: none;
    color: var(--blue);
}

/* Images */
img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

picture img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}


/* Headings Base */
h1,
h2,
h3,
h4 {
    /* h4も追加 */
    margin: 0;
    padding: 0;
    font-weight: 600;
}

h2 {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-h2);
    justify-content: center;
}

h3 {
    font-size: 18px;
    text-align: center;
}

h4 {
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}

p {
    margin: 0;
}

/* Lists */
ol,
ul {
    list-style: none;
}

/* Underline Links */
u,
u>a {
    color: var(--color-link);
}

.red {
    color: var(--color-crimson);
}

.green {
    color: var(--color-success);
}

.orange {
    color: var(--color-orange);
}

.gray {
    color: var(--gray-800);
}

.help-img {
    width: 16px;
    height: 16px;
    margin: 0;
}

.line-img {
    width: 12px;
    height: auto;
    margin: 0;
}

.arrow-down-img {
    width: 16px;
    height: 16px;
    margin: 0;
}


.arrow-img {
    width: 5px;
    height: 10px;
    margin: 0;
}

.note {
    font-size: var(--font-text-s);
    text-align: center;
    padding-top: 6px;
}


/*
.Caution_caution__u5aXM {
    margin: 0 auto !important;
}
    */


/* ==========================================================================
   3. Main Visual (MV) Section
   ========================================================================== */

/* ===================================
   Term Section
   =================================== */
.term {
    display: flex;
    justify-content: start;
    gap: 10px;
    padding: 8px var(--padding-left-right);
    background-color: var(--color-bg-neutral);
    max-width: 1280px;
}

.term_text {
    display: inline-flex;
    padding: 6px 10px;
    background-color: #E7E7E7;
    font-size: var(--font-text-s);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

@media (min-width: 679px) {
    .term {
        margin: 0 auto;
        padding-left: 16px;
    }
}

/* ===================================
   Main Visual
   =================================== */
.mvArea {
    width: 100%;
    margin-bottom: 0;
}

.mv {
    margin: 0;
    line-height: 0;
}

.mv_img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===================================
   Caution Section
   =================================== */
.caution-section {
    padding: 6px var(--padding-left-right);
    display: flex;
    justify-content: center;
    max-width: var(--max-width-680);
    margin: 0 auto;
}

.caution-inner p {
    font-size: var(--font-text-ss);
    color: #5B5B5B;
}

@media (min-width: 679px) {
    .caution-section {
        text-align: center;
        padding: 6px 0px;
        justify-content: center;
    }
}

/* ===================================
   About Section
   =================================== */
.about-section {
    background: var(--color-bg-neutral);
    max-width: var(--max-width-680);
    margin: 0 auto;
}

.about-inner {
    max-width: var(--max-width-680);
    margin: 0 auto;
    background: var(--color-light-red);
    border-radius: var(--border-radius);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.section-title {
    text-align: center;
    margin: 0;
    padding: 5px 42px 0px;
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 320px;
    gap: 12px;
    text-align: center;
}

.highlight-text {
    color: var(--color-crimson);
    font-size: var(--font-text-l);
    font-weight: 600;
    margin-bottom: 4px;
}

.about-text p:last-child {
    font-size: var(--font-text-m);
    text-align: center;
}

.about-logos {
    display: flex;
    gap: 5px;
}

.prize-img {
    width: 265px;
    height: auto;
}


.small-note {
    font-size: 9px;
    color: var(--color-text-secondary);
    line-height: 1.1;
    text-align: end;
}

.section_inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

@media (min-width: 679px) {
    .about-inner {
        padding: 18px 0px;
    }

    .prize-img {
        width: 380px;
    }

    .small-note {
        font-size: 11px;
        color: var(--color-text-secondary);
        line-height: 1.1;
        text-align: end;
    }

}



/*about*/

/* ===================================
   Campaign Benefits Section
   =================================== */
.cpnBenefits {
    background: var(--color-bg-neutral);
    padding: var(--padding-top) var(--padding-left-right) var(--padding-bottom);
    position: relative;
    background-color: #FFF6E4;
}

.pd-section {
    padding: var(--padding-top) var(--padding-left-right) var(--padding-bottom);
}


@media (min-width: 768px) {
    .pd-section {
        padding: var(--padding-top) 0px var(--padding-bottom);
    }

}



.cpnBenefits_title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}


.searchArea_title_phrase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: var(--font-h2);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--font-text-l);
    font-weight: 600;
}

.subtitle_text {
    display: block;
    font-size: var(--font-text-m);
}

.cpnBenefits_inner {
    max-width: var(--max-width-680);
    margin: 0 auto;
    font-size: var(--font-text-m);
}

.cpnBenefits_list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--container-gap);
    padding-top: var(--padding-top);
    max-width: var(--max-width-680);
}

.cpnBenefits-item {
    position: relative;
    padding-top: 14px;
}



.cpnBenefits-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.cpn_num {
    background-image: url(//shaken.r10s.jp/shaken/img/campaign/bigsale/2601/ribbon-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 195px;
    height: 39px;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--color-bg-neutral);
    font-size: var(--font-text-l);
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0;
    align-items: baseline;
}



.cpn-num_large {
    font-size: var(--font-h2);
    font-weight: 700;
}

.cpn_contents {
    background: var(--color-bg-neutral);
    box-shadow: var(--button-shadow);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px var(--padding-left-right) 16px;
}

.cpn_contents_text {
    font-size: var(--font-text-l);
    font-weight: 700;
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}


.cpn_contents_text._flex {
    display: flex;
}

.cpn_contents_highlight {
    font-size: var(--font-text-s);
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.cpn_contents_detail {
    max-width: 500px;
}

.cam_width-all {
    max-width: 500px;
}

.benefit-img {
    width: 253px;
    height: auto;
}


.cpn_contents_mobile {
    background: #FFF0F7;
    border-radius: var(--border-radius);
    padding: 12px;
    width: 100%;
}

.cpn_contents_mobile_text {
    font-size: var(--font-text-m);
    font-weight: 700;
    text-align: center;
    margin: 0;
}


.cpn_contents_mobile_text .pink {
    color: var(--color-mobile);
}

.cpn_contents_mobile_text .num {
    font-size: var(--font-h2);
}

.cpn_contents_notice {
    width: 100%;
}

.cpn_contents_notice.note {
    background: #F5F5F5;
    border-radius: var(--border-radius);
    padding: 8px 12px;
}

.cpn_contents_notice_text {
    font-size: var(--font-text-s);
    color: var(--color-text-secondary);
    text-align: left;
    margin: 0;
}

.highlight-red {
    color: var(--color-shaken);
}

._flex {
    display: flex;
}

.sp-only {
    display: inline;
}


@media (min-width: 768px) {
    .sp-only {
        display: none;
    }

    .about-content {
        max-width: 960px;
        text-align: center;
    }

    .benefit-img {
        width: 355px;
    }

    .cpn_contents {
        padding-bottom: 16px;
    }

    .cpn_contents_detail {
        max-width: 430px;
    }
}

/* ==========================================================================
   5. Campaign Steps Section
   ========================================================================== */


.cpnarea-style {
    border: none;
    padding: 42px var(--padding-left-right) var(--padding-bottom);
}

.cpnArea {
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-light-blue);
}

.cpnArea_title {
    justify-content: center;
}

.cpn_ttl {
    font-size: 20px;
    position: relative;
    padding-top: 56px;
    padding-bottom: 12px;
}

.cpnArea_detail_button {
    display: flex;
    gap: 4px;
    background-color: #fff;
    border: 1px solid var(--color-crimson);
    color: var(--color-crimson);
    max-width: 76.5vw;
    width: 100%;
    text-align: center;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    box-shadow: var(--button-shadow);
    justify-content: center;
    font-weight: bold;
    align-items: center;
}

.cpnArea_detail_button:hover {
    background-color: #FFE2E2;
}

/*.cpnArea_list {
    display: flex;
    flex-direction: column;
    gap: 42px;
    align-items: center;
}

.cpnArea-item {
    border: 1px solid var(--gray-500);
    border-radius: 10px;
    max-width: 680px;
    width: 100%;
    text-align: center;
    padding: 0 12px 16px;
    box-shadow: 2px 2px 4px var(--shadow-color);
    background-color: #fff;
}
    */


.flow-num {
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 2px;
    color: #fff;
    font-size: var(--font-text-l);
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0;
    align-items: baseline;
    border-radius: 30px;
    padding: 5px 34px;
    background-color: var(--color-link);
}


/*
.cpnArea-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
 */

.cpnArea-item_note {
    font-size: var(--font-text-ss);
}


/* Responsive Adjustments for Campaign Steps */
@media (min-width: 679px) {
    .cpnArea_title {
        font-size: 28px;
    }

    .cpn_ttl {
        font-size: 24px;
    }

    .cpnArea_list {
        gap: 62px;
    }

    .cpnArea_detail_link {
        padding-top: 16px;
        font-size: 16px;
    }

    .cpnArea_detail_link::after {
        right: 36%;
        height: 24px;
        width: 24px;
        top: calc(50% - -2px);
    }

    .cpnArea_detail_button {
        padding: 16px;
        font-size: 18px;
        width: 80%;
        max-width: 500px;
    }
}

@media (max-width: 375px) {
    .bubble-img {
        width: 48px;
    }

    .cpnArea_detail_link::after {
        right: 24%;
    }
}

/* ===================================
   Participation Section (Legacy)
   =================================== */



.entry-button {
    width: 100%;
    max-width: 299px;
    padding: 15px 30px;
    background: var(--color-crimson);
    border-radius: 44px;
    color: var(--color-bg-neutral);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 3.49px 6.1px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s;
}

.entry-button:hover {
    transform: translateY(-2px);
}


.tab-content {
    display: none;
    background: var(--color-bg-neutral);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: hidden;
}

.tab-content.active {
    display: block;
}


/* ===================================
   Merit Section
   =================================== */
.merit-section {
    background: var(--color-light-red);
    text-align: center;
}

.merit-help-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    font-size: var(--font-text-s);
    color: var(--color-link);
    padding-top: 4px;
}


/* ===================================
   Modal Popup
   =================================== */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    position: relative;
    width: 100%;
    max-width: 337px;
    background: var(--color-bg-neutral);
    padding: 20px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    animation: modalFadeIn 0.3s ease-out;
    /*overflow-y: auto;*/
    max-height: min(522px, calc(100vh - 40px));
    overflow: hidden;
}

.modal-blue {
    background-color: var(--color-light-blue);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 4px;
    right: 4px;
    border: none;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
    background: var(--color-light-blue);
    /* ボタンの背景が透けないように色をつける */
}

.modal-close:hover {
    transform: scale(1.1);
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    overflow-y: auto;
    min-height: 0;
    /* Flexbox内でのスクロールバグ防止 */
}

.modal-title-img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.modal-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-label-bar {
    width: 6px;
    height: 16px;
    background: #ADA8A8;
}

.modal-label-text {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.modal-text {
    font-size: 11px;
    font-weight: 700;
    margin: 0;
}

.modal-img,
.modal-period-img,
.modal-example-img {
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.modal-period-img {
    border-radius: 3px;
}

.modal-example-img {
    margin-top: 7px;
}

.modal-bg-white {
    background-color: #fff;
}

/* Responsive modal layout */
@media (min-width: 768px) {
    .modal-overlay {
        padding: 40px;
    }

    .modal-content {
        max-width: 540px;
        padding: 30px 32px;
        border-radius: 8px;
        max-height: 90vh;
    }

    .modal-body {
        gap: 16px;
    }

    .modal-close {
        top: 0px;
        right: 2px;
        width: 36px;
        height: 36px;
        font-size: 30px;
    }

}

.merit-image {
    width: 100%;
    max-width: 343px;
    margin: 0 auto 16px;
}

.merit-slider {
    position: relative;
    max-width: var(--max-width-1280);
    margin: 0 auto;
    padding-top: var(--padding-top);
    text-align: end;
}


.slider-container {
    display: flex;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    max-width: 680px;
    margin: 0 auto;
}

.merit-card {
    min-width: 100%;
    scroll-snap-align: start;
    background: var(--color-bg-neutral);
    border-radius: var(--border-radius);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.merit-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.merit-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-dark-blue);
    border-radius: 13px;
    color: var(--color-bg-neutral);
    font-size: var(--font-text-s);
    font-weight: 600;
    flex-shrink: 0;
}

.merit-title {
    font-size: var(--font-text-l);
    font-weight: 600;
    margin: 0;
}

.merit-content {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.merit-content_text {
    flex: 1;
    font-size: var(--font-text-m);
    font-weight: bold;
}

.merit-content img,
.merit-image {
    width: 136px;
    height: 83px;
    flex-shrink: 0;
    object-fit: cover;
}


.link {
    color: var(--color-link);
    text-decoration: underline;
}

.slider-arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: -2.5vw;
    right: -2.5vw;
    transform: translateY(-50%);
    pointer-events: none;
}



.arrow-left,
.arrow-right {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--color-bg-neutral);
    border: 0.5px solid var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-text-secondary);
    pointer-events: all;
    cursor: pointer;
}

.arrow-left:hover,
.arrow-right:hover {
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 100%;
    background-color: #cccccc;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D9D9D9;
    cursor: pointer;
}

.dot.active {
    background: var(--color-shaken);
}

@media (min-width: 670px) and (max-width: 1024px) {
    .merit-slider {
        /* 必要に応じてギャップを調整 */
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
    }

    .slider-container {
        flex-wrap: wrap;
        /* カードを折り返して横並びにする */
        justify-content: center;
        /* カードを中央寄せにする（任意） */
        max-width: 100%;
        /* このブレークポイントでは最大幅を解除または調整 */
        overflow: visible;
        /* スクロールを無効にするなら */
        scroll-snap-type: none;
        /* スナップを無効化 */
        scroll-behavior: auto;
        /* スムーズスクロールを無効化 */
        gap: 24px;

    }

    .merit-card {
        min-width: unset;
        width: calc(50% - 24px);
        scroll-snap-align: none;
        gap: 12px;
    }

    .slider-arrows {
        display: none;
    }

    .dot {
        display: none;
    }
}


@media (min-width: 1024px) {

    /* ここでブレークポイントを679pxに設定 */
    .merit-slider {
        /* 必要に応じてギャップを調整 */
        padding-left: var(--padding-left-right);
        padding-right: var(--padding-left-right);
    }

    .slider-container {
        flex-wrap: nowrap;
        /* カードを折り返して横並びにする */
        justify-content: center;
        /* カードを中央寄せにする（任意） */
        max-width: 100%;
        /* このブレークポイントでは最大幅を解除または調整 */
        overflow: visible;
        /* スクロールを無効にするなら */
        scroll-snap-type: none;
        /* スナップを無効化 */
        scroll-behavior: auto;
        /* スムーズスクロールを無効化 */
        gap: 24px;

    }

    .merit-card {
        flex: 0 0 calc(33.333% - 20px);
        width: calc(33.333% - 20px);
        scroll-snap-align: none;
        display: block;
        min-width: 323px;
        padding: var(--padding-top) 16px;
    }

    .merit-content {
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        justify-content: space-between;
        height: 180px;
    }

    .merit-content_text {
        text-align: justify;
        line-height: 1.5;
    }

    /* PCではスライダーの矢印とドットを非表示 */
    .slider-arrows,
    .slider-dots {
        display: none;
    }

    /* PCサイズでの merit-help-link の配置調整（必要であれば） */
    .merit-image {
        margin: 0 auto;
    }
}

/* ==========================================================================
   6. Search Area Section
   ========================================================================== */

.searchArea_title {
    /* h2スタイルと重複するため調整 */
    align-items: end;
    margin: 0;
    padding-top: 32px;
    justify-content: center;
}

.searchArea_note {
    text-align: center;
    padding-top: 6px;
}

.searchArea_inner {
    text-align: center;
    padding-bottom: 32px;
    gap: 32px;
    display: flex;
    flex-direction: column;
}

.searchArea_sub {
    display: flex;
    justify-content: center;
    font-size: var(--font-h3);
    gap: 4px;
}

.searchArea-contenr_inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.search-help {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.search-img {
    width: 24px;
    height: 24px;
    margin: 0;
}

.searchArea_discount,
.searchArea_post,
.searchArea_commit {
    /* 最大幅と中央寄せを共通化 */
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.searchArea_discount,
.searchArea_commit {
    border-top: 1px solid #B4B4B4;
    padding-top: 20px;
}

/*
.searchArea_commit_bottom {
    padding-top: 11px;
}

.searchArea_commit_carwash {
    width: 100%;
}
    */

.searchArea_discount {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
}

/*
.searchArea-discount_sub {
    display: flex;
    height: 26px;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    text-align: center;
    margin: 0;
    padding: 0 16px;
}
    */

.searchArea_discount_inner,
.searchArea_commit_inner {
    /* 内部の最大幅を共通化 */
    width: 100%;
}

.searchArea_commit_top {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    /* 不要なflexプロパティは削除 */
    justify-content: center;
}

.discount-card {
    flex-shrink: 0;
    border-radius: 7.87px;
    position: relative;
    background-color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* transitionプロパティをまとめる */
    padding: 16px 12px;
    display: flex;
    /* Flexboxで内容を中央寄せなど調整しやすく */
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    /* 水平中央寄せ */
    justify-content: center;
    /* 垂直中央寄せ (必要に応じて) */
    text-align: center;
    width: 100%;
    border: var(--button-border);
    box-shadow: var(--button-shadow);
}






.discount-card:hover {
    transform: translateY(3px);
    box-shadow: none;
    /* ホバー時のボーダー色を統一 */
}

.shopArea_card:hover {
    transform: translateY(3px);
    box-shadow: none;
}

/* Discount Card Specifics */
.arrow-container {
    position: absolute;
    right: 7px;
    bottom: 4px;
}

.discount-arrow {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
}


.all-sale-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}


.discount-card_text {
    margin: 0;
    line-height: 1.3;
    padding-top: 2px;
    width: 286px;
    font-weight: 700;
    font-size: var(--font-text-l);
}

.discount-img {
    display: block;
    width: auto;
    height: 30px;
    width: 286px;
}

/* Search Area Forms */
.d-flex {
    display: flex;
    justify-content: center;
}

.rc-input {
    width: calc(100% - 100px) !important;
    margin-right: 3px;
    height: auto;
}


/* Responsive Adjustments for Search Area */
@media (min-width: 768px) {

    .discount-card {
        width: 100%;
        max-width: none;
    }

    .discount-img {
        display: block;
    }
}

@media (min-width: 992px) {
    .searchArea_commit_top {
        width: 100%;
        justify-content: center;
        gap: 11px;
    }

    .discount-card {
        min-width: 150px;
    }

    .searchArea_discount,
    .searchArea_post,
    .searchArea_commit {
        /* 最大幅と中央寄せを共通化 */
        gap: 24px;
    }

    .searchArea_discount,
    .searchArea_commit {
        padding-top: 24px;
    }
}

@media (max-width: 375px) {
    .searchArea_commit_top {
        width: 100%;
        justify-content: center;
        gap: 11px;
    }


    .discount-card_text {
        font-size: var(--font-text-m);
    }

}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {

    .discount-card {
        transition: none;
    }
}

.discount-card:focus {
    /* フォーカススタイルを共通化 */
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.discount-card:focus:not(:focus-visible) {
    /* フォーカススタイルを共通化 */
    outline: none;
}

@media (min-width: 768px) {
    .searchArea-contenr_inner {
        gap: 32px;
    }
}

/* ==========================================================================
   7. Shop Area Section
   ========================================================================== */

.shopArea {
    padding: 32px 0px;
     background-color: var(--color-bg-gray);
}


.subtitle_text span {
    font-size: var(--font-text-l);
}

.shopArea_inner {
    padding: var(--padding-top);
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 680px;
    margin: 0 auto;
}


@media (min-width: 768px) {
    .shopArea_inner {
        display: grid;
        flex-direction: row;
        grid-template-columns: repeat(2, 1fr);
        margin: 0px auto;
        padding:12px;
    }

}

.shopArea-note {
    text-align: center;
    padding-top: 12px;
}


/* ==========================================================================
   10. Tab Component
   ========================================================================== */

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

/* Tab Wrap (共通部分) */

.tab-wrap,
.tab-wrap_detail {
    display: flex;
    flex-wrap: wrap;
}

.tab-wrap {
    max-width: 1100px;
}

.tab-wrap:after {
    content: '';
    width: 100%;
    height: 3px;
    background: #0085C7;
    display: block;
    order: -1;
}

.tab-wrap_detail {
    justify-content: space-between;
}

.tab-wrap_detail:after {
    content: '';
    width: 100%;
    height: 3px;
    background: #ababab;
    /* 特定の色 */
    display: block;
    order: -1;
}

/* Tab Label (共通部分) */
.tab-label,
.tab-label_detail {
    margin: auto;
    color: #EDEDED;
    /* 特定の色 */
    background: #ababab;
    /* 特定の色 */
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    transition: all 0.2s ease;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 48%;
    /* tab-label_detailの幅 */
}


/* Tab Content (共通部分) */
.tab-content,
.tab-content_detail {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    border-radius: 0 0 8px 8px;
    /* tab-contentのデフォルト */
}

.tab-content {
    background-color: #ECF9FF;
    /* 特定の色 */
}

.tab-content_detail {
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    border: solid 2px #FFE7C3;
    /* 特定の色 */
    box-sizing: border-box;
    transform: translateY(-6px);
}

/* Tab Switch (hidden input) */
.tab-switch,
.tab-switch_detail {
    display: none;
}

/* Checked Tab States */
.tab-switch:checked+.tab-label {
    background: #0085C7;
    /* 特定の色 */
    color: #fff;
}

.tab-switch_detail:checked+.tab-label_detail {
    background: var(--pink);
    color: #fff;
}

.tab-switch_detail.__red:checked+.tab-label_detail.__red {
    background: var(--color-crimson);
    /* 特定の色 */
    color: #fff;
}

/* Show Content when Checked */
.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    overflow: auto;
    padding: 4%;
    opacity: 1;
    transition: .5s opacity;
}

.tab-switch_detail:checked+.tab-label_detail+.tab-content_detail {
    height: auto;
    overflow: auto;
    opacity: 1;
    transition: .5s opacity;
    text-align: center;
}


/* Responsive Adjustments for Tabs */
@media all and (min-width:768px) {

    .tab-wrap_detail,
    .cpnArea-item_note {
        padding: 0 42px;
        max-width: 580px;
        margin: 0 auto;
    }

    .tab-label_detail {
        font-size: 16px;
    }

    .tab-label {
        /* tab-wrap_detailとは異なるtab-wrap用 */
        padding: 10px .5em;
        flex: 1;
    }

    .tab-label:not(:last-of-type) {
        /* tab-wrap用 */
        margin-right: 20px;
    }

    .tab-switch:checked+.tab-label+.tab-content {
        padding: 4% 2%;
    }

}

/* ==========================================================================
   11. Floating Buttons
   ========================================================================== */

.cam-float {
    position: fixed;
    width: 100vw;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    padding: 16px 8px;
    z-index: 50;
}

.fotter_btn {
    display: flex;
    max-width: 768px;
    margin: 0 auto;
    justify-content: center;
    gap: 4px;
}

.fotter_btn a {
    text-decoration: none;
    width: calc(100% / 3 - 4px);
}

.float_txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}


/* Button Base (entry-btn, shoparea-btnで共通化) */
.entry-btn,
.shoparea-btn,
.extended-btn {
    display: inline-flex;
    min-height: 48px;
    font-size: var(--font-text-s);
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    background-color: var(--color-crimson);
    max-width: 100%;
}

.shoparea-btn {
    background-color: #fff;
    color: var(--color-crimson);
    /* shoparea-btnは赤文字 */
}

.entry-btn {
    color: #fff !important;
}

.extended-btn {
    background-color: var(--color-bright-orange);
    color: #fff;
}

.extended-btn:hover {
    color: #fff;
}

/* ==========================================================================
   12. External Library Overrides / Specific Adjustments
   ========================================================================== */

/* ReX Campaign Entry Button specific override */
.CampaignEntryButton_campaignButton__n6hK5 .CampaignEntryButton_rexButton__VH0Gh {
    padding: 0.75rem 0 !important;
}

.CampaignEntryButton_campaignButton__n6hK5 {
    margin: 0 !important;
}


/*rule*/

.campaignRule {
    max-width: 960px;
    margin: 14px auto;
}

.campaignRule_container {
    margin: 0 16px;
}

@media (min-width: 540px) and (max-width: 768px) {
    .campaignRule {
        margin: 24px;
    }
}

@media all and (min-width:768px) {
    .campaignRule {
        max-width: 960px;
        margin: 0 auto;
    }

    .campaignRule_container {
        margin: 0px;
    }
}




/*add*/
.st-Breadcrumb {
    max-width: 1280px;
    margin: 0 auto;
}

.st-Breadcrumb_List {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0px 16px !important;
}

.shaken-cpn-search__postalbox {
    justify-content: center;
    width: 100%;
}

.postal-style {
    width: 100%;
    max-width: 580px;
}

@media only screen and (max-width: 330px) {
    .CampaignEntryButton_campaignButton__n6hK5 .CampaignEntryButton_rexButton__VH0Gh {
        font-size: 6.9333333333vw;
        min-width: 19rem !important;
    }
}


@media screen and (max-width: 768px) {
    .CampaignEntryButton_campaignButton__n6hK5 .CampaignEntryButton_rexButton__VH0Gh {
        font-size: 18px !important;
    }
}

@media only screen and (min-width: 769px) {
    .CampaignEntryButton_campaignButton__n6hK5 .CampaignEntryButton_rexButton__VH0Gh {
        font-size: 22px !important;
    }
}

@media (min-width: 768px) {
    .shaken-cpn-search__postalbox {
        width: 100%;
        margin: 0 auto;
    }
}


.button-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
}

.button-wrapper .discount-card {
    width: 100%;
}


.search-area {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
    background: var(--color-light-red);
    /* 背景色（必要に応じて変更） */
    z-index: 10;
    border-radius: 0 0 7.87px 7.87px;
    border: var(--button-border);
    border-top: none;

}

/* 開いた時のスタイル */
.search-area.is-open {
    max-height: 300px;
    opacity: 1;
    padding-top: 10px;
}

.search-area_inner {
    padding: 20px;
}

.discount-card--red {
    background-color: var(--color-light-red);
}

.discount-card--green {
    background-color: #F0FCED;
}

.discount-card--blue {
    background-color: var(--color-light-blue);
}

.discount-card--gray {
    background-color: #E9EAEA;
}

.discount-card--white {
    background-color: #fff;
}




.search-area_text {
    font-size: var(--font-text-m);
    padding-bottom: 8px;
    font-weight: 700;
}

.discount-card.is-active {
    border-radius: 7.87px 7.87px 0 0;
    border-bottom: none;
    box-shadow: none;
}

.discount-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.toggle-icon {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.toggle-icon::before,
.toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.toggle-icon::before {
    width: 100%;
    height: 2px;
}

.toggle-icon::after {
    width: 2px;
    height: 100%;
}

.discount-card.is-active .toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.discount-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.toggle-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.toggle-icon::before,
.toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, background-color 0.3s ease;
    background-color: #333;
}

.toggle-icon::before {
    width: 100%;
    height: 2px;
}

.toggle-icon::after {
    width: 2px;
    height: 100%;
}


.discount-card--red .toggle-icon::before,
.discount-card--red .toggle-icon::after {
    background-color: #BF0000;
    /* 赤色 */
}

.discount-card--green .toggle-icon::before,
.discount-card--green .toggle-icon::after {
    background-color: #047205;
    /* 緑色 */
}

.discount-card--blue .toggle-icon::before,
.discount-card--blue .toggle-icon::after {
    background-color: #006497;
    /* 青色 */
}

.discount-card--gray .toggle-icon::before,
.discount-card--gray .toggle-icon::after {
    background-color: #4D4D4D;
    /* グレー */
}


.discount-card.is-active .toggle-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}


/* PCサイズ（768px以上）の時だけ適用 */
@media (min-width: 768px) {

    .discount-card {
        position: relative;
    }

    .toggle-icon {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .discount-content,
    .all-sale-content {
        justify-content: center;
        /* 中央揃え */
        width: 100%;
        gap: 0;
    }
}




/* ==========================================================================
   End of Styles
   ========================================================================== */