@charset "UTF-8";

.pt3 {
    padding-top: 3%;
}

.pt5 {
    padding-top: 5%;
}

.pt6 {
    padding-top: 6%;
}

.pt7 {
    padding-top: 7%;
}

.pt8 {
    padding-top: 8%;
}

.pt10 {
    padding-top: 10%;
}

.pb2 {
    padding-bottom: 2%;
}

.pb3 {
    padding-bottom: 3%;
}

.pb4 {
    padding-bottom: 4%;
}

.pb5 {
    padding-bottom: 5%;
}

.pb6 {
    padding-bottom: 6%;
}

.pb7 {
    padding-bottom: 7%;
}

.pb9 {
    padding-bottom: 9%;
}

.pb10 {
    padding-bottom: 10%;
}

.main {
    width           : 750px;
    margin          : 0 auto;
    background-color: #fff100;
}

.title {
    background-color: #00a38e;
    padding         : 2% 4%;
}

/* read */
#read .inner {
    width : 690px;
    margin: 5% auto;
}

/* 賞品 */
#prize .inner {
    width : 690px;
    margin: 8% auto 0;
}

.box {
    background-color: #fff;
    padding         : 6%;
}

/* ボタン */
.button02 {
    animation: button02 2s infinite;
}

@keyframes button02 {
    0% {
        transform: translate(0px, 2px);
    }

    5% {
        transform: translate(0px, -2px);
    }

    10% {
        transform: translate(0px, 2px);
    }

    15% {
        transform: translate(0px, -2px);
    }

    20% {
        transform: translate(0px, 2px);
    }

    25% {
        transform: translate(0px, -2px);
    }

    30% {
        transform: translate(0px, 0px);
    }
}

.open-btn {
    background-color: unset;
    border          : none;
    cursor          : pointer;
}

.close-btn {
    position         : absolute;
    top              : -15px;
    right            : -15px;
    background       : transparent;
    border           : none;
    cursor           : pointer;
    transition       : transform 0.3s ease;
    width            : 60px;
    height           : 60px;
    background-image : url(../../../img/campaign/cm2025/modal_x.png);
    background-repeat: no-repeat;
    background-size  : cover;

}

/* モーダル背景 */
.modal {
    display        : none;
    position       : fixed;
    top            : 0;
    left           : 0;
    justify-content: center;
    align-items    : center;
    width          : 100%;
    height         : 100%;
    background     : rgba(79, 79, 79, 0.9);
    z-index        : 126;
    opacity        : 0;
    pointer-events : none;
    transition     : opacity 0.3s ease;
}

/* モーダル表示状態 */
.modal.active {
    display       : flex;
    opacity       : 1;
    pointer-events: auto;
}

/* モーダルの中身*/
.modal-content {
    position        : relative;
    background      : unset;
    width           : 80vw;
    max-width       : 598px;
    text-align      : center;
    position        : relative;
    opacity         : 0;
    transform       : scale(0.8);
    transition      : all 0.3s ease;
    height          : 80%;
    margin          : 6% auto;
    background-color: #fff;
    border          : #000 1px solid;
    padding         : 3%;
    scrollbar-width : none;
}

/*.modal-content::after {
    border             : 30px solid transparent;
    border-top-color   : #00a38e;
    border-bottom-width: 0;
    content            : "";
    display            : block;
    right              : 0;
    left               : 0;
    margin             : 0 auto;
    position           : absolute;
    width              : 0;
    bottom             : -6%;
}*/

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-body {
    height         : 100%;
    overflow       : auto;
    scrollbar-width: none;
    cursor         : pointer;
}

.modal-body::-webkit-scrollbar {
    display: none;
}

/* アニメーション*/
.modal.active .modal-content {
    animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
    0% {
        opacity  : 0;
        transform: scale(0.8);
    }

    100% {
        opacity  : 1;
        transform: scale(1);
    }
}

.modal-content img {
    border-bottom : #fff100 2px solid;
    margin-bottom : 8%;
    padding-bottom: 8%;
}

.modal-content img:last-child {
    border-bottom : none;
    margin-bottom : 4%;
    padding-bottom: 0;
}

.prize02 {
    border-top: #fff100 2px solid;
    margin-top: 8%;
    padding   : 4% 0 6%;
}

/* 対象商品 */
#goods .inner {
    width : 690px;
    margin: 8% auto 0;
}

.slider {
    width  : 90%;
    margin : 0 auto;
    z-index: 0;
}

.slider_inner img {
    margin: 0 auto;
}

.slick-slide {
    height: auto !important;
}

.slick-arrow {
    z-index: 2 !important;
    width  : 11px !important;
    height : 43px !important;
}

.slick-arrow:before {
    content : "" !important;
    width   : 100% !important;
    height  : 100% !important;
    position: absolute;
    top     : 0;
    left    : 0;
}

.slick-next:before {
    background       : url(../../../img/campaign/cm2025/slider_next.png) !important;
    background-size  : contain !important;
    background-repeat: no-repeat !important;
}

.slick-prev:before {
    background       : url(../../../img/campaign/cm2025/slider_prev.png) !important;
    background-size  : contain !important;
    background-repeat: no-repeat !important;
}

.slick-next {
    right: -5% !important;
    top  : 35%;
}

.slick-prev {
    left: -5% !important;
    top : 35%;
}

.slider_txt {
    padding-top: 4%;
}

.botton_slider {
    padding: 4% 0 8%;
}

.botton_goods {
    display        : flex;
    justify-content: space-between;
    max-width      : 499px;
    margin         : 0 auto 8%;
}

/* 対象商品 */
#apply .inner {
    width : 690px;
    margin: 8% auto 0;
}

#apply .box img {
    border-bottom : #fff100 2px solid;
    margin-bottom : 8%;
    padding-bottom: 8%;
}

#apply .box img:last-child {
    border-bottom : none;
    margin-bottom : 4%;
    padding-bottom: 0;
}

/* レシート、領収書撮影時の注意事項 */
#receipt .inner {
    width : 690px;
    margin: 8% auto 0;
}

#receipt .box_txt img {
    padding-bottom: 4%;
}

.box_photo {
    max-width      : 569px;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    margin         : 3% auto 1%;
}

.box_photo img {
    width         : 48%;
    padding-bottom: 4%;
}

/* 応募規約 */
#kiyaku .inner {
    width : 690px;
    margin: 8% auto 0;
}

.kiyaku_box {
    font-size       : 16px;
    background-color: #fff;
    max-width       : 690px;
    height          : 500px;
    overflow        : hidden;
    margin          : 0 auto 8%;
    padding         : 3%;
    text-align      : left;
    line-height     : 1.5;
}

.kiyaku_box_inner {
    width     : 100%;
    height    : 100%;
    overflow  : scroll;
    overflow-x: hidden;
}

.kiyaku_box p {
    margin: 0;
}

.kiyaku_box h5 {
    font-size  : 16px;
    font-weight: normal;
    margin     : 0;
    padding-top: 20px;
}

.kiyaku_box ul,
.kiykiyaku_boxaku ol {
    margin              : 0;
    padding             : 0;
    list-style          : none;
    padding-inline-start: 0;
}

.kiyaku_box ul li {
    padding-left: 1em;
    text-indent : -1em;
}

.kiyaku_box ol li {
    list-style  : none;
    position    : relative;
    padding-left: 1em;
    text-indent : -1em;

}

.kiyaku_box a {
    color          : #000;
    text-decoration: underline;
}

.kiyaku_box a:hover {
    opacity: 0.6;
}

/* よくある質問事項 */
#q_and_a .inner {
    width : 690px;
    margin: 8% auto 0;
}

.box_q_and_a {
    position: relative;
    border-bottom : #fff100 2px solid;
    margin-bottom : 8%;
    padding-bottom: 4%;
}

.box_q_and_a:last-child {
    border-bottom : none;
    margin-bottom : -2%;
    padding-bottom: 0;
}

.box_q_and_a img {
    padding-bottom: 4%;
}

.button09 {
    position: absolute;
    bottom: 22%;
    left: 7%;
    width: 57%;
    height: 11%;
}

/* お問い合わせ */
#contact .inner {
    width  : 617px;
    margin : 0 auto;
    padding: 8% 0 6%;
}

#contact img {
    padding-bottom: 4%;
}

.button_oubo_fix {
    position  : fixed;
    bottom    : 0;
    margin    : 0 auto;
    transition: 0.5s;
}

/*footerまでスクロールしたら消す*/
.is-hidden {
    visibility: hidden;
    opacity   : 0;
}

.button_oubo a,
.button_oubo_fix a:hover {
    opacity: unset;
}

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

    .main {
        width: 100%;
    }

    /* read */
    #read .inner {
        width: 95%;
    }

    /* 賞品 */
    #prize .inner {
        width: 95%;
    }

    .close-btn {
        width : 35px;
        height: 35px;
    }

    .modal-content {
        margin: 18% auto;
    }

  /*.modal-content::after {
        border             : 22px solid transparent;
        border-top-color   : #00a38e;
        border-bottom-width: 0;
    }*/

    /* 対象商品 */
    #goods .inner {
        width: 95%;
    }

    .slick-arrow {
        width : 7px !important;
        height: 25px !important;
    }

    .slick-next {
        right: -10% !important;
    }

    .slick-prev {
        left: -10% !important;
    }

    .botton_slider {
        width : 45%;
        margin: 0 auto;
    }

    .botton_goods img {
        width: 80%;
    }

    /* 応募方法 */
    #apply .inner {
        width: 95%;
    }

    /* レシート、領収書撮影時の注意事項 */
    #receipt .inner {
        width: 95%;
    }

    /* 応募規約 */
    #kiyaku .inner {
        width: 95%;
    }

    .kiyaku_box {
        height: 400px;
    }

    #kiyaku .button_oubo {
        width       : 80%;
        margin-left : auto;
        margin-right: auto;
    }

    .kiyaku_box,
    .kiyaku_box h5 {
        font-size: 14px;
    }

    /* よくある質問事項 */
    #q_and_a .inner {
        width: 95%;
    }

    /* お問い合わせ */
    #contact .inner {
        width: 85%;
    }

    /* .button_oubo_fix {
        bottom: 11%;
    } */
}