@charset "utf-8";

html {
    background: url(/campaign/images/vol3/background.png) no-repeat left top/cover;
}

/*--------------------
campaign
-----------------------------------------*/
#campaign {
    padding-top: 34px;
}

@media screen and (min-width: 769px) {
    #campaign {
        padding-top: 60px;
    }
    .bt_pt1,
    .bt_pt1_arrowB {
        max-width: 400px;
    }
}

/*--------------------
header
-----------------------------------------*/
.l-campaign-header {
    margin-inline: auto;
}

.m-campaign-header {
    box-sizing: border-box;
    padding-inline: calc((1 - 347 / 375) * 100%);
    width: 100%;
}

.m-campaign-header_logo {
    display: block;
    margin: 0 auto;
    aspect-ratio: 1968 / 193;
    width: 137px;
}

.m-campaign-header_title {
    position: relative;
    margin: 5px auto 0px;
    padding: unset;
    width: max-content;
    line-height: 1;

    & > img:nth-child(1) {
        display: block;
        margin-inline: auto;
        aspect-ratio: 358 /67;
        width: 221px;
    }

    & > img:nth-child(2) {
        position: absolute;
        left: calc(100% + 1px);
        top: -7px;
        aspect-ratio: 1 / 1;
        width: 54px;
    }
}

@media screen and (min-width: 769px) {
    .m-campaign-header_logo {
        width: 239px;
    }

    .m-campaign-header_title {
        position: relative;
        margin-top: 23px;

        & > img:nth-child(1) {
            width: 358px;
        }

        & > img:nth-child(2) {
            left: calc(100% + 5px);
            top: -7px;
            width: 72px;
        }
    }
}

/*--------------------
campaign featured
-----------------------------------------*/
.l-campaign-featured {
    margin-top: 24px;
    width: 100%;
}

.m-campaign-featured {
    width: 100%;
}

.m-campaign-featured_lead {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.8;
}

.m-campaign-featured_period {
    --font-weight: 500;
    margin: 18px auto 0px;
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    line-height: 1.2;
    
    & > dt {
        box-sizing: border-box;
        padding-inline: 12px;
        width: max-content;
        background-color: #04112d;
        font-size: 1.4rem;   
        font-weight: var(--font-weight);
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    & > dd {
        box-sizing: border-box;
        border: 1px solid #04112d;
        padding: 5px 7px;
        background-color: #ffffff;
        font-size: 1.6rem;
        text-align: center;
        font-weight: var(--font-weight);
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.m-campaign-featured_exclusive {
    margin: 48px auto 0px;
    width:100%;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}

.m-campaign-featured_apply {
    margin-top: 8px;
    width: 100%;
    & > .bt_pt1_arrowB {
        padding-block: 13px;
        width: calc(300 / 375 * 100vw);
    }
}

@media screen and (min-width: 769px) {
    .l-campaign-featured {
        margin-top: 13px;
    }

    .m-campaign-featured_lead {
        font-size: 2rem;
        line-height: 2;
    }

    .m-campaign-featured_period {
        margin-top: 24px;
        
        & > dt {
            padding: 4px 10px;
            width: 196px;
            font-size: 1.8rem;
            line-height: 2;
        }
        
        & > dd {
            padding-inline: 14px;
            width: 290px;
            font-size: 2.0rem;
            line-height: 1.2;
        }
    }

    .m-campaign-featured_exclusive {
        margin-top: 48px;
    }
}

/*--------------------
campaign archive
-----------------------------------------*/
.l-campaign-archive {
    margin-top: 24px;
    width: 100%;
}

.m-campaign-archive {
    width: 100%;
}

.m-campaign-archive_announce {
    margin-inline: auto;
    box-sizing: border-box;
    border: 1px solid currentColor;
    padding: 10px;
    width: 284px;
    background-color: #ffffff;
    text-align: center;
    color: #b91314;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6;
}

.m-campaign-archive_remarks {
    margin-top: 3.2rem;
    text-align: center;
    font-size: 1.0rem;
    &::before {
        margin-right: 0.25rem;
        content: "※";
    }
}

.m-campaign-archive_list {
    margin-top: 1.6rem;
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
}

@media screen and (min-width: 769px) {
    .l-campaign-archive {
        margin-top: 32px;
    }

    .m-campaign-archive_announce {
        width: 496px;
        padding: 20px 10px;
        font-size: 1.6rem;
    }

    .m-campaign-archive_remarks {
        margin-top: 3.0rem;
        font-size: 1.4rem;
    }

    .m-campaign-archive_list {
        margin-top: 2.4rem;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.2rem 2.4rem;
    }
}

/*--------------------
campaign prize
-----------------------------------------*/
.l-campaign-prize {
    margin-top: 34px;
    margin-inline: auto;
    width: calc(346 / 375 * 100%);
    max-width: 986px;
    & + & { margin-top: 40px; }
}

.m-campaign-prize {
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 32px 20px 16px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: 
        "type"
        "heading"
        "figure"
        "limit"
        "details";
}

.m-campaign-prize_type {
    grid-area: type;
    margin-inline: auto;
    padding-block: 5px;
    width: 162px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: 
        url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxNjIiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAxNjIgMjUiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMTUwLjMzNCAxMi4yNTI0TDE2MiAyNUgwTDEwLjY2NzkgMTIuMjUyNEwwLjc2MzgwMiAwSDE2MS4yMzZMMTUwLjMzNCAxMi4yNTI0WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzM5MDFfMTY0MykiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8zOTAxXzE2NDMiIHgxPSIzLjUiIHkxPSIzLjk3MDEzZS0wNyIgeDI9IjE1My4yNjciIHkyPSIyNSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDYxNjNBIi8+CjxzdG9wIG9mZnNldD0iMC4zNTMxODciIHN0b3AtY29sb3I9IiMxODMwNzAiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMzI0RjlDIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+)
        no-repeat center center / 100% 100%;
}

.m-campaign-prize_heading {
    grid-area: heading;
    margin: 7px 0px 16px;
    padding: unset;
    width: 100%;
    text-align: center;
    word-break: keep-all;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.54px;
    color: #06163a;
    font-feature-settings: 'palt' on;
    
    & > span {
        margin-top: 7px;
        width: 100%;
        display: block;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 1.12px;
    }
}

.m-campaign-prize_figure {
    grid-area: figure;
    width: 100%;
}

.m-campaign-prize_limit {
    grid-area: limit;
    width: 100%;
}

.m-campaign-prize_details {
    grid-area: details;
    width: 100%;
}

@media screen and (min-width: 769px) {
    .l-campaign-prize {
        margin-top: 80px;
    }

    .m-campaign-prize {
        padding: 40px;
        column-gap: 32px;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "type    type"
            "heading heading"
            "figure  details";
    }

    .m-campaign-prize_heading {
        margin-top:    16px;
        margin-bottom: 24px;
        font-size: 2.5rem;
        letter-spacing: normal;
    }

    .m-campaign-prize_limit {
        position: absolute;
        inset: 20px;
        width: 130px;
        height: min-content;
    }
}

/*--------------------
prize limit
-----------------------------------------*/
.m-prize-limit {
    padding-block: 7px 5px;
    width: 100%;
    background-color: #04112d;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    text-align: center;
}

.m-prize-limit_type {
    font-size: 1.9rem;
    letter-spacing: 1.14px;
}

.m-prize-limit_number {
    display: flex;
    align-items: center;
    column-gap: 2px;
    word-break: keep-all;

    & > span:first-child {
        font-family: Poppins;
        font-size: 2.8rem;
        letter-spacing: -0.84px;
    }
    
    & > span:last-child {
        font-size: 1.4rem;
        font-weight: 600;
        letter-spacing: 0.84px;
    }
}

.m-prize-limit_remarks {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.28px;
}

@media screen and (min-width: 769px) {
    .m-prize-limit {
        row-gap: 5px;
        border-radius: 100%;
        aspect-ratio: 1;
    }

    .m-prize-limit_type {
        width: 100%;
        font-size: 1.9rem;
    }

    .m-prize-limit_number > span:last-child {
        font-weight: 700;
    }

    .m-prize-limit_remarks {
        font-weight: 500;
        letter-spacing: -0.42px;
    }
}

/*--------------------
prize figure
-----------------------------------------*/
.m-prize-figure {
    box-sizing: border-box;
    width: 100%;
    &[data-has-border="true"] {
        border: 1px solid #cccccc;
    }
}

.m-prize-figure_image {
    width: 100%;
    display: block;

    & > img {
        width: 100%;
    }
}

.m-prize-figure_remarks {
    padding: 5px 6px 2px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.14px;
    color: #333333;
    font-feature-settings: 'palt' on;
}

@media screen and (min-width: 769px) {
    .m-prize-figure_remarks {
        padding: 5px 14px 5px;
        font-size: 1.0rem;
        letter-spacing: 0.2px;
    }
}


/*--------------------
prize details
-----------------------------------------*/
.m-prize-details {
    width: 100%;
}

.m-prize-details_main {
    padding-top: 32px;
    width: 100%;

    h3 {
        --font-size: 1.6rem;
        --line-height: 1.5;
        --dot-radius: 4px;
        margin: 0px 0px 2px;
        padding: 0px 0px 0px calc(var(--dot-radius) * 2 + 6px);
        font-size: var(--font-size);
        font-weight: 700;
        line-height: var(--line-height);
        color: #324F9C;
        background:
            url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiIGZpbGw9Im5vbmUiPgo8Y2lyY2xlIGN4PSI0IiBjeT0iNCIgcj0iNCIgZmlsbD0iIzMyNEY5QyIvPgo8L3N2Zz4=)
            no-repeat left calc((var(--font-size) * var(--line-height) / 2 - var(--dot-radius))) / calc(var(--dot-radius) * 2) ;

        &:nth-child(n+2) {
            margin-top: 32px;
        }
    }

    h4 {
        margin: 12px 0px 4px;
        padding: unset;
        width: 100%;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.64px;
        font-feature-settings: 'palt' on;
        h3 + & {
            margin-top: 0px;
        }
    }

    dl {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        row-gap: 4px;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.8px;
        
        & > div {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
        }
     
        & dt { font-weight: inherit; }
        & dd { font-weight: inherit; }
    }

    p {
        --font-size: 1.6rem;
        --line-height: 1.5;
        font-feature-settings: 'palt' on;
        font-size: var(--font-size);
        font-weight: 500;
        line-height: var(--line-height);
        letter-spacing: 0.64px;

        :not(:is(h3, h4)) + & {
            margin-top: 12px;
        }

        & + p {
            margin-top: calc(var(--font-size) * var(--line-height));;
        }
    }
}

.m-prize-details_button {
    border: unset;
    padding: unset;
    width: 100%;
    height: 30px;
    margin-top: 16px;
    text-align: center;

    & > span {
        position: relative;
        font-size: 1.5rem;
        font-weight: 700;
        color: #06163a;

        &::after {
            position: absolute;
            left: 100%;
            top:    0%;
            width:  18px;
            height: 100%;
            display: block;
            background:
                url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDcuOTE0MDZMOC40MTE4MSAxMi4wODcxTDQgNy45MTQwNiIgc3Ryb2tlPSIjMDYxNjNBIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8L3N2Zz4=)
                no-repeat
                center / 100%; 
            content: "";
        }
    }

    &[aria-expanded="true"] > span::after {
        transform: rotate(180deg);
    }
}

.m-prize-details_list li {
    list-style-type: disc;
    margin-left: 2.2rem;
    font-weight: 500;
    line-height: 1.5;
}

@media screen and (min-width: 769px) {
    .m-prize-details_main {
        padding-top: unset;

        dl {
            gap: 4px 14px;
            grid-template-columns: auto 1fr;

            & dd:nth-child(3) {
                padding-left: 1em;
                grid-column: 1 / -1;
            }
        }
    }
}

/*--------------------
応募者全員サービス
-----------------------------------------*/
.cont_campaign_more_wrap {
    margin-top: 70px;
}

@media screen and (min-width: 769px) {
    .cont_campaign_more_wrap {
        margin-top: 40px;
    }
}

/*--------------------
campaign_Premium Pass
-----------------------------------------*/
.cont_campaign_wrap {
    margin-top: 60px;
}


@media screen and (min-width: 769px) {
    .cont_campaign_wrap {
        margin-top: 80px;
    }
}


/*--------------------
modal
-----------------------------------------*/
.modal_header--vol3 {
    padding: 17px 48px 0px;
}

.modal_title--vol3 {
    font-size: 1.8rem;
}

.cont_applyconditions_disclaimer {
    margin-bottom: 16px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    padding: 20px;
    width :100%;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;

    & > div {
        box-sizing: border-box;
        width: 100%;
        display: grid;
        column-gap: 10px;
        grid-template-columns: auto 1fr;

        &:nth-child(n+2) {
            margin-top: 16px;
        }
    }

    & dt {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        &::before {
            color: #333333;
            content: "■";
        }
    }
    & dd {
        grid-column: 2 / -1;
    }
}


@media screen and (min-width: 769px) {
    .modal_header--vol3{
        padding-top: 33px;
    }
    
    .modal_title--vol3 {
        font-size: 2.0rem;
    }

    .cont_applyconditions_disclaimer {
        padding: 24px;
    }
}