@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 1260px) {

/* ────────────────────── *
 *                                              *
 * タイトル                                     *
 *                                              *
 * ────────────────────── */

#title p {
    width: 33.33333333333333%;
}

/* ────────────────────── *
 *                                              *
 * バナーコンテンツ                             *
 *                                              *
 * ────────────────────── */

#banner-contents {
    margin: 0 auto 11.904761904761903%;
}

/* ────────────────────── *
 *                                              *
 * アピール                                     *
 *                                              *
 * ────────────────────── */

dl#appeal dt {
    font-size: 18px;
}

/* ────────────────────── *
 *                                              *
 * 最新情報                                     *
 *                                              *
 * ────────────────────── */

#news {
    width: 95.23809523809523%;
    padding: 3.968253968253968% 0;
}
#news dl {
    font-size: 16px;
}

}

@media only screen and (min-width: 0px) and (max-width: 640px) {

/* ────────────────────── *
 *                                              *
 * タイトル                                     *
 *                                              *
 * ────────────────────── */

#title p {
    width: 40.0rem;
}

/* ────────────────────── *
 *                                              *
 * 特徴                                         *
 *                                              *
 * ────────────────────── */

#character {
    padding: 5.0rem 2.0rem 4.0rem;
}
#character p {
    width: 60.0rem;
}

/* ────────────────────── *
 *                                              *
 * バナーコンテンツ                             *
 *                                              *
 * ────────────────────── */

#banner-contents {
    margin: 0 auto 15.0rem;
}
#banner-contents ul {
    display: block;
}
#banner-contents ul li {
    width: 100%;
}


/* ────────────────────── *
 *                                              *
 * アピール                                     *
 *                                              *
 * ────────────────────── */

dl#appeal {
    width: 60.0rem;
    padding: 1.6rem 0;
    margin: 0 auto 10.0rem;
}
dl#appeal dt {
    font-size: 2.6rem;
    padding: 2.0rem;
}
dl#appeal dd {
    padding: 2.0rem;
    margin: 0 auto;
}

/* ────────────────────── *
 *                                              *
 * 最新情報                                     *
 *                                              *
 * ────────────────────── */

#news {
    padding: 5.0rem 0;
}
#news h3 {
    width: 15.8rem;
    min-width: 100px;
    margin-bottom: 4.0rem;
}
#news dl {
    font-size: 2.4rem;
    line-height: 1.5;
    display: block;
}
#news dl dt {
    width: auto;
    margin-bottom: 0.5rem;
}
#news dl dd {
    max-width: none;
    margin-bottom: 2.5rem;
}

    /* ────────────────────── *
     *                                              *
     * キャンペーン                                 *
     *                                              *
     * ────────────────────── */

    #campaign {
        width: 93.75%;
        padding-top: 9.375%;
    }

#gallery {
    padding: 5.0rem 0;
}
#gallery p {
    width: 57.5rem;
    margin: 0 auto;
}

}