/*スマホの100％表示設定*/

body {
    margin-top: 0 !important;
}

.sp_display {
    display: none;
}

h1 {
    margin: 0;
}

img.pc_display {
    vertical-align: bottom;
}


ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reviewpresent-allitem,
.reviewpresent-application {
    padding: 0;
    margin: 0 0 80px 0;
}


#reviewpresent_wrap {
    width: 748px;
    margin: 0 auto;
    padding: 0 0 100px 0;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    font-family: "Noto Sans JP", "Yu Gothic", "Helvetica Neue", sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.application-text {
    font-size: 18px;
    text-align: left;
}

.application-text-s {
    font-size: 15px;
    display: block;
    line-height: 2rem;
    text-align: left;
    margin-top: 5px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.reviewpresent-btn a.btn1 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 30%;
    margin: auto;
    margin-bottom: 1rem;
    padding: 1.5rem 5rem;
    font-weight: bold;
    border: 2px solid #f5ac1e;
    border-radius: 100vh;
    background: #f5ac1e;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    transition: .4s;
}

.reviewpresent-btn a.btn1:hover {
    background: #fff;
    color: #f5ac1e;
}

.reviewpresent-btn a.btn2 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 30%;
    margin: auto;
    margin-bottom: 6rem;
    padding: 1.5rem 5rem;
    font-weight: bold;
    border: 2px solid #9e9e9e;
    border-radius: 100vh;
    background: #9e9e9e;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    transition: .4s;
}

.reviewpresent-btn a.btn2:hover {
    background: #fff;
    color: #9e9e9e;
}

.campaign-item-link a.btn3 {
    display: block;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    width: 40%;
    margin: auto;
    margin-bottom: 5rem;
    padding: 1.5rem 5rem;
    font-weight: bold;
    border: 2px solid #9e9e9e;
    border-radius: 100vh;
    background: #9e9e9e;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    transition: .4s;
}

.campaign-item-link a.btn3:hover {
    background: #fff;
    color: #9e9e9e;
}

.campaign-chui {
    border: 1px solid #f5ac1e;
}

#reviewpresent_wrap h3 {
    background-color: #f5ac1e;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    margin: 0;
    display: block;
    font-size: 14px;
}

.campaign-chui {
    width: 676px;
    margin: 20px auto 30px;
    padding: 0;
    display: block;
    background-color: f2edea;
}

.campaign-chui-text {
    text-align: left;
    list-style: disc;
    padding: 30px 40px;
}

.campaign-chui-text {
    font-size: 13px;
    letter-spacing: 0.02em;
}

span.text-red {
    color: #dc4848;
    font-weight: 600;
}




.reviewpresent_intro {
    margin-bottom: 70px;
}


#reviewpresent_wrap img {
    display: block;
}

#reviewpresent_wrap .campaign-chui ul {
    padding: 25px 50px;
}

#reviewpresent_wrap .campaign-chui ul li {
    line-height: 180%;
    list-style: disc;
}


.reviewpresent_intro .reviewpresent-houkoku p {
    font-size: 13px;
    padding: 0 50px 20px;
    margin: 0;
    display: block;
    text-align: left;
    line-height: 180%;
}

span.chui {
    color: #dc4848;
    font-weight: 600;
}

.reviewpresent-naiyou img {
    margin-top: 40px;
}



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

    body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    #all_wrap {
        width: 100vw;
    }

    .pc_display {
        display: none;
    }

    .sp_display {
        display: block;
    }

    #mainArea {
        display: inherit;
    }

    .reviewpresent-houkoku p {
        font-size: 12px;
        padding: 0 20px 20px;
        margin: 0;
        display: block;
        text-align: left;
        line-height: 180%;
    }


    #reviewpresent_wrap {
        width: 100vw;
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 0 0 30% 0;
        height: auto;
        margin-top: 30px;
    }

    #smf-header-nav-frame {
        position: fixed;
        top: 0;
        left: 0;
    }


    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .application-text {
        font-size: 1.3rem;
    }


    .balloon2-top {
        padding: 3%;
    }

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

    .reviewpresent_intro {
        margin-bottom: 40px;
    }

    .reviewpresent-btn span,
    .campaign-item-link span {
        font-size: 1.3rem;
    }

    .reviewpresent-btn a.btn1 {
        width: 50vw;
        padding: 1rem 2rem;
        margin-bottom: 1rem;
    }

    .reviewpresent-btn a.btn2 {
        width: 50vw;
        padding: 1rem 2rem;
        margin-bottom: 5rem;
    }


    .campaign-item-link a.btn3 {
        display: block;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        width: 50%;
        margin: auto;
        margin-bottom: 5rem;
        padding: 1rem 4rem;
        font-weight: bold;
        border: 2px solid #9e9e9e;
        border-radius: 100vh;
        background: #9e9e9e;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        transition: .4s;
    }


    .campaign-chui-text {
        font-size: 1.0rem;
        padding: 5% 8% 5% 10%;

    }

    .reviewpresent-coupon-text {
        font-size: 1.3rem;
    }


    .campaign-chui-text li {
        padding: 1% 0;
    }

    .reviewpresent_ttl {
        padding-top: 25vw;
        text-align: left;
    }

    .reviewpresent-item {
        width: 44%;
        padding: 0;
        margin: 0 3% 8%;
    }

    .reviewpresent_ttl img,
    .reviewpresent_intro img,
    .reviewpresent-application img,
    .reviewpresent-coupon img {
        width: 100%;
    }

    .reviewpresent_ttltext {
        margin: 0;
        padding: 0 6% 5%;
    }





    .reviewpresent-item a:hover,
    .reviewpresent-btn a:hover {
        opacity: 1.0;
    }

    .reviewpresent-pic img {
        width: 100%;
        height: auto;
    }


    #reviewpresent_wrap h2 {
        font-size: 2.5rem;
        margin-top: 20%;
    }

    #reviewpresent_wrap h3 {
        font-size: 1rem;
    }


    .present-size {
        font-size: 1rem;
        width: 90%;

    }



    .reviewpresent-allitem {
        width: 90%;
        margin: 0;
        padding: 5%;
    }

    .reviewpresent-allitem li {
        width: 45%;
        margin: 0 10% 10% 0;
        padding: 0;
    }



    .campaign-chui {
        width: 100%;
        margin: 0 auto 5%;

    }

    #reviewpresent_wrap .campaign-chui ul {
        padding: 25px 35px;
    }



    .reviewpresent-btn,
    .campaign-item-link {
        width: 87%;
        padding: 0 5%;
        margin: 5% auto 0;
    }

    .reviewpresent-btn ul li {
        margin: 0 5% 0 0;
    }

    .reviewpresent-btn ul li:nth-child(2n) {
        margin: 0 0 0 0;
    }

    .reviewpresent-btn img {
        width: 40%;
    }

    .reviewpresent-btn a,
    .campaign-item-link a {
        padding: 7% 15%;
        margin: 0 1.5%;
        font-size: 1rem;
    }


    .reviewpresent-coupon {
        margin-top: 20%;
        padding: 0 5%;
    }

    .reviewpresent-application {
        margin: 0 0 10% 0;
    }


    .reviewpresent-picmain {
        display: block;
    }

    .reviewpresent-picsub li {
        margin: 0 2% 5% 0;
        width: 49%;
    }

    .reviewpresent-pic span {
        font-size: 1rem;
        font-weight: 600;
        line-height: 0rem;
    }

    .reviewpresent-picmain-text,
    .reviewpresent_intro-chui {
        padding: 0 2%;
    }

    .reviewpresent_intro-ttl {
        font-size: 2.3rem;
        margin-top: 3%;
    }

    .reviewpresent_intro-text {
        font-size: 1.2rem;
    }

    .reviewpresent_intro-chui {
        font-size: 1.1rem;
    }


    .application-text {
        font-size: 1.3rem;
    }


    .balloon2-top {
        padding: 3%;
    }

    .application-text-s {
        font-size: 1.1rem;
        line-height: 1.5rem;
    }

    .reviewpresent-icon {
        width: 25%;
        top: -7%;
        left: -3%;
    }




    .kotei,
    #container,
    #pan,
    #main_left,
    .pc_display,
    .kotei-review {
        display: none !important;
    }

    #all,
    #content_faq,
    #main_right,
    .infowrap #main_right {
        width: 100vw;
    }

    #reviewpresent-wrap {
        padding: 0 10vw;
        width: 100vw;
        position: relative;
    }

    .sp_display {
        display: block;
    }
}

body {
    margin: 0;
}

body #pan {
    margin-bottom: 20px;
}

#content_faq {
    overflow: visible;
}




#reviewpresent_wrap {
    color: #3a3a3a;
}

}

/*awesmeの設定*/
.fa,
.fas,
.fab {
    font-family: FontAwesome;
}

.accshow img,
.notice_question img {
    width: 100%;
    margin: 5% 0;
}

/*タイトル部のリセットとnoto化*/
#reviewpresent-wrap,
#reviewpresent-wrap p,
#reviewpresent-wrap a,
#reviewpresent-wrap span,


ul,
li {
    list-style: none;
}

#reviewpresent-wrap a {
    /*    text-decoration: none;*/
}

#sp_nav {
    height: 21.3vw;
}

/*ボックス全体*/

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

    /*ボックス全体*/
    #reviewpresent-wrap {
        padding: 0;
        width: 100vw;
        text-align: center;
    }

}





/* 商品リスト全体を囲むセクション（背景色と外側余白を設定） */
    .campaign-product-section {
        background-color: #55A5A4;
        padding: 6% 8%;
    }
    
    /* タイトルのスタイル */
    .campaign-product-title {
        color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin: 0 0 6% 0;
        letter-spacing: 0.1em;
    }

    /* 商品リスト用スタイル（背景・余白は親要素に移動） */
    .campaign-product-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .campaign-product-item {
        width: 47%;
        background-color: transparent;
        margin-bottom: 8%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .campaign-product-item a {
        display: block;
        text-decoration: none;
    }
    .campaign-product-item img {
        width: 100%;
        height: auto;
        display: block;
        background: #FAF8F6;
        aspect-ratio: 1/1.1;
        object-fit: cover;
        border-radius: 4px;
    }
    .campaign-product-info {
        padding: 8px 0 0;
    }
    .campaign-product-name {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 0 4px 0;
        font-weight: 500;
        color: #ffffff;
        text-align: left;
        /* 全文表示にする場合は以下の3行を削除してください */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .campaign-product-price {
        font-size: 13px;
        font-weight: 500;
        color: #ffffff;
        margin: 0;
        line-height: 1.5;
        text-align: right;
    }

    /* PC・タブレット向けのレスポンシブ調整 (横3列) */
    @media screen and (min-width: 768px) {
        .campaign-product-section {
            padding: 5% 8%; 
        }
        .campaign-product-title {
            font-size: 33px;
            margin: 0 0 4% 0;
        }
        .campaign-product-list {
            justify-content: space-between;
            gap: 0; 
        }
        .campaign-product-item {
            width: 31%;
            margin-bottom: 4%; 
        }
        .campaign-product-info {
            padding: 12px 0 0; 
        }
        .campaign-product-name, 
        .campaign-product-price {
            font-size: 14px; 
        }
    }
    
    /* スマホ向けのレスポンシブ調整 (横2列) */
    @media screen and (max-width: 500px) {
        .campaign-product-section {
            padding: 6% 8%; 
        }
        .campaign-product-title {
            font-size: 16px;
            margin: 0 0 6% 0;
        }
        .campaign-product-item {
            width: 47%; 
            margin-bottom: 6%;
        }
        .campaign-product-name,
        .campaign-product-price {
            font-size: 11px; 
        }
        .campaign-product-info {
            padding: 6px 0 0; 
        }
    }


    
/* ステップ1のスタイル */
/* キャンペーン全体の背景色（外側のティールグリーン） */
    .campaign-step1-area {
        background-color: #55a5a4;
        padding: 60px 30px 25px; /* 上下の余白とスマホ時の左右余白 */
    }

    /* 白ベタのコンテナ */
    .step1-white-box {
        position: relative; /* バッジを重ねるための基準点 */
        background-color: #ffffff;
        border-radius: 12px;
        max-width: 748px;
        margin: 0 auto;
        /* 上部のpaddingを広めにとり、バッジとタイトルのスペースを確保 */
        padding: 50px 40px 40px; 
        box-sizing: border-box;
    }

    /* STEP1 バッジ（枠線に半分重ねる） */
    .step1-badge {
        position: absolute;
        top: -20px; /* ★白枠からどれくらい上に飛び出すか（SVGの余白に合わせて微調整してください） */
        left: 50%;
        transform: translateX(-50%); /* 中央揃え */
        width: 178px; /* ★バッジの表示サイズ（書き出したSVGに合わせて調整） */
        z-index: 2;
    }
    
    .step1-badge img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* タイトル（応募するSNSにて〜） */
    .step1-title {
        text-align: center;
        margin-bottom: 35px; /* 下のコンテンツとの余白 */
        width: fit-content;
    }

    .step1-title img {
        width: 100%;
        max-width: 480px; /* ★タイトルの最大幅 */
        height: auto;
    }

    /* 内部のレイアウト（PCは横並び） */
    .step1-content {
        display: flex;
        align-items: center; /* 縦の中央揃え */
        justify-content: center;
        gap: 40px; /* イラストとボタンの間の余白 */
    }

    /* 左側のイラストエリア */
    .step1-illust {
        flex: 0 0 35%; /* 幅の割合を固定 */
        max-width: 220px;
    }
    
    .step1-illust img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 右側のボタンエリア */
    .step1-buttons {
        flex: 0 0 55%; /* 幅の割合を固定 */
        max-width: 380px;
        display: flex;
        flex-direction: column;
        gap: 15px; /* ボタン同士の縦の余白 */
    }

    /* リンク（ボタン）の共通設定 */
    .step1-buttons a {
        display: block;
        transition: opacity 0.3s ease;
    }

    .step1-buttons a:hover {
        opacity: 0.7; /* マウスオーバーで少し透過 */
    }

    .step1-buttons a img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* スマホ用のレスポンシブ調整（600px以下で横並びを維持） */
    @media screen and (max-width: 600px) {
        .step1-white-box {
            /* スマホ時は左右の余白を少し狭めて、横並びのスペースを広く確保します */
            padding: clamp(28px, 7.7vw, 32px) clamp(14px, 3.8vw, 16px) clamp(23px, 6.4vw, 27px);
            border-radius: clamp(5px, 1.3vw, 5px);
        }
        .step1-badge {
            top: -11px;
        }
        .step1-title {
            margin-bottom: clamp(17px, 4.6vw, 19px);
        }
        .step1-content {
            /* 縦並びの指定を削除し、横並び（row）を明示 */
            flex-direction: row; 
            gap: 10px; /* イラストとボタンの間の余白をスマホ用に狭める */
            align-items: center;
        }
        .step1-illust {
            flex: 0 0 38%; /* スマホ時のイラストの幅比率 */
            /* max-width は外すか、必要に応じて設定 */
        }
        .step1-buttons {
            flex: 0 0 60%; /* スマホ時のボタン群の幅比率 */
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px; /* ボタン同士の縦の余白もスマホ用に少し狭める */
        }

        .campaign-step1-area {
            padding: clamp(32px, 9vw, 37px) clamp(14px, 3.8vw, 16px) clamp(13px, 3.6vw, 15px);
        }

        .step1-badge img {
            width: 55%;
        }

        .step1-title img {
            width: 87%;
            margin: 0 auto;
        }
    }