body
{
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625rem;

    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; 

    color: #00a1e6;
    background-color: #fff;
}

a
{
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; 

    color: #00aaf5;
}
@media only screen and (min-width: 960px)
{
    a:hover
    {
        text-decoration: none;
    }
}

::selection
{
    background-color: rgba(0, 170, 245, .2);
}

::-moz-selection
{
    background-color: rgba(0, 170, 245, .2);
}

.-pc
{
    display: none !important;
}
@media only screen and (min-width: 960px)
{
    .-pc
    {
        display: block !important;
    }
}

@media only screen and (min-width: 960px)
{
    .-sp
    {
        display: none !important;
    }
}

.-in
{
    -webkit-transition: all .6s ease-out .4s;
            transition: all .6s ease-out .4s; 
    -webkit-transform: translate(0, 4px);
        -ms-transform: translate(0, 4px);
            transform: translate(0, 4px);

    opacity: 0;
}
.-in.-view
{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); 

    opacity: 1;
}

/* header */
.header
{
    padding: 1rem; 

    background-color: #00aaf5;
}
@media only screen and (min-width: 960px)
{
    .header
    {
        padding: 3rem;
    }
}
.header img
{
    display: block;

    width: 47.5%;
    max-width: 384px; 
    margin: 0 auto;
}

/* contents */
.contents__img
{
    display: block;

    width: 100%;
}

.overview
{
    width: 95%; 
    margin: 0 auto;
    padding: 1rem 0 2rem;
}
@media only screen and (min-width: 960px)
{
    .overview
    {
        width: 960px; 
        padding: 2rem 2rem 4rem;
    }
}
.overview__img
{
    display: block;

    width: 95%;
    max-width: 768px; 
    margin: 0 auto;
}
.overview__text-1
{
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.5625rem;

    padding: .5rem;
}
@media only screen and (min-width: 960px)
{
    .overview__text-1
    {
        font-size: 1.25rem;
        line-height: 1.875rem;
        line-height: 2.5rem;

        margin-bottom: 1rem;

        text-align: center;
    }
}
.overview__text-2
{
    font-size: .875rem;
    line-height: 1.5rem;

    padding: .5rem;
}
@media only screen and (min-width: 960px)
{
    .overview__text-2
    {
        font-size: 1rem;
        line-height: 1.625rem;

        width: 768px; 
        margin: 0 auto;
    }
}

.present
{
    padding: 1rem 1rem 2rem; 

    background-color: #e5f7ff;
}
@media only screen and (min-width: 960px)
{
    .present
    {
        padding: 2rem 2rem 4rem;
    }
}
.present h2
{
    font-family: 'Lora', serif;
    font-size: 1.5rem;
    line-height: 2.125rem;

    text-align: center; 
    letter-spacing: .25em;
}
@media only screen and (min-width: 960px)
{
    .present h2
    {
        font-size: 3rem;
        line-height: 3.625rem;

        margin-bottom: 1rem;
    }
}
.present__img
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 95%; 
    margin: 0 auto 1rem;

    -webkit-flex-flow: wrap;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
            justify-content: center;
}
@media only screen and (min-width: 960px)
{
    .present__img
    {
        width: 960px; 
        margin-bottom: 2rem;
    }
}
.present figure
{
    display: block;

    width: 50%; 
    padding: 1rem;
}
@media only screen and (min-width: 960px)
{
    .present figure
    {
        width: 25%;
    }
}
.present__text
{
    font-weight: 700;

    text-align: center;
}
@media only screen and (min-width: 960px)
{
    .present__text
    {
        font-size: 1.25rem;
        line-height: 1.875rem;
    }
}

.campaign-detail
{
    padding: 2rem 1rem;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail
    {
        width: 960px; 
        margin: 0 auto;
        padding: 4rem 0;
    }
}
.campaign-detail__item
{
    margin-bottom: 1rem; 

    border: 2px solid #00a1e6;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail__item
    {
        margin-bottom: 2rem;
    }
}
.campaign-detail h2
{
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;

    padding: 1rem 0;

    text-align: center; 

    border-bottom: 2px solid #00a1e6;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail h2
    {
        font-size: 1.5rem;
        line-height: 2.125rem;

        padding: 1.5rem;
    }
}
.campaign-detail p
{
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.5rem;

    padding: 1rem;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail p
    {
        font-size: 1.125rem;
        line-height: 1.75rem;
        line-height: 2.5rem;

        padding: 2rem;

        text-align: center;
    }
}
.campaign-detail .-date
{
    text-align: center;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail .-date
    {
        font-size: 1.5rem;
        line-height: 2.125rem;
    }
}
.campaign-detail .-date span
{
    font-size: 1.25rem;
    line-height: 1.875rem;
}
@media only screen and (min-width: 960px)
{
    .campaign-detail .-date span
    {
        font-size: 2.25rem;
        line-height: 2.875rem;
    }
}

.note
{
    padding: 2rem 0 8rem; 

    background-color: #fafafa;
}
@media only screen and (min-width: 960px)
{
    .note
    {
        padding: 4rem 0 12rem;
    }
}
.note h2
{
    font-weight: 700;

    margin-bottom: 1rem;

    text-align: center;
}
@media only screen and (min-width: 960px)
{
    .note h2
    {
        font-size: 1.5rem;
        line-height: 2.125rem;
    }
}
.note ul
{
    width: 95%; 
    margin: 0 auto;
    padding: 1rem;
}
@media only screen and (min-width: 960px)
{
    .note ul
    {
        width: 768px; 
        margin-bottom: 2rem;
    }
}
.note li
{
    font-size: .875rem;
    line-height: 1.5rem;

    margin-bottom: 1rem;

    list-style-type: disc;

    text-align: justify;
}
@media only screen and (min-width: 960px)
{
    .note li
    {
        font-size: 1rem;
        line-height: 1.625rem;
    }
}

.copyright
{
    font-size: .625rem;
    line-height: 1.25rem;

    text-align: center;
}

/* footer */
.footer
{
    position: fixed;
    bottom: 0;

    width: 100%; 
    padding: 1.5rem;

    text-align: center;

    background-color: #00aaf5;
}
@media only screen and (min-width: 960px)
{
    .footer
    {
        padding: 2rem;
    }
}
.footer__btn
{
    font-weight: 700; 

    display: inline-block;

    padding: .8rem 2rem .9rem;

    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
    text-align: center;
    text-decoration: none;

    color: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
}
.footer__btn:hover
{
    text-decoration: none;
}
@media only screen and (min-width: 960px)
{
    .footer__btn:hover
    {
        cursor: pointer;
    }
}
@media only screen and (min-width: 960px)
{
    .footer__btn:hover
    {
        color: #00a1e6; 
        background-color: #fff;
    }
}
@media only screen and (min-width: 960px)
{
    .footer__btn
    {
        font-size: 1.25rem;
        line-height: 1.875rem;

        padding: 1.5rem 6rem 1.6rem;
    }
}

/* modal */
.modal
{
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;

    visibility: hidden;

    height: 100%;

    -webkit-transition: all .2s ease 0s;
            transition: all .2s ease 0s; 

    opacity: 0;
    background-color: #00aaf5;
}
.modal.-active
{
    visibility: visible;

    opacity: 1;
}
@media only screen and (min-width: 960px)
{
    .modal
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;

        width: 100%;
        height: 100vh !important; 

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-flow: column;
            -ms-flex-flow: column;
                flex-flow: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
                justify-content: center;
    }
}
@media only screen and (min-width: 960px)
{
    .modal .header
    {
        position: absolute;
        top: 0;

        width: 100%;
    }
}

.quiz
{
    position: relative;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    width: 95%;
    height: 520px; 
    margin: 0 auto;
    padding: 1rem 2rem;

    background: #fff url(../images/q.png) center top no-repeat;
    background-size: 240px auto;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column;
        -ms-flex-flow: column;
            flex-flow: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
            justify-content: space-between;
}
@media only screen and (min-width: 768px)
{
    .quiz
    {
        width: 600px;
        height: 600px; 
        padding: 2rem 4rem;
    }
}
.quiz__contents
{
    display: none;
}
.quiz__contents.-active
{
    display: block;
}
.quiz__close
{
    position: absolute;
    top: 1rem;
    right: 1.5rem;

    display: block;

    width: 1rem;
    height: 1rem;
}
.quiz__title
{
    display: block;

    width: 200px; 
    margin: 0 auto;
}
@media only screen and (min-width: 768px)
{
    .quiz__title
    {
        width: 320px;
    }
}
.quiz__text
{
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4375rem;

    margin-bottom: 2rem;
}
.quiz__text.-center
{
    margin-bottom: 1rem; 

    text-align: center;
}
.quiz__img
{
    position: relative; 

    margin-bottom: .5rem;
}
.quiz__stamp
{
    position: absolute;
    bottom: -.5rem;
    left: -1rem;

    display: block;

    width: 60px; 

    -webkit-transform: rotate(12deg);
        -ms-transform: rotate(12deg);
            transform: rotate(12deg);
}
@media only screen and (min-width: 768px)
{
    .quiz__stamp
    {
        bottom: -.5rem;
        left: -3rem; 

        width: 120px;
    }
}
.quiz__answer
{
    font-size: 3rem;
    font-weight: 700;
    line-height: 3.625rem;

    margin-bottom: 2rem; 

    text-align: center;
}
@media only screen and (min-width: 768px)
{
    .quiz__answer
    {
        font-size: 3rem;
        line-height: 3.625rem;

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        display: block;

        margin-bottom: 1rem; 

        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
                align-items: center;
    }
}
.quiz__answer span
{
    font-size: .75rem;
    line-height: 1.375rem;

    display: block;

    margin-top: .5rem;
    margin-left: 1rem;
}
@media only screen and (min-width: 768px)
{
    .quiz__answer span
    {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }
}
.quiz__btn
{
    font-weight: 700;

    display: inline-block;
    display: block;

    width: 95%; 
    margin: 1rem auto;

    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
    text-align: center;
    text-decoration: none;

    color: #00aaf5;
    border: 2px solid #00aaf5;
    border-radius: 5px;
    background-color: #fff;
}
.quiz__btn:hover
{
    text-decoration: none;
}
@media only screen and (min-width: 960px)
{
    .quiz__btn:hover
    {
        cursor: pointer;
    }
}
@media only screen and (min-width: 960px)
{
    .quiz__btn:hover
    {
        color: #fff; 
        background-color: #00aaf5;
    }
}
@media only screen and (min-width: 768px)
{
    .quiz__btn
    {
        width: 400px;
    }
}
.quiz__btn.-top
{
    margin: 2rem auto;
    padding: 4rem 0; 

    background: #fff url(../images/q.png) center center no-repeat;
    background-size: 80px auto;
}
@media only screen and (min-width: 768px)
{
    .quiz__btn.-top
    {
        font-size: 1.25rem;
        line-height: 1.875rem; 

        background-size: 96px;
    }
    .quiz__btn.-top:hover
    {
        background-color: #00aaf5;
    }
}
.quiz__btn.-answer
{
    font-size: .8125rem;
    line-height: 1.4375rem;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    padding: 1rem;

    text-align: left; 

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}
@media only screen and (min-width: 768px)
{
    .quiz__btn.-answer
    {
        font-size: 1rem;
        line-height: 1.625rem;

        padding: 1.5rem;
    }
}
.quiz__btn.-answer span
{
    font-family: 'Lora', serif;
    font-size: 1.125rem;
    line-height: 1.75rem;

    margin-right: .5rem;
}
@media only screen and (min-width: 768px)
{
    .quiz__btn.-answer span
    {
        font-size: 1.5rem;
        line-height: 2.125rem;

        margin-right: 1rem;
    }
}
.quiz__btn.-next
{
    font-size: .875rem;
    line-height: 1.5rem;

    width: 47.5%; 
    padding: .5rem;
}
.quiz__btn.-tweet
{
    font-size: .875rem;
    line-height: 1.5rem;

    padding: .5rem;
}

.-flex
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
            align-items: center;
}
.-flex .quiz__tokuten
{
    font-size: 1.625rem;
    line-height: 2.25rem;
    line-height: 1;

    padding-right: .5em;
    padding-left: .5em; 

    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
            flex-shrink: 0;
}
.-flex .quiz__tokuten span
{
    font-size: .5em;
}
.-flex .quiz__desc
{
    line-height: 1.6; 

    margin-bottom: 0;
    padding-left: .5em;

    border-left: 1px solid #00aaf5;
}

/* Print
   ========================================================================== */
@media print
{
    *
    {
        color: black !important;
        border-color: black !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    header
    {
        display: none;
    }
    footer::after
    {
        content: '';
    }
    .noprint
    {
        display: none;
    }
}