/* _setting CSS */
/* min-width:751px | 751px ~
------------------------------------------------------------------------- */
@media screen and (min-width: 751px) {
    /* @media screen
  ------------------------------------------------------------------------- */

    #sec1 {
        min-width: 1080px;
        margin: 0 0 0;
        overflow: hidden;
        background: #007fad;
    }

    #sec1 .title_wrap {
        padding: 30px 0;
        text-align: center;
    }

    #sec1 .title_wrap h1 {
        color: #fff;
        font-size: 1.6rem;
        text-align: center;
    }

    #sec1 .title_wrap span {
        color: #fff;
        font-size: 3.0rem;
        text-align: center;
    }

    #mv_wrap {
        width: 100vw;
        height: 270px;
        overflow: hidden;
    }

    #mv_wrap .mv {
        width: 100%;
        height: 100%;
        background-position: center center !important;
        background-size: cover !important;
    }

    #sec2 {
        width: 850px;
        margin: 0 auto;
        padding: 44px 0;
    }

    .purchase_box {
        margin-top: -1px;
        /*padding: 12px 0;*/
        /*border-top: 1px solid #f4f4f4;*/
    }

    .purchase_box dl {
        width: 100%;
        display: flex;
        border-left: 10px solid #009cd5;
        border: solid 1px #e2e2e2;
        overflow: hidden;
        background-color: #f3f3f3;
        margin: 0;
    }

    .purchase_box dt {
        margin: 24px 0 0 0;
        padding: 0 0 0 25px;
        text-align: left;
        width: 25%;
        background-size: 100%;
    }

    .purchase_box dd {
        width: 75%;
        background-color: #fff;
        padding: 24px 0 24px 12px;
        background-size: 100%;
    }

    /* @media screen
  ------------------------------------------------------------------------- */
}

/* ////.min-width:751px | 751px ~
---------------------------------------------------------------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
------------
max-width:750px | ~ 750px
------------------------------------------------------------------------- */
@media screen and (max-width: 750px) {
    /* @media screen
  ------------------------------------------------------------------------- */


    #sec1 {
        margin: 47px 0 0;
        overflow: hidden;
        background: #007fad;
    }

    #sec1 .title_wrap {
        padding: 30px 0;
        text-align: center;
    }

    #sec1 .title_wrap h1 {
        color: #fff;
        font-size: 1.6rem;
        text-align: center;
    }

    #sec1 .title_wrap span {
        color: #fff;
        font-size: 1.8rem;
        text-align: center;
    }

    #sec1 h2 {
        width: 30px;
        padding: 0 0 0;
        display: block;
        height: 0;
        overflow: hidden;
        background-repeat: no-repeat;
    }

    #mv_wrap {
        width: 100vw;
        height: 70px;
        overflow: hidden;
    }

    #mv_wrap .mv {
        width: 100%;
        height: 100%;
        background-position: center center !important;
        background-size: cover !important;
    }

    #sec2 {
        margin: 0 auto;
        padding: 20px 4.66667%;
    }

    .purchase_box {
        padding: 12px 0;
        /*border-top: 1px solid #f4f4f4;*/
    }

    .purchase_box dl {
        width: 100%;
        display: block;
        overflow: hidden;
        margin: 0;
    }

    .purchase_box dt {
        margin: 24px 0 0 0;
        padding: 12px;
        text-align: left;
        background-color: #009cd5;
        background-size: 100%;
        color: #fff;
    }

    .purchase_box dd {
        background-color: #fff;
        padding: 12px 12px;
        background-size: 100%;
    }

    /* @media screen
  ------------------------------------------------------------------------- */
}