@charset "UTF-8";

body {
    background-color: #FDFAF2;
}

.-ttl {
    text-align: center;
}

.-ttl .-txt {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-align: center;
    position: relative;
}

.-ttl .-txt::before,
.-ttl .-txt::after {
    content: '';
    background-image: url(../img/ttl_sheet.svg);
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.-ttl .-txt::before {
    left: -42px;
}

.-ttl .-txt::after {
    right: -42px;
}

.-txt_red {
    color: #E51717;
}

@media screen and (min-width: 769px) {

    .-wrapper {
        max-width: 832px;
        width: 90%;
    }

}

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

    .-wrapper {
        width: 89.333%;
    }

    .-ttl .-txt {
        font-size: 5.6vw;
    }

    .-ttl .-txt::before,
    .-ttl .-txt::after {
        width: 6.666vw;
        height: 3.2vw;
    }

    .-ttl .-txt::before {
        left: -9.6vw;
    }

    .-ttl .-txt::after {
        right: -9.6vw;
    }

}


/*  header */

.header {
    background-image: url(../img/header_bg.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.header-wrapper {
    padding: 1.683vw 0 1.903vw;
}

.header-sns {
    display: flex;
    justify-content: space-between;
    margin: 0 0 19.18vw 1.683vw;
    width: 6.002%;
}

.header-sns-item {
    width: 36.585%;
}

.header-logo {
    width: 35.871%;
    margin: 0 auto;
}

@media screen and (min-width: 769px) {

    .header-sns-item {
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }

    .header-sns-item:hover {
        opacity: 0.7;
    }

}

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

    .header {
        background-image: url(../img/header_bg_sp.jpg);
    }

    .header-wrapper {
        margin: 0 auto;
        padding: 5.866vw 0 4.8vw;
        width: 89.333%;
    }

    .header-sns {
        margin: 0 0 64vw 0;
        width: 23.283%;
    }

    .header-sns-item {
        width: 38.461%;
    }

    .header-logo {
        width: 100%;
    }

}


/* campaign */

.campaign {}

.campaign-wrapper {
    padding: 48px 0 73px;
}

.campaign-ttl {
    width: 100%;
    margin-bottom: 28px;
}

.campaign-period {
    margin-bottom: 36px;
}

.campaign-period-ttl {
    margin-bottom: 3px;
}

.campaign-period-txt {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.466;
    text-align: center;
}

.campaign-detail {
    margin-bottom: 58px;
}

.campaign-detail-txt {
    font-size: 23px;
    font-weight: bold;
    line-height: 1.913;
    margin-bottom: 41px;
    text-align: center;
}

.campaign-detail-txt-hashtag {
    background-color: #E51717;
    color: #fff;
    display: inline-block;
    line-height: 1.5;
}

.campaign-detail-sns {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 9.855%;
}

.campaign-detail-sns-item {
    width: 36.585%;
}

.campaign-note {
    border: 1px solid #231815;
    padding: 33px 0;
    margin: 0 auto;
    width: 100%;
}

.campaign-note-txt {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.933;
    margin-bottom: 17px;
    text-align: left;

}

.campaign-note-txt:last-child {
    margin-bottom: 0;
}

@media screen and (min-width: 769px) {

    .campaign-detail-sns-item {
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }

    .campaign-detail-sns-item:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    .campaign-note {
        text-align: center;
    }

    .campaign-note-txt {
        display: inline-block;
    }
}

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

    .campaign-wrapper {
        padding: 8vw 0 7.466vw;
    }

    .campaign-ttl {
        margin-bottom: 8.266vw;
    }

    .campaign-period {
        margin-bottom: 9.6vw;
    }

    .campaign-period-ttl {
        margin-bottom: 1.866vw;
    }

    .campaign-period-txt {
        font-size: 6.4vw;
        line-height: 1.833;
    }

    .campaign-detail {
        margin-bottom: 10.133vw;
    }

    .campaign-detail-txt {
        font-size: 4.8vw;
        line-height: 1.722;
        margin-bottom: 6.4vw;
    }

    .campaign-detail-txt-hashtag {
        line-height: 1.3;
    }

    .campaign-detail-sns {
        width: 23.283%;
    }

    .campaign-detail-sns-item {
        width: 38.461%;
    }

    .campaign-note {
        padding: 3.733vw 0 6.4vw;
        width: 100%;
    }

    .campaign-note-txt {
        font-size: 3.733vw;
        line-height: 1.857;
        margin: 0 auto 2.133vw;
        width: 92.5%;
    }

}


/* prize */

.prize {
    background-image: url(../img/prize_bg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.prize-wrapper {
    margin: 0 auto;
    padding: 69px 0 100px;
}

.prize-ttl {
    margin-bottom: 43px;
}

.prize-list {
    display: flex;
    justify-content: space-between;
}

.prize-list-item {
    width: 22.441%;
}

.prize-list-img {
    box-shadow: 3px 3px 6px rgba(35, 24, 21, 0.1);
    margin-bottom: 17px;
    width: 100%;
}

.prize-list-detail {
    text-align: center;
}

.prize-list-detail-note {
    margin: 0 auto 12px;
    width: 4%;
}

.prize-list-detail-name {
    color: #E51717;
    font-size: min(1.464vw, 20px);
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 5px;
}

.prize-list-detail-number {
    font-size: min(1.464vw, 1.464vw);
    font-weight: bold;
    line-height: 1.7;
}

@media screen and (min-width: 769px) {

    .prize-wrapper {
        max-width: 1114px;
        width: 90%;
    }

    .prize-list-detail-name {
        white-space: nowrap;
    }

}

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

    .prize {
        background-image: url(../img/prize_bg_sp.jpg);
    }

    .prize-wrapper {
        padding: 12.533vw 0 5.333vw;
        width: 89.333%;
    }

    .prize-ttl {
        margin-bottom: 9.6vw;
    }

    .prize-list {
        flex-wrap: wrap;
    }

    .prize-list-item {
        margin-bottom: 9.6vw;
        width: 47.761%;
    }

    .prize-list-img {
        box-shadow: 3px 3px 20px rgba(35, 24, 21, 0.1);
        margin-bottom: 2.666vw;
    }

    .prize-list-detail-note {
        margin: 0 auto 1.866vw;
        width: 6.25%;
    }

    .prize-list-detail-name {
        font-size: min(4.533vw, 17px);
        line-height: 1.235;
        margin-bottom: 0;
    }

    .prize-list-detail-number {
        font-size: min(4.533vw, 17px);
        line-height: 2;
    }

}


/* rule */

.rule {}

.rule-wrapper {
    padding: 99px 0;
}

.rule-ttl {
    margin-bottom: 38px;
}

.rule-txt {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2;
}

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

    .rule-wrapper {
        padding: 10.933vw 0 14.666vw;
    }

    .rule-ttl {
        margin-bottom: 8vw;
    }

    .rule-txt {
        font-size: 3.733vw;
        letter-spacing: normal;
        line-height: 1.857;
    }

}

/* last */

.last {
    position: relative;
    z-index: 1;
    background-color: #231815;
}

.last-wrappper {
    padding: 120px 0;
}

.last-ttl {
    width: 54%;
    margin: 0 auto 32px;
}

.last-btn {
    display: block;
    font-size: 28px;
    font-weight: 500;
    font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "Yu Mincho", serif;
    line-height: 1.464;
    text-align: center;
    color: #fff;
    border: 2px solid #fff;
    background-color: #231815;
    padding: 11px 0 8px;
    width: 36%;
    margin: 0 auto;
}

@media screen and (min-width: 769px) {

    .last-wrappper {
        max-width: 1000px;
        width: 90%;
    }

    .last-btn {
        letter-spacing: 0.02em;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }

    .last-btn:hover {
        background-color: #fff;
        color: #231815;
    }

}

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

    .last-wrappper {
        width: 92%;
        padding: 14vw 0 21.333vw;
    }

    .last-ttl {
        width: 94.202%;
        margin: 0 auto 6.4vw;
    }

    .last-btn {
        font-size: 24px;
        line-height: 1.458;
        padding: 12px 0 9px;
        width: 99.71%;
    }

}