@charset 'UTF-8';

.content-area
{
    background: url(../img/concept/pc_bg_concept.jpg) no-repeat center top;
}

@media screen and (max-width: 740px)
{
    .content-area
    {
        background: url(../img/concept/sp_bg_concept.jpg) no-repeat center top;
        background-size: 100% auto;
    }
}

/* mv
---------------------------------------- */
#mv .inner-area
{
    position: relative;

    overflow: hidden;

    max-width: 1600px;
    height: 742px;
    margin: 0 auto;
}

#mv .inner-area p
{
    position: absolute;
    top: 0;
    left: 50%;

    width: 1600px;

    -webkit-transform: translate(-27%, -4.2%);
            transform: translate(-27%, -4.2%);
}

@media screen and (max-width: 740px)
{
    #mv .inner-area
    {
        height: 78.125vw;
    }
    #mv .inner-area p
    {
        width: auto;
        height: 100%;

        -webkit-transform: translate(-31%, -4.2%);
                transform: translate(-31%, -4.2%);
    }
    #mv .inner-area p img
    {
        width: auto;
        max-width: inherit;
        height: 100%;
    }
}

/* class-list
---------------------------------------- */
.class-list
{
    max-width: 1040px;
    margin: 0 auto;
}

.class-list ul
{
    display: -webkit-flex;
    display:         flex;

    margin: 0 0 0 26px;

    -webkit-justify-content: space-between;
            justify-content: space-between;
}

@media screen and (max-width: 1200px)
{
    .class-list
    {
        padding: 0 3.125vw;
    }
}

@media screen and (max-width: 740px)
{
    .class-list ul
    {
        display: block;

        margin: 0;
    }
    .class-list ul li
    {
        width: 75%;
        margin: 4.6875vw auto 0 auto;
    }
}

/* cg
---------------------------------------- */
.cg
{
    margin-top: -12px;
}

.cg .inner
{
    max-width: 1540px;
    margin: 0 auto;
}

.cg .inner .caption
{
    font-size: 1.1rem;

    margin-top: 13px;

    text-align: right;
}

@media screen and (max-width: 1540px)
{
    .cg .caption
    {
        padding: 0 3.125vw;
    }
}

/* note
---------------------------------------- */
.note .inner
{
    font-size: 1.1rem;
    line-height: 1.5;

    max-width: 1540px;
    margin: 0 auto;
    padding: 5px 0 37px 0;

    color: #333;
}

@media screen and (max-width: 1540px)
{
    .note .inner
    {
        padding: 5px 3.125vw 37px 3.125vw;
    }
}

@media screen and (max-width: 740px)
{
    .note .inner
    {
        font-size: 2.8125vw;

        padding: 7.03125vw 3.125vw;
    }
}